krichtof/app.kluk.fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bulmaize legend

Browse source
This commit is contained in:
Christophe Robillard 2025-12-01 15:01:40 +01:00
parent 43cb410e71
commit 37f3ef400d
2 changed files with 34 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/assets/stylesheets/kluk.css
View file

@ -31,38 +31,42 @@ body {
font-size: 2rem;
}
.legend .bar-afond {
.bar-afond {
background: black;
width: 10px;
height: 10px;
margin-left: 15px;
}
.legend .bar-creatif {
.bar-creatif {
background: red;
width: 10px;
height: 10px;
margin-left: 15px;
}
.legend .bar-frigo {
.bar-frigo {
background: gray;
width: 10px;
height: 10px;
margin-left: 15px;
}
.legend .bar-croisiere {
.bar-croisiere {
background: green;
width: 10px;
height: 10px;
margin-left: 15px;
}
.legend .bar-en-charge {
.bar-en-charge {
background: orange;
width: 10px;
height: 10px;
margin-left: 15px;
}
.legend .bar-explain {
.bar-explain {
padding-left: 3px;
}
@ -80,14 +84,17 @@ main {
align-items: center;
justify-content: center;
}
.mode img {
height: 100%;
width:100%;
width: 100%;
object-fit: contain;
}
.tracker {
grid-area: tracker;
}
.title h1 {
font-weight: 350;
}
@ -106,6 +113,7 @@ main {
height: 100vh;
grid-area: mode;
}
.tracker {
grid-area: tracker;
display: grid;
@ -141,13 +149,15 @@ main {
.mode img {
height: 100%;
width:100%;
width: 100%;
object-fit: contain;
}
.title h1 {
font-weight: 350;
}
}
.moods {
grid-area: moods;
margin: 30px;
@ -167,6 +177,7 @@ main {
justify-content: flex-end;
margin: 30px;
}
.log {
align-self: flex-end;
display: flex;
@ -174,6 +185,7 @@ main {
align-items: flex-start;
overflow: hidden;
}
.moods .log .week {
display: flex;
flex-direction: column;
@ -181,24 +193,30 @@ main {
flex-wrap: wrap;
margin-bottom: 20px;
}
.moods .log .day {
border: 1px;
margin: 4px;
min-width: 15px;
min-height: 15px;
}
.creatif {
background-color: red;
}
.en-charge {
background-color: orange;
}
.frigo-vide {
background-color: grey;
}
.croisiere {
background-color: green;
}
.afond {
background-color: black;
}

12
app/views/moods/index.html.erb
View file

@ -20,24 +20,24 @@
<% end %>
</div>
</div>
<div class="legend">
<div class="legend-mood">
<div class="level">
<div class="level-item">
<div class="bar-frigo"></div>
<div class="bar-explain">Triste</div>
</div>
<div class="legend-mood">
<div class="level-item">
<div class="bar-en-charge"></div>
<div class="bar-explain">En charge</div>
</div>
<div class="legend-mood">
<div class="level-item">
<div class="bar-croisiere"></div>
<div class="bar-explain">Croisiere</div>
</div>
<div class="legend-mood">
<div class="level-item">
<div class="bar-creatif"></div>
<div class="bar-explain">Créatif</div>
</div>
<div class="legend-afond">
<div class="level-item">
<div class="bar-afond"></div>
<div class="bar-explain">A fond</div>
</div>