add month to tracker

Gemfile

@@ -67,3 +67,4 @@ group :test do
 end
 
 gem "cssbundling-rails", "~> 1.4"
+gem "rails-i18n"

Gemfile.lock

@@ -243,6 +243,9 @@ GEM
     rails-html-sanitizer (1.6.2)
       loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
+    rails-i18n (8.1.0)
+      i18n (>= 0.7, < 2)
+      railties (>= 8.0.0, < 9)
     railties (8.0.2)
       actionpack (= 8.0.2)
       activesupport (= 8.0.2)
@@ -431,6 +434,7 @@ DEPENDENCIES
   propshaft
   puma (>= 5.0)
   rails (~> 8.0.2)
+  rails-i18n
   rspec-rails (~> 8.0.0)
   rubocop-rails-omakase
   selenium-webdriver

app/assets/stylesheets/kluk.css

@@ -16,6 +16,27 @@ body {
   font-style: normal;
 }
 
+main {
+  height: 100vh;
+}
+
+.tracker {
+  align-content: center;
+}
+
+.logs {
+  height: 60vh;
+  overflow: scroll;
+  scrollbar-width: none;
+}
+
+.current-day {
+  background-color: white;
+  position: sticky;
+  top: 0;
+  align-content: center;
+}
+
 .bar-afond {
   background: black;
   width: 10px;
@@ -46,15 +67,11 @@ body {
   height: 10px;
 }
 
-.bar-explain {
-  padding-left: 5px;
-}
-
 .day {
   border: 1px;
   margin: 4px;
-  min-width: 15px;
-  min-height: 15px;
+  width: 15px;
+  height: 15px;
 }
 
 .creatif {

app/javascript/controllers/mood_controller.js

@@ -1,12 +1,15 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static targets = [ "image", "info" ]
+  static targets = [ "image", "modeDay", "modeDayMobile" ]
 
   updateDayInfo(event) {
     const image = this.imageTarget;
-    const infoDay = this.infoTarget;
+    const modeDay = this.modeDayTarget;
+    const modeDayMobile = this.modeDayMobileTarget;
+    const modeDayContent = event.target.dataset.day + ' :  ' + event.target.dataset.mode;
     image.src = event.target.dataset.image;
-    infoDay.textContent = event.target.dataset.day;
+    modeDayMobile.textContent = modeDayContent;
+    modeDay.textContent = modeDayContent;
   }
 }

app/views/moods/index.html.erb

@@ -1,17 +1,56 @@
 <main data-controller="mood" class="columns m-auto">
-  <section class="mode section column m-auto">
+  <div class="current-day column">
+    <section class="m-4">
+      <h1 class="title is-3 is-spaced">Comment ça KLUK ?</h1>
+      <div class="is-hidden-tablet mb-4">
+        <div class="" data-mood-target="modeDayMobile">Aujourd'hui</div>
+      </div>
+      <figure class="image is-hidden-mobile has-ratio ">
         <%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
+      </figure>
     </section>
-  <section class="tracker section column has-background-primary-light my-0 mx-auto">
-    <h1 class="title is-1 mt-6">Comment ça KLUK aujourd'hui ?</h1>
-    <div class="subtitle" data-mood-target="info">Aujourd'hui</div>
-    <div>
+  </div>
+  <section class="section column has-background-primary-light is-flex is-flex-direction-column is-justify-content-space-around">
+    <div class="is-hidden-mobile mb-4">
+      <div class="title is-3" data-mood-target="modeDay">Aujourd'hui</div>
+    </div>
+    <div class="tracker">
+      <div class="legend is-flex is-flex-wrap-wrap mb-5">
+        <div class="is-flex is-align-items-center mr-4">
+          <div class="bar-frigo mr-1"></div>
+          <div class="">Triste</div>
+        </div>
+        <div class="is-flex is-align-items-center mr-4">
+          <div class="bar-en-charge mr-1"></div>
+          <div class="">En charge</div>
+        </div>
+        <div class="is-flex is-align-items-center mr-4">
+          <div class="bar-croisiere mr-1"></div>
+          <div class="">Croisiere</div>
+        </div>
+        <div class="is-flex is-align-items-center mr-4">
+          <div class="bar-creatif mr-1"></div>
+          <div>Creatif</div>
+        </div>
+        <div class="is-flex is-align-items-center mr-4">
+          <div class="bar-afond mr-1"></div>
+          <div class="">A fond</div>
+        </div>
+      </div>
+      <div class="logs">
         <div class="is-flex is-flex-wrap-wrap">
           <% @mood_log.each do |week| %>
             <div class="is-flex is-flex-direction-column is-flex-wrap-wrap mb-3">
+              <div class="is-size-7 day">
+                <% day = Date.parse(week.first[0]) %>
+                <% if day.day < 8 && day.monday? %>
+                <%= l(day, format: "%b") %>
+                <% end %>
+              </div>
               <% week.each do |d| %>
+                <% day = Date.parse(d[0]) %>
                 <% if d[1] %>
-                <div data-image="<%= asset_path(d[1] + ".jpg") %>" data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
+                  <div data-image="<%= asset_path(d[1] + ".jpg") %>" data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="click->mood#updateDayInfo mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
                 <% else %>
                   <div class="day"></div>
                 <% end %>
@@ -20,27 +59,6 @@
           <% end %>
         </div>
       </div>
-    <div class="level m-auto">
-      <div class="level-item has-text-centered">
-          <span class="bar-frigo"></span>
-          <div class="bar-explain">Triste</div>
-      </div>
-      <div class="level-item has-text-centered">
-        <span class="bar-en-charge"></span>
-        <div class="bar-explain">En charge</div>
-      </div>
-      <div class="level-item has-text-centered">
-        <span class="bar-croisiere"></span>
-        <div class="bar-explain">Croisiere</div>
-      </div>
-      <div class="level-item has-text-centered">
-        <span class="bar-creatif"></span>
-        <div class="bar-explain">Créatif</div>
-      </div>
-      <div class="level-item has-text-centered">
-        <span class="bar-afond"></span>
-        <div class="bar-explain">A fond</div>
-      </div>
     </div>
   </section>
 </main>

config/application.rb

@@ -16,12 +16,10 @@ module Moodie
     # Common ones are `templates`, `generators`, or `middleware`, for example.
     config.autoload_lib(ignore: %w[assets tasks])
 
-    # Configuration for the application, engines, and railties goes here.
-    #
-    # These settings can be overridden in specific environments using the files
-    # in config/environments, which are processed later.
-    #
     # config.time_zone = "Central Time (US & Canada)"
+    config.time_zone = "Europe/Paris"
+    config.i18n.default_locale = :fr
+    I18n.available_locales = [ :fr, :en ]
     # config.eager_load_paths << Rails.root.join("extras")
   end
 end