wip

mood.rb

@@ -23,6 +23,6 @@ class Mood < ActiveRecord::Base
       log_mood << [ current_date.to_s, current_mode ]
       current_date += 1
     end
-    log_mood.each_slice(7).to_a.last(54)
+    log_mood.each_slice(7).to_a.last(52)
   end
 end

public/main.css

@@ -24,12 +24,30 @@ body {
 
 .legend {
   grid-area: legend;
-  margin: 30px;
+  margin: 4px;
+  font-size: 0.8rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
 }
-
 .info {
   grid-area: info;
 }
+.legend .bar-creatif {
+  background: red;
+  width: 10px;
+  height: 10px;
+  margin-left: 20px;
+}
+.legend .bar-frigo {
+  background: gray;
+  width: 10px;
+  height: 10px;
+  margin-left: 15px;
+}
+.legend .bar-explain {
+  padding-left: 3px;
+}
 
 main {
   display: block;
@@ -56,6 +74,7 @@ main {
   main {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
     grid-template-areas: "mode tracker";
     align-items: center;
     justify-content: center;
@@ -69,13 +88,17 @@ main {
     grid-area: tracker;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: repeat(2, 1fr) repeat(4, 1fr) repeat(3, 1fr);
     grid-template-areas:
+      "title title"
       "title title"
       "moods moods"
       "moods moods"
       "moods moods"
-      "info legend";
+      "moods moods"
+      ". legend"
+      "info info"
+      "info info";
     background-color: lightgoldenrodyellow;
     align-items: center;
     justify-content: center;
@@ -89,14 +112,6 @@ main {
     margin: 30px;
   }
 
-  .moods {
-    grid-area: moods;
-    margin: 30px;
-  }
-
-  .legend {
-    grid-area: legend;
-  }
 
   .info {
     grid-area: info;
@@ -113,19 +128,31 @@ main {
   }
 }
 .moods {
+  grid-area: moods;
+  margin: 30px;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.legend {
+  align-self: flex-end;
+}
+.log {
+  align-self: flex-end;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  justify-content: flex-start;
+  overflow: hidden;
 }
-.moods .week {
+.moods .log .week {
   display: flex;
   flex-direction: column;
   justify-items: start;
   flex-wrap: wrap;
   margin-bottom: 20px;
 }
-.moods .day {
+.moods .log .day {
   border: 1px;
   margin: 4px;
   min-width: 15px;

views/index.erb

@@ -32,6 +32,7 @@
       <h1>Comment il va le Robi ?</h1>
     </div>
     <div class="moods">
+      <div class="log">
         <% @mood_log.each do |week| %>
           <div class="week">
             <% week.each do |d| %>
@@ -44,11 +45,27 @@
           </div>
         <% end %>
       </div>
+    </div>
     <div class="legend">
-      Ici la légende
+      <div class="legend-mood">
+        <div class="bar-creatif"></div>
+        <div class="bar-explain">mode créatif</div>
+      </div>
+      <div class="legend-mood">
+        <div class="bar-frigo"></div>
+        <div class="bar-explain">triste comme un frigo vide</div>
+      </div>
+      <div class="legend-mood">
+        <div class="bar-croisiere"></div>
+        <div class="bar-explain">mode croisiere</div>
+      </div>
+      <div class="legend-mood">
+        <div class="bar-frigo"></div>
+        <div class="bar-explain">triste comme un frigo vide</div>
+      </div>
     </div>
     <div class="info">
       <div class="current-day">20 mai 2025</div>
     </div>
-  </div
+    </div>
 </main>