gburri/recipes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

CSS: use a $margin constant. Some CSS improvements (WIP).

Browse source
This commit is contained in:
Greg Burri 2025-04-09 15:08:43 +02:00
parent c1fc9aa46f
commit 2a288abb07
9 changed files with 218 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

22
backend/scss/calendar.scss
View file

@ -1,7 +1,13 @@
@use 'constants' as consts;
.calendar { .calendar {
.month-selector { .month-selector {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%; width: 100%;
text-align: center; font-weight: bold;
.prev { .prev {
float: left; float: left;
@ -11,6 +17,10 @@
float: right; float: right;
} }
.year {
margin: consts.$margin;
}
.month { .month {
display: none; display: none;
} }
@ -22,7 +32,8 @@
ul.weekdays { ul.weekdays {
margin: 0; margin: 0;
padding: 20px 0; padding: 0px 0;
font-style: italic;
li { li {
display: inline-block; display: inline-block;
@ -34,7 +45,7 @@
ul.days { ul.days {
margin: 0; margin: 0;
padding: 20px 0; padding: 0;
li { li {
display: inline-block; display: inline-block;
@ -53,6 +64,11 @@
&.selected-day { &.selected-day {
background-color: red; background-color: red;
} }
.remove-scheduled-recipe {
padding: 0px calc(consts.$margin / 2);
// font-size: 80%;
}
} }
} }
} }

25
backend/scss/constants.scss Normal file
View file

@ -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;

176
backend/scss/main.scss
View file

@ -1,42 +1,18 @@
@use 'sass:color'; @use 'sass:color';
@use 'toast.scss';
@use 'modal-dialog.scss';
@use 'calendar.scss';
$dark-theme: false !default; $dark-theme: false !default;
$color-1: #B29B89; @use 'constants' as consts with ($dark-theme: $dark-theme);
$color-2: #89B29B; @use 'calendar';
$color-3: #9B89B2; @use 'toast';
@use 'modal-dialog';
$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;
}
a { a {
color: $link-color; color: consts.$link-color;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: $link-hover-color; color: consts.$link-hover-color;
} }
} }
@ -45,19 +21,14 @@ body {
flex-direction: column; flex-direction: column;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: $text-color; color: consts.$text-color;
background-color: $color-1; background-color: consts.$color-1;
margin: 0px; margin: 0px;
.user-message { .user-message {
font-weight: bold; font-weight: bold;
} }
.footer-container {
align-self: center;
font-size: 0.7em;
}
.drag-handle { .drag-handle {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -70,9 +41,18 @@ body {
border: 0px; border: 0px;
} }
.footer-container {
margin: consts.$margin;
align-self: center;
font-size: 0.7em;
}
/// HEADER ///
.header-container { .header-container {
margin: calc(2 * consts.$margin);
display: flex; display: flex;
flex-direction: row; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
.title { .title {
@ -82,23 +62,24 @@ body {
.logo { .logo {
width: 50px; width: 50px;
height: 50px; height: 50px;
vertical-align: bottom; vertical-align: bottom;
margin: 0px 10px 0px 0px; margin: 0px 10px 0px 0px;
} }
} }
.header-menu { .header-menu {
align-self: flex-end; .user-menu {
margin: consts.$margin;
.create-recipe {
border: 0.1em solid $color-3;
padding: 2px 8px 2px 8px;
border-radius: 0.5em;
} }
}
#select-website-language { // .create-recipe {
padding: 5px; // }
#select-website-language {
margin: consts.$margin;
padding: consts.$margin;
}
} }
} }
@ -107,41 +88,47 @@ body {
flex-direction: row; flex-direction: row;
#recipes-list { #recipes-list {
margin: calc(2 * consts.$margin);
ul {
padding-left: 20px;
}
hr { hr {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
height: 1px; height: 1px;
color: $color-3; color: consts.$color-3;
background: $color-3; background: consts.$color-3;
font-size: 0; font-size: 0;
border: 0; border: 0;
} }
.recipe-item { .recipe-item {
white-space: preserve nowrap; white-space: preserve nowrap;
padding: 4px; padding: 2px;
// Transparent border: to keep same size than '.recipe-item-current'. // Transparent border: to keep same size than '.recipe-item-current'.
border: 0.1em solid rgba(0, 0, 0, 0); border: 0.1em solid rgba(0, 0, 0, 0);
&.current { &.current {
white-space: preserve nowrap; white-space: preserve nowrap;
padding: 4px; padding: 2px;
border: 0.1em solid $color-3; border: 0.1em solid consts.$color-3;
border-radius: 0.5em; border-radius: 0.5em;
color: $text-highlight; color: consts.$text-highlight;
background-color: $color-2; background-color: consts.$color-2;
} }
} }
} }
.content { .content {
margin: calc(2 * consts.$margin);
flex-grow: 1; flex-grow: 1;
margin-left: 0px; background-color: consts.$color-2;
border: 0.1em solid consts.$color-3;
background-color: $color-2;
border: 0.1em solid $color-3;
border-radius: 1em; border-radius: 1em;
padding: 0.8em; padding: 0.8em;
@ -162,19 +149,19 @@ body {
} }
.group { .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-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.step { .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-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.ingredient { .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-top: 0px;
margin-bottom: 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 { #toggle-theme {
// font-size: 17px; margin: consts.$margin;
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -309,7 +355,7 @@ body {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: $color-2; background-color: consts.$color-2;
transition: .4s; transition: .4s;
border-radius: 30px; border-radius: 30px;
margin: 0px; margin: 0px;
@ -323,7 +369,7 @@ body {
border-radius: 20px; border-radius: 20px;
left: 0.3em; left: 0.3em;
bottom: 0.3em; bottom: 0.3em;
background-color: $color-1; background-color: consts.$color-1;
box-shadow: inset 2px -2px 0 1.8px #ffffff; box-shadow: inset 2px -2px 0 1.8px #ffffff;
transition: .4s; transition: .4s;
} }

1
backend/src/translation.rs
View file

@ -151,6 +151,7 @@ pub enum Sentence {
CalendarDateFormat, // See https://docs.rs/chrono/latest/chrono/format/strftime/index.html. CalendarDateFormat, // See https://docs.rs/chrono/latest/chrono/format/strftime/index.html.
CalendarAddIngredientsToShoppingList, CalendarAddIngredientsToShoppingList,
CalendarRemoveIngredientsFromShoppingList, CalendarRemoveIngredientsFromShoppingList,
CalendarUnschedule,
CalendarUnscheduleConfirmation, CalendarUnscheduleConfirmation,
} }

2
backend/templates/base.html
View file

@ -31,6 +31,6 @@
{% block body_container %}{% endblock %} {% 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> </body>
</html> </html>

28
backend/templates/base_with_header.html
View file

@ -5,19 +5,21 @@
{% include "title.html" %} {% include "title.html" %}
<span class="header-menu"> <span class="header-menu">
{% match context.user %} <span class="user-menu">
{% when Some with (user) %} {% match context.user %}
<a class="create-recipe" href="/recipe/new" >{{ context.tr.t(Sentence::CreateNewRecipe) }}</a> {% when Some with (user) %}
<a href="/{{ context.tr.current_lang_code() }}/user/edit"> <a class="create-recipe button" href="/recipe/new" >{{ context.tr.t(Sentence::CreateNewRecipe) }}</a>
{% if user.name == "" %} <a href="/{{ context.tr.current_lang_code() }}/user/edit">
{{ user.email }} {% if user.name == "" %}
{% else %} {{ user.email }}
{{ user.name }} {% else %}
{% endif %} {{ user.name }}
</a> / <a href="/signout">{{ context.tr.t(Sentence::SignOut) }}</a> {% endif %}
{% when None %} </a> / <a href="/signout">{{ context.tr.t(Sentence::SignOut) }}</a>
<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> {% when None %}
{% endmatch %} <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"> <select id="select-website-language">
{% for lang in translation::available_languages() %} {% for lang in translation::available_languages() %}

50
backend/templates/calendar.html
View file

@ -1,27 +1,30 @@
<div class="calendar"> <div class="calendar">
<div class="month-selector"> <div class="month-selector">
<span class="prev">PREV</span> <div class="prev button">⯇</div>
<span class="year" ></span>
{% for month in [ <div>
Sentence::CalendarJanuary, <span class="year"></span>
Sentence::CalendarFebruary, {% for month in [
Sentence::CalendarMarch, Sentence::CalendarJanuary,
Sentence::CalendarApril, Sentence::CalendarFebruary,
Sentence::CalendarMay, Sentence::CalendarMarch,
Sentence::CalendarJune, Sentence::CalendarApril,
Sentence::CalendarJuly, Sentence::CalendarMay,
Sentence::CalendarAugust, Sentence::CalendarJune,
Sentence::CalendarSeptember, Sentence::CalendarJuly,
Sentence::CalendarOctober, Sentence::CalendarAugust,
Sentence::CalendarNovember, Sentence::CalendarSeptember,
Sentence::CalendarDecember, Sentence::CalendarOctober,
] %} Sentence::CalendarNovember,
<span class="month">{{ context.tr.t(*month) }}</span> Sentence::CalendarDecember,
{% endfor %} ] %}
<span class="month">{{ context.tr.t(*month) }}</span>
{% endfor %}
</div>
<span class="next">NEXT</span> <div class="next button">⯈</div>
</div> </div>
<ul class="weekdays"> <ul class="weekdays">
{% for day in [ {% for day in [
Sentence::CalendarMondayAbbreviation, Sentence::CalendarMondayAbbreviation,
@ -48,7 +51,14 @@
</ul> </ul>
<div id="hidden-templates-calendar"> <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="scheduled-recipe"></div>
<div class="unschedule-confirmation"> <div class="unschedule-confirmation">

26
backend/translation.ron
View file

@ -135,6 +135,7 @@
(CalendarDateFormat, "%A, %-d %B, %C%y"), // See https://docs.rs/chrono/latest/chrono/format/strftime/index.html. (CalendarDateFormat, "%A, %-d %B, %C%y"), // See https://docs.rs/chrono/latest/chrono/format/strftime/index.html.
(CalendarAddIngredientsToShoppingList, "Add ingredients to shopping list"), (CalendarAddIngredientsToShoppingList, "Add ingredients to shopping list"),
(CalendarRemoveIngredientsFromShoppingList, "Remove ingredients from shopping list"), (CalendarRemoveIngredientsFromShoppingList, "Remove ingredients from shopping list"),
(CalendarUnschedule, "Remove"),
(CalendarUnscheduleConfirmation, "Are you sure to remove {title} on {date}"), (CalendarUnscheduleConfirmation, "Are you sure to remove {title} on {date}"),
] ]
), ),
@ -256,24 +257,25 @@
(CalendarFridayAbbreviation, "Ven"), (CalendarFridayAbbreviation, "Ven"),
(CalendarSaturdayAbbreviation, "Sam"), (CalendarSaturdayAbbreviation, "Sam"),
(CalendarSundayAbbreviation, "Dim"), (CalendarSundayAbbreviation, "Dim"),
(CalendarJanuary, "Janvier"), (CalendarJanuary, "janvier"),
(CalendarFebruary, "Février"), (CalendarFebruary, "février"),
(CalendarMarch, "Mars"), (CalendarMarch, "mars"),
(CalendarApril, "Avril"), (CalendarApril, "avril"),
(CalendarMay, "Mai"), (CalendarMay, "mai"),
(CalendarJune, "Juin"), (CalendarJune, "juin"),
(CalendarJuly, "Juillet"), (CalendarJuly, "juillet"),
(CalendarAugust, "Août"), (CalendarAugust, "août"),
(CalendarSeptember, "Septembre"), (CalendarSeptember, "septembre"),
(CalendarOctober, "Octobre"), (CalendarOctober, "octobre"),
(CalendarNovember, "Novembre"), (CalendarNovember, "novembre"),
(CalendarDecember, "Décembre"), (CalendarDecember, "décembre"),
(CalendarAddToPlanner, "Ajouter au planificateur"), (CalendarAddToPlanner, "Ajouter au planificateur"),
(CalendarAddToPlannerSuccess, "La recette {title} a été agendée pour le {date}"), (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}"), (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. (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"), (CalendarAddIngredientsToShoppingList, "Ajouter les ingrédients à la liste de course"),
(CalendarRemoveIngredientsFromShoppingList, "Enlever les ingrédients de 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}"), (CalendarUnscheduleConfirmation, "Êtes-vous sûr de vouloir enlever {title} du {date}"),
] ]
) )

4
frontend/src/calendar.rs
View file

@ -115,7 +115,7 @@ pub fn setup(
EventListener::new(&days, "click", move |event| { EventListener::new(&days, "click", move |event| {
let target: Element = event.target().unwrap().dyn_into().unwrap(); 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 { if target.class_name() == "number" && options.can_select_date {
let first_day = first_grid_day(state_clone.get_displayed_date()); let first_day = first_grid_day(state_clone.get_displayed_date());
@ -129,7 +129,7 @@ pub fn setup(
options, options,
recipe_scheduler, recipe_scheduler,
); );
} else if target.class_name() == "remove-scheduled-recipe" { } else if target.class_name().contains("remove-scheduled-recipe") {
spawn_local(async move { spawn_local(async move {
let mut recipe_id: i64 = 0; let mut recipe_id: i64 = 0;
let mut date: NaiveDate = NaiveDate::default(); let mut date: NaiveDate = NaiveDate::default();