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

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

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

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

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