From 43cb410e7111d68ce5961f08bab4fa85a4594f23 Mon Sep 17 00:00:00 2001
From: Christophe Robillard <christophe@robiweb.net>
Date: Mon, 1 Dec 2025 13:12:00 +0100
Subject: [PATCH] use bulma and kluk classes

---
 app/assets/stylesheets/application.bulma.scss |   3 +-
 app/assets/stylesheets/kluk.css               | 208 ++++++++++++++++++
 app/views/moods/index.html.erb                |  16 +-
 3 files changed, 217 insertions(+), 10 deletions(-)
 create mode 100644 app/assets/stylesheets/kluk.css

diff --git a/app/assets/stylesheets/application.bulma.scss b/app/assets/stylesheets/application.bulma.scss
index b0bc1ad..070a586 100644
--- a/app/assets/stylesheets/application.bulma.scss
+++ b/app/assets/stylesheets/application.bulma.scss
@@ -36,4 +36,5 @@
 // @import "bulma/sass/layout/hero.sass";
 // @import "bulma/sass/layout/section.sass";
 
-@import 'bulma/bulma';
+@use 'bulma/bulma';
+@use './kluk';
diff --git a/app/assets/stylesheets/kluk.css b/app/assets/stylesheets/kluk.css
new file mode 100644
index 0000000..9fc2e7f
--- /dev/null
+++ b/app/assets/stylesheets/kluk.css
@@ -0,0 +1,208 @@
+/*
+ * This is a manifest file that'll be compiled into application.css.
+ *
+ * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
+ * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
+ * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
+ * depending on specificity.
+ *
+ * Consider organizing styles into separate files for maintainability.
+ */
+
+body {
+  margin: 0px;
+  font-family: "Sour Gummy", sans-serif;
+  font-weight: 350;
+  font-style: normal;
+}
+
+.mode {
+  grid-area: mode;
+  height: 50vh;
+}
+
+.tracker {
+  grid-area: tracker;
+}
+
+.title {
+  grid-area: title;
+  margin: 30px;
+  font-size: 2rem;
+}
+
+.legend .bar-afond {
+  background: black;
+  width: 10px;
+  height: 10px;
+  margin-left: 15px;
+}
+
+.legend .bar-creatif {
+  background: red;
+  width: 10px;
+  height: 10px;
+  margin-left: 15px;
+}
+.legend .bar-frigo {
+  background: gray;
+  width: 10px;
+  height: 10px;
+  margin-left: 15px;
+}
+.legend .bar-croisiere {
+  background: green;
+  width: 10px;
+  height: 10px;
+  margin-left: 15px;
+}
+.legend .bar-en-charge {
+  background: orange;
+  width: 10px;
+  height: 10px;
+  margin-left: 15px;
+}
+.legend .bar-explain {
+  padding-left: 3px;
+}
+
+.legend-mood {
+  display: flex;
+  align-items: center;
+}
+
+main {
+  display: block;
+  grid-template-rows: 1fr 1fr;
+  grid-template-areas:
+    "mode"
+    "tracker";
+  align-items: center;
+  justify-content: center;
+}
+.mode img {
+  height: 100%;
+  width:100%;
+  object-fit: contain;
+}
+.tracker {
+  grid-area: tracker;
+}
+.title h1 {
+  font-weight: 350;
+}
+
+@media (min-width: 1000px) {
+  main {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: "mode tracker";
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mode {
+    height: 100vh;
+    grid-area: mode;
+  }
+  .tracker {
+    grid-area: tracker;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 2fr 1fr 6fr 1fr;
+    grid-template-areas:
+      "title title"
+      "info-day info-day"
+      "moods moods"
+      ". legend";
+    background-color: lightgoldenrodyellow;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100%;
+    gap: 45px;
+  }
+
+  .title {
+    grid-area: title;
+    margin: 30px;
+  }
+
+  .info-day {
+    grid-area: info-day;
+    margin: 30px;
+    font-size: 1.8rem;
+  }
+
+  .info {
+    grid-area: info;
+  }
+
+  .mode img {
+    height: 100%;
+    width:100%;
+    object-fit: contain;
+  }
+  .title h1 {
+    font-weight: 350;
+  }
+}
+.moods {
+  grid-area: moods;
+  margin: 30px;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.legend {
+  grid-area: legend;
+  margin: 4px;
+  font-size: 0.8rem;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: flex-end;
+  margin: 30px;
+}
+.log {
+  align-self: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  overflow: hidden;
+}
+.moods .log .week {
+  display: flex;
+  flex-direction: column;
+  justify-items: start;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.moods .log .day {
+  border: 1px;
+  margin: 4px;
+  min-width: 15px;
+  min-height: 15px;
+}
+.creatif {
+  background-color: red;
+}
+.en-charge {
+  background-color: orange;
+}
+.frigo-vide {
+  background-color: grey;
+}
+.croisiere {
+  background-color: green;
+}
+.afond {
+  background-color: black;
+}
+
+.info {
+  margin: 30px;
+}
diff --git a/app/views/moods/index.html.erb b/app/views/moods/index.html.erb
index 4a952ab..ef8eb2a 100644
--- a/app/views/moods/index.html.erb
+++ b/app/views/moods/index.html.erb
@@ -1,13 +1,11 @@
-<main data-controller="mood">
-  <div class="mode">
+<main data-controller="mood" class="columns">
+  <section class="mode section column">
     <%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
-  </div>
-  <div class="tracker">
-    <div class="title">
-      <h1>Comment ça KLUK aujourd'hui ?</h1>
-    </div>
+  </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">
+    <div class="moods container">
       <div class="log">
         <% @mood_log.each do |week| %>
           <div class="week">
@@ -44,5 +42,5 @@
         <div class="bar-explain">A fond</div>
       </div>
     </div>
-  </div>
+  </section>
 </main>