From 2a288abb079468c44a9acdcd1e7dcb8a5df414d1 Mon Sep 17 00:00:00 2001
From: Greg Burri <greg.burri@gmail.com>
Date: Wed, 9 Apr 2025 15:08:43 +0200
Subject: [PATCH] CSS: use a $margin constant. Some CSS improvements (WIP).

---
 backend/scss/calendar.scss              |  22 ++-
 backend/scss/constants.scss             |  25 ++++
 backend/scss/main.scss                  | 176 +++++++++++++++---------
 backend/src/translation.rs              |   1 +
 backend/templates/base.html             |   2 +-
 backend/templates/base_with_header.html |  28 ++--
 backend/templates/calendar.html         |  50 ++++---
 backend/translation.ron                 |  26 ++--
 frontend/src/calendar.rs                |   4 +-
 9 files changed, 218 insertions(+), 116 deletions(-)
 create mode 100644 backend/scss/constants.scss

diff --git a/backend/scss/calendar.scss b/backend/scss/calendar.scss
index d3f36de..65bfa4e 100644
--- a/backend/scss/calendar.scss
+++ b/backend/scss/calendar.scss
@@ -1,7 +1,13 @@
+@use 'constants' as consts;
+
 .calendar {
     .month-selector {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
         width: 100%;
-        text-align: center;
+        font-weight: bold;
 
         .prev {
             float: left;
@@ -11,6 +17,10 @@
             float: right;
         }
 
+        .year {
+            margin: consts.$margin;
+        }
+
         .month {
             display: none;
         }
@@ -22,7 +32,8 @@
 
     ul.weekdays {
         margin: 0;
-        padding: 20px 0;
+        padding: 0px 0;
+        font-style: italic;
 
         li {
             display: inline-block;
@@ -34,7 +45,7 @@
 
     ul.days {
         margin: 0;
-        padding: 20px 0;
+        padding: 0;
 
         li {
             display: inline-block;
@@ -53,6 +64,11 @@
             &.selected-day {
                 background-color: red;
             }
+
+            .remove-scheduled-recipe {
+                padding: 0px calc(consts.$margin / 2);
+                // font-size: 80%;
+            }
         }
     }
 }
diff --git a/backend/scss/constants.scss b/backend/scss/constants.scss
new file mode 100644
index 0000000..04dd159
--- /dev/null
+++ b/backend/scss/constants.scss
@@ -0,0 +1,25 @@
+@use 'sass:color';
+
+$dark-theme: false !default;
+
+$color-1: #B29B89;
+$color-2: #89B29B;
+$color-3: #9B89B2;
+
+$text-color: color.adjust($color-1, $lightness: -30%);
+$text-highlight: color.adjust($color-1, $lightness: +30%);
+$link-color: color.adjust($color-3, $lightness: -25%);
+$link-hover-color: color.adjust($color-3, $lightness: +20%);
+
+@if $dark-theme {
+    $text-color: color.adjust($color-1, $lightness: -10%);
+    $text-highlight: color.adjust($color-1, $lightness: +10%);
+    $link-color: color.adjust($color-3, $lightness: -5%);
+    $link-hover-color: color.adjust($color-3, $lightness: +10%);
+
+    $color-1: color.adjust($color-1, $lightness: -47%);
+    $color-2: color.adjust($color-2, $lightness: -47%);
+    $color-3: color.adjust($color-2, $lightness: -47%);
+}
+
+$margin: 5px;
\ No newline at end of file
diff --git a/backend/scss/main.scss b/backend/scss/main.scss
index 10ae29c..0fbb7aa 100644
--- a/backend/scss/main.scss
+++ b/backend/scss/main.scss
@@ -1,42 +1,18 @@
 @use 'sass:color';
 
-@use 'toast.scss';
-@use 'modal-dialog.scss';
-@use 'calendar.scss';
-
 $dark-theme: false !default;
 
-$color-1: #B29B89;
-$color-2: #89B29B;
-$color-3: #9B89B2;
-
-$text-color: color.adjust($color-1, $lightness: -30%);
-$text-highlight: color.adjust($color-1, $lightness: +30%);
-$link-color: color.adjust($color-3, $lightness: -25%);
-$link-hover-color: color.adjust($color-3, $lightness: +20%);
-
-@if $dark-theme {
-    $text-color: color.adjust($color-1, $lightness: -10%);
-    $text-highlight: color.adjust($color-1, $lightness: +10%);
-    $link-color: color.adjust($color-3, $lightness: -5%);
-    $link-hover-color: color.adjust($color-3, $lightness: +10%);
-
-    $color-1: color.adjust($color-1, $lightness: -47%);
-    $color-2: color.adjust($color-2, $lightness: -47%);
-    $color-3: color.adjust($color-2, $lightness: -47%);
-}
-
-* {
-    margin: 5px;
-    padding: 0px;
-}
+@use 'constants' as consts with ($dark-theme: $dark-theme);
+@use 'calendar';
+@use 'toast';
+@use 'modal-dialog';
 
 a {
-    color: $link-color;
+    color: consts.$link-color;
     text-decoration: none;
 
     &:hover {
-        color: $link-hover-color;
+        color: consts.$link-hover-color;
     }
 }
 
@@ -45,19 +21,14 @@ body {
     flex-direction: column;
 
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    color: $text-color;
-    background-color: $color-1;
+    color: consts.$text-color;
+    background-color: consts.$color-1;
     margin: 0px;
 
     .user-message {
         font-weight: bold;
     }
 
-    .footer-container {
-        align-self: center;
-        font-size: 0.7em;
-    }
-
     .drag-handle {
         width: 20px;
         height: 20px;
@@ -70,9 +41,18 @@ body {
         border: 0px;
     }
 
+    .footer-container {
+        margin: consts.$margin;
+        align-self: center;
+        font-size: 0.7em;
+    }
+
+    /// HEADER ///
     .header-container {
+        margin: calc(2 * consts.$margin);
+
         display: flex;
-        flex-direction: row;
+        align-items: flex-end;
         justify-content: space-between;
 
         .title {
@@ -82,23 +62,24 @@ body {
             .logo {
                 width: 50px;
                 height: 50px;
+
                 vertical-align: bottom;
                 margin: 0px 10px 0px 0px;
             }
         }
 
         .header-menu {
-            align-self: flex-end;
-
-            .create-recipe {
-                border: 0.1em solid $color-3;
-                padding: 2px 8px 2px 8px;
-                border-radius: 0.5em;
+            .user-menu {
+                margin: consts.$margin;
             }
-        }
 
-        #select-website-language {
-            padding: 5px;
+            // .create-recipe {
+            // }
+
+            #select-website-language {
+                margin: consts.$margin;
+                padding: consts.$margin;
+            }
         }
     }
 
@@ -107,41 +88,47 @@ body {
         flex-direction: row;
 
         #recipes-list {
+            margin: calc(2 * consts.$margin);
+
+            ul {
+                padding-left: 20px;
+            }
+
             hr {
                 margin-top: 10px;
                 margin-bottom: 10px;
                 height: 1px;
-                color: $color-3;
-                background: $color-3;
+                color: consts.$color-3;
+                background: consts.$color-3;
                 font-size: 0;
                 border: 0;
             }
 
             .recipe-item {
                 white-space: preserve nowrap;
-                padding: 4px;
+                padding: 2px;
                 // Transparent border: to keep same size than '.recipe-item-current'.
                 border: 0.1em solid rgba(0, 0, 0, 0);
 
                 &.current {
                     white-space: preserve nowrap;
-                    padding: 4px;
-                    border: 0.1em solid $color-3;
+                    padding: 2px;
+                    border: 0.1em solid consts.$color-3;
 
                     border-radius: 0.5em;
-                    color: $text-highlight;
-                    background-color: $color-2;
+                    color: consts.$text-highlight;
+                    background-color: consts.$color-2;
                 }
             }
         }
 
         .content {
+            margin: calc(2 * consts.$margin);
+
             flex-grow: 1;
 
-            margin-left: 0px;
-
-            background-color: $color-2;
-            border: 0.1em solid $color-3;
+            background-color: consts.$color-2;
+            border: 0.1em solid consts.$color-3;
             border-radius: 1em;
             padding: 0.8em;
 
@@ -162,19 +149,19 @@ body {
             }
 
             .group {
-                border: 0.1em solid color.adjust($color-3, $lightness: +30%);
+                border: 0.1em solid color.adjust(consts.$color-3, $lightness: +30%);
                 margin-top: 0px;
                 margin-bottom: 0px;
             }
 
             .step {
-                border: 0.1em solid color.adjust($color-3, $lightness: +30%);
+                border: 0.1em solid color.adjust(consts.$color-3, $lightness: +30%);
                 margin-top: 0px;
                 margin-bottom: 0px;
             }
 
             .ingredient {
-                border: 0.1em solid color.adjust($color-3, $lightness: +30%);
+                border: 0.1em solid color.adjust(consts.$color-3, $lightness: +30%);
                 margin-top: 0px;
                 margin-bottom: 0px;
             }
@@ -286,9 +273,68 @@ body {
     }
 }
 
-// Customize some form elements.
+.button {
+    margin: consts.$margin;
+    padding: calc(consts.$margin / 2) calc(2 * consts.$margin);
+    border: 0.1em solid consts.$color-3;
+    border-radius: 0.5em;
+    background-color: consts.$color-2;
+    box-shadow:
+        -5px -5px 4px 3px color.adjust(consts.$color-2, $lightness: -4%) inset,
+        5px 5px 4px 3px color.adjust(consts.$color-2, $lightness: 4%) inset;
+    cursor: pointer;
+
+    &:hover {
+        color: consts.$link-hover-color;
+    }
+}
+
+/// Tooltip ///
+.tooltip {
+    position: relative;
+
+    .tooltiptext {
+        color: consts.$link-hover-color;
+
+        visibility: hidden;
+        width: 120px;
+        background-color: consts.$color-1;
+        text-align: center;
+        padding: consts.$margin 0;
+
+        border: 0.1em solid consts.$color-3;
+        border-radius: 0.5em;
+
+        position: absolute;
+        z-index: 1;
+
+        cursor: default;
+
+        top: -(consts.$margin);
+        left: 100%;
+        margin-left: consts.$margin;
+    }
+
+    &:hover .tooltiptext {
+        visibility: visible;
+    }
+
+    .tooltiptext::after {
+        content: " ";
+        position: absolute;
+        top: 50%;
+        right: 100%;
+        margin-top: -(consts.$margin);
+        border-width: consts.$margin;
+        border-style: solid;
+        border-color: transparent consts.$color-3 transparent transparent;
+    }
+}
+
+/// Toggle theme (dark, light).
 #toggle-theme {
-    // font-size: 17px;
+    margin: consts.$margin;
+
     position: relative;
     display: inline-block;
     vertical-align: middle;
@@ -309,7 +355,7 @@ body {
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: $color-2;
+        background-color: consts.$color-2;
         transition: .4s;
         border-radius: 30px;
         margin: 0px;
@@ -323,7 +369,7 @@ body {
         border-radius: 20px;
         left: 0.3em;
         bottom: 0.3em;
-        background-color: $color-1;
+        background-color: consts.$color-1;
         box-shadow: inset 2px -2px 0 1.8px #ffffff;
         transition: .4s;
     }
diff --git a/backend/src/translation.rs b/backend/src/translation.rs
index c049f0c..2ffac8d 100644
--- a/backend/src/translation.rs
+++ b/backend/src/translation.rs
@@ -151,6 +151,7 @@ pub enum Sentence {
     CalendarDateFormat, // See https://docs.rs/chrono/latest/chrono/format/strftime/index.html.
     CalendarAddIngredientsToShoppingList,
     CalendarRemoveIngredientsFromShoppingList,
+    CalendarUnschedule,
     CalendarUnscheduleConfirmation,
 }
 
diff --git a/backend/templates/base.html b/backend/templates/base.html
index 692a50c..dd78f02 100644
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@@ -31,6 +31,6 @@
 
         {% block body_container %}{% endblock %}
 
-        <footer class="footer-container">recipes v{{ crate::consts::VERSION }} - gburri 2025</footer>
+        <footer class="footer-container">recipes v{{ crate::consts::VERSION ~}} - <a href="https://www.gburri.org/">gburri</a> 2025</footer>
     </body>
 </html>
\ No newline at end of file
diff --git a/backend/templates/base_with_header.html b/backend/templates/base_with_header.html
index ed58fbb..7f142ff 100644
--- a/backend/templates/base_with_header.html
+++ b/backend/templates/base_with_header.html
@@ -5,19 +5,21 @@
         {% include "title.html" %}
 
         <span class="header-menu">
-            {% match context.user %}
-            {% when Some with (user) %}
-                <a class="create-recipe" href="/recipe/new" >{{ context.tr.t(Sentence::CreateNewRecipe) }}</a>
-                <a href="/{{ context.tr.current_lang_code() }}/user/edit">
-                    {% if user.name == "" %}
-                        {{ user.email }}
-                    {% else %}
-                        {{ user.name }}
-                    {% endif %}
-                </a> / <a href="/signout">{{ context.tr.t(Sentence::SignOut) }}</a>
-            {% when None %}
-                <a href="/{{ context.tr.current_lang_code() }}/signin" >{{ context.tr.t(Sentence::SignInMenu) }}</a>/<a href="/{{ context.tr.current_lang_code() }}/signup">{{ context.tr.t(Sentence::SignUpMenu) }}</a>/<a href="/{{ context.tr.current_lang_code() }}/ask_reset_password">{{ context.tr.t(Sentence::LostPassword) }}</a>
-            {% endmatch %}
+            <span class="user-menu">
+                {% match context.user %}
+                {% when Some with (user) %}
+                    <a class="create-recipe button" href="/recipe/new" >{{ context.tr.t(Sentence::CreateNewRecipe) }}</a>
+                    <a href="/{{ context.tr.current_lang_code() }}/user/edit">
+                        {% if user.name == "" %}
+                            {{ user.email }}
+                        {% else %}
+                            {{ user.name }}
+                        {% endif %}
+                    </a> / <a href="/signout">{{ context.tr.t(Sentence::SignOut) }}</a>
+                {% when None %}
+                    <a href="/{{ context.tr.current_lang_code() }}/signin" >{{ context.tr.t(Sentence::SignInMenu) }}</a> / <a href="/{{ context.tr.current_lang_code() }}/signup">{{ context.tr.t(Sentence::SignUpMenu) }}</a> / <a href="/{{ context.tr.current_lang_code() }}/ask_reset_password">{{ context.tr.t(Sentence::LostPassword) }}</a>
+                {% endmatch %}
+            </span>
 
             <select id="select-website-language">
             {% for lang in translation::available_languages() %}
diff --git a/backend/templates/calendar.html b/backend/templates/calendar.html
index 052a7e2..e5e079e 100644
--- a/backend/templates/calendar.html
+++ b/backend/templates/calendar.html
@@ -1,27 +1,30 @@
 <div class="calendar">
     <div class="month-selector">
-        <span class="prev">PREV</span>
-        <span class="year" ></span>
+        <div class="prev button">⯇</div>
 
-        {% for month in [
-            Sentence::CalendarJanuary,
-            Sentence::CalendarFebruary,
-            Sentence::CalendarMarch,
-            Sentence::CalendarApril,
-            Sentence::CalendarMay,
-            Sentence::CalendarJune,
-            Sentence::CalendarJuly,
-            Sentence::CalendarAugust,
-            Sentence::CalendarSeptember,
-            Sentence::CalendarOctober,
-            Sentence::CalendarNovember,
-            Sentence::CalendarDecember,
-        ] %}
-            <span class="month">{{ context.tr.t(*month) }}</span>
-        {% endfor %}
+        <div>
+            <span class="year"></span>
+            {% for month in [
+                Sentence::CalendarJanuary,
+                Sentence::CalendarFebruary,
+                Sentence::CalendarMarch,
+                Sentence::CalendarApril,
+                Sentence::CalendarMay,
+                Sentence::CalendarJune,
+                Sentence::CalendarJuly,
+                Sentence::CalendarAugust,
+                Sentence::CalendarSeptember,
+                Sentence::CalendarOctober,
+                Sentence::CalendarNovember,
+                Sentence::CalendarDecember,
+            ] %}
+                <span class="month">{{ context.tr.t(*month) }}</span>
+            {% endfor %}
+        </div>
 
-        <span class="next">NEXT</span>
+        <div class="next button">⯈</div>
     </div>
+
     <ul class="weekdays">
         {% for day in [
             Sentence::CalendarMondayAbbreviation,
@@ -48,7 +51,14 @@
     </ul>
 
     <div id="hidden-templates-calendar">
-        <div class="scheduled-recipe-with-link-and-remove"><a></a><span class="remove-scheduled-recipe">X</span></div>
+        <div class="scheduled-recipe-with-link-and-remove"><a></a>
+            <span class="remove-scheduled-recipe button tooltip">✖
+                <span class="tooltiptext">
+                    {{ context.tr.t(Sentence::CalendarUnschedule) }}
+                </span>
+            </span>
+        </div>
+
         <div class="scheduled-recipe"></div>
 
         <div class="unschedule-confirmation">
diff --git a/backend/translation.ron b/backend/translation.ron
index 12606ee..39d1466 100644
--- a/backend/translation.ron
+++ b/backend/translation.ron
@@ -135,6 +135,7 @@
             (CalendarDateFormat, "%A, %-d %B, %C%y"), // See https://docs.rs/chrono/latest/chrono/format/strftime/index.html.
             (CalendarAddIngredientsToShoppingList, "Add ingredients to shopping list"),
             (CalendarRemoveIngredientsFromShoppingList, "Remove ingredients from shopping list"),
+            (CalendarUnschedule, "Remove"),
             (CalendarUnscheduleConfirmation, "Are you sure to remove {title} on {date}"),
         ]
     ),
@@ -256,24 +257,25 @@
             (CalendarFridayAbbreviation, "Ven"),
             (CalendarSaturdayAbbreviation, "Sam"),
             (CalendarSundayAbbreviation, "Dim"),
-            (CalendarJanuary, "Janvier"),
-            (CalendarFebruary, "Février"),
-            (CalendarMarch, "Mars"),
-            (CalendarApril, "Avril"),
-            (CalendarMay, "Mai"),
-            (CalendarJune, "Juin"),
-            (CalendarJuly, "Juillet"),
-            (CalendarAugust, "Août"),
-            (CalendarSeptember, "Septembre"),
-            (CalendarOctober, "Octobre"),
-            (CalendarNovember, "Novembre"),
-            (CalendarDecember, "Décembre"),
+            (CalendarJanuary, "janvier"),
+            (CalendarFebruary, "février"),
+            (CalendarMarch, "mars"),
+            (CalendarApril, "avril"),
+            (CalendarMay, "mai"),
+            (CalendarJune, "juin"),
+            (CalendarJuly, "juillet"),
+            (CalendarAugust, "août"),
+            (CalendarSeptember, "septembre"),
+            (CalendarOctober, "octobre"),
+            (CalendarNovember, "novembre"),
+            (CalendarDecember, "décembre"),
             (CalendarAddToPlanner, "Ajouter au planificateur"),
             (CalendarAddToPlannerSuccess, "La recette {title} a été agendée pour le {date}"),
             (CalendarAddToPlannerAlreadyExists, "La recette {title} a été déjà été agendée pour le {date}"),
             (CalendarDateFormat, "%A %-d %B %C%y"), // See https://docs.rs/chrono/latest/chrono/format/strftime/index.html.
             (CalendarAddIngredientsToShoppingList, "Ajouter les ingrédients à la liste de course"),
             (CalendarRemoveIngredientsFromShoppingList, "Enlever les ingrédients de la liste de course"),
+            (CalendarUnschedule, "Enlever"),
             (CalendarUnscheduleConfirmation, "Êtes-vous sûr de vouloir enlever {title} du {date}"),
         ]
     )
diff --git a/frontend/src/calendar.rs b/frontend/src/calendar.rs
index 8f64921..4b5a1ef 100644
--- a/frontend/src/calendar.rs
+++ b/frontend/src/calendar.rs
@@ -115,7 +115,7 @@ pub fn setup(
     EventListener::new(&days, "click", move |event| {
         let target: Element = event.target().unwrap().dyn_into().unwrap();
 
-        // log!(event); // TODO: Remove.
+        // gloo::console::log!(event); // TODO: Remove.
 
         if target.class_name() == "number" && options.can_select_date {
             let first_day = first_grid_day(state_clone.get_displayed_date());
@@ -129,7 +129,7 @@ pub fn setup(
                 options,
                 recipe_scheduler,
             );
-        } else if target.class_name() == "remove-scheduled-recipe" {
+        } else if target.class_name().contains("remove-scheduled-recipe") {
             spawn_local(async move {
                 let mut recipe_id: i64 = 0;
                 let mut date: NaiveDate = NaiveDate::default();