From 5ba69fbb545ec06504dd58bf3e08d6b451b0ccf8 Mon Sep 17 00:00:00 2001
From: Christophe Robillard <christophe@robiweb.net>
Date: Tue, 2 Dec 2025 17:46:01 +0100
Subject: [PATCH] improve layout

---
 app/views/moods/index.html.erb | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/views/moods/index.html.erb b/app/views/moods/index.html.erb
index 341d65f..0de47a4 100644
--- a/app/views/moods/index.html.erb
+++ b/app/views/moods/index.html.erb
@@ -1,14 +1,14 @@
-<main data-controller="mood" class="columns">
-  <section class="mode section column">
+<main data-controller="mood" class="columns m-auto">
+  <section class="mode section column m-auto">
     <%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
   </section>
-  <section class="tracker section column">
-    <h1 class="title is-1">Comment ça KLUK aujourd'hui ?</h1>
-    <div class="info-day" data-mood-target="info">Aujourd'hui</div>
-    <div class="moods container">
-      <div class="log">
+  <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="info-day subtitle" data-mood-target="info">Aujourd'hui</div>
+    <div class="moods">
+      <div class="log is-flex is-flex-wrap-wrap">
         <% @mood_log.each do |week| %>
-          <div class="week">
+          <div class="week 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>
@@ -20,24 +20,24 @@
         <% end %>
       </div>
     </div>
-    <div class="level">
-      <div class="level-item">
+    <div class="level m-auto">
+      <div class="level-item has-text-centered">
           <div class="bar-frigo"></div>
           <div class="bar-explain">Triste</div>
       </div>
-      <div class="level-item">
+      <div class="level-item has-text-centered">
         <div class="bar-en-charge"></div>
         <div class="bar-explain">En charge</div>
       </div>
-      <div class="level-item">
+      <div class="level-item has-text-centered">
         <div class="bar-croisiere"></div>
         <div class="bar-explain">Croisiere</div>
       </div>
-      <div class="level-item">
+      <div class="level-item has-text-centered">
         <div class="bar-creatif"></div>
         <div class="bar-explain">Créatif</div>
       </div>
-      <div class="level-item">
+      <div class="level-item has-text-centered">
         <div class="bar-afond"></div>
         <div class="bar-explain">A fond</div>
       </div>