Gemfile

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

Gemfile.lock

@@ -243,9 +243,6 @@ 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)
@@ -434,7 +431,6 @@ 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,27 +16,6 @@ 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;
@@ -67,11 +46,15 @@ main {
   height: 10px;
 }
 
+.bar-explain {
+  padding-left: 5px;
+}
+
 .day {
   border: 1px;
   margin: 4px;
-  width: 15px;
-  height: 15px;
+  min-width: 15px;
+  min-height: 15px;
 }
 
 .creatif {

app/javascript/controllers/mood_controller.js

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

app/views/moods/index.html.erb

@@ -1,63 +1,45 @@
 <main data-controller="mood" class="columns 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>
-  </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="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 %>
+  <section class="mode section column m-auto">
+    <%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
+  </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 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">
+            <% week.each do |d| %>
+              <% 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>
+              <% else %>
+                <div class="day"></div>
               <% end %>
-            </div>
-          <% end %>
-        </div>
+            <% end %>
+          </div>
+        <% 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>

config/application.rb

@@ -16,10 +16,12 @@ 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