add legend

draft

@@ -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
+

public/main.css

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

views/index.erb

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