pimp view

wip

mood.rb

@@ -1,4 +1,5 @@
 class Mood < ActiveRecord::Base
+  default_scope { order(:recorded_at) }
   validates_presence_of :mode
   validates_presence_of :recorded_at
 

mood_app.rb

@@ -9,7 +9,7 @@ class MoodApp < Sinatra::Base
   set :database, { adapter: 'sqlite3', database: "mood-#{ENV['RACK_ENV']}.sqlite3" }
 
   get '/' do
-    @last_mood = Mood.order(recorded_at: :desc).first
+    @last_mood = Mood.last
     @mood_log = Mood.log
     erb :index
   end

views/index.erb

@@ -1,15 +1,25 @@
 <style>
+body {
+  margin: 0px;
+  font: 1.8rem "Fira Sans", sans-serif;
+}
+
 main {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
 }
+
 .mode {
   height: 100vh;
+  flex: 1 527px;
 }
 img {
-  width: auto;
   height: 100%;
+  width:100%;
+  // min-width: 527px;
+  object-fit: contain;
 }
 table {
   empty-cells: hide;
@@ -23,25 +33,52 @@ tbody tr td {
   border-radius: 50%;
   margin: 5px;
 }
+.tracker {
+  display: flex;
+  flex: 1 527px;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  background-color: lightgoldenrodyellow;
+  height: 100vh;
+  width: 100%;
+}
+
+.info h1 {
+  margin-bottom: 40px;
+  font-weight: 350;
+}
+.tracks {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 30px;
+}
 .week {
   display: flex;
+  flex-direction: column;
+  justify-items: start;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+  
 }
 
 .day {
-  background-color: white;
   border: 1px;
-  margin: 1px;
-  min-width: 10px;
-  min-height: 10px;
+  margin: 4px;
+  min-width: 20px;
+  min-height: 20px;
 }
 .creatif {
-  background-color: purple;
+  background-color: red;
 }
 .en-charge {
   background-color: orange;
 }
 .frigo-vide {
-  background-color: brown;
+  background-color: grey;
 }
 .croisiere {
   background-color: green;
@@ -51,18 +88,23 @@ tbody tr td {
   <div class="mode">
     <img src="<%= @last_mood.mode %>.png">
   </div>
-  <div class="yearlog">
+  <div class="tracker">
+    <div class="info">
+      <h1>Humeurs 2024</h1>
+    </div>
+    <div class="tracks">
 
-    <% @mood_log.each do |week| %>
-      <div class="week">
-        <% week.each do |d| %>
-          <% if d[1] %>
-            <div title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
-          <% else %>
-            <div class="day"></div>
+      <% @mood_log.each do |week| %>
+        <div class="week">
+          <% week.each do |d| %>
+            <% if d[1] %>
+              <div title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
+            <% else %>
+              <div class="day"></div>
+            <% end %>
           <% end %>
-        <% end %>
-      </div>
-    <% end %>
+        </div>
+      <% end %>
+    </div>
   </div>
 </main>