krichtof/config
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add legend

Browse source
This commit is contained in:
Christophe Robillard 2025-05-06 13:39:46 +02:00
parent 2c9f95f2ab
commit c4f1c61522
3 changed files with 48 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
draft Normal file
View file

@ -0,0 +1,15 @@
x prendre billet de train
x répondre à Laurent
x noter agenda yaf et coopaname
- faire moodtracker mobile
- faire vaisselle
- vider poubelles
- demander à mathieu quel jour
- laver drap
- appeler athie
- répondre à delphine
- redige mail julie sauzin

32
public/main.css
View file

@ -27,8 +27,10 @@ body {
margin: 4px; margin: 4px;
font-size: 0.8rem; font-size: 0.8rem;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: flex-end; align-items: flex-end;
justify-content: flex-end;
margin: 30px;
} }
.info { .info {
grid-area: info; grid-area: info;
@ -37,7 +39,7 @@ body {
background: red; background: red;
width: 10px; width: 10px;
height: 10px; height: 10px;
margin-left: 20px; margin-left: 15px;
} }
.legend .bar-frigo { .legend .bar-frigo {
background: gray; background: gray;
@ -45,10 +47,27 @@ body {
height: 10px; height: 10px;
margin-left: 15px; margin-left: 15px;
} }
.legend .bar-croisiere {
background: green;
width: 10px;
height: 10px;
margin-left: 15px;
}
.legend .bar-en-charge {
background: orange;
width: 10px;
height: 10px;
margin-left: 15px;
}
.legend .bar-explain { .legend .bar-explain {
padding-left: 3px; padding-left: 3px;
} }
.legend-mood {
display: flex;
align-items: center;
}
main { main {
display: block; display: block;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
@ -88,7 +107,7 @@ main {
grid-area: tracker; grid-area: tracker;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, 1fr) repeat(4, 1fr) repeat(3, 1fr); grid-template-rows: repeat(2, 1fr) repeat(7, 1fr);
grid-template-areas: grid-template-areas:
"title title" "title title"
"title title" "title title"
@ -96,9 +115,9 @@ main {
"moods moods" "moods moods"
"moods moods" "moods moods"
"moods moods" "moods moods"
". legend" "moods moods"
"info info" "moods moods"
"info info"; ". legend";
background-color: lightgoldenrodyellow; background-color: lightgoldenrodyellow;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -120,7 +139,6 @@ main {
.mode img { .mode img {
height: 100%; height: 100%;
width:100%; width:100%;
// min-width: 527px;
object-fit: contain; object-fit: contain;
} }
.title h1 { .title h1 {

17
views/index.erb
View file

@ -48,24 +48,21 @@
</div> </div>
<div class="legend"> <div class="legend">
<div class="legend-mood"> <div class="legend-mood">
<div class="bar-creatif"></div> <div class="bar-frigo"></div>
<div class="bar-explain">mode créatif</div> <div class="bar-explain">Triste</div>
</div> </div>
<div class="legend-mood"> <div class="legend-mood">
<div class="bar-frigo"></div> <div class="bar-en-charge"></div>
<div class="bar-explain">triste comme un frigo vide</div> <div class="bar-explain">En charge</div>
</div> </div>
<div class="legend-mood"> <div class="legend-mood">
<div class="bar-croisiere"></div> <div class="bar-croisiere"></div>
<div class="bar-explain">mode croisiere</div> <div class="bar-explain">Croisiere</div>
</div> </div>
<div class="legend-mood"> <div class="legend-mood">
<div class="bar-frigo"></div> <div class="bar-creatif"></div>
<div class="bar-explain">triste comme un frigo vide</div> <div class="bar-explain">Créatif</div>
</div> </div>
</div> </div>
<div class="info">
<div class="current-day">20 mai 2025</div>
</div>
</div> </div>
</main> </main>