From 7226029109b9f99be50687ea8df74240a7cbb417 Mon Sep 17 00:00:00 2001 From: Greg Burri Date: Wed, 8 Jan 2025 16:13:43 +0100 Subject: [PATCH] Update CSS (WIP) --- Cargo.lock | 24 ++-- backend/scss/style.scss | 142 +++++++++++++----------- backend/static/logo.svg | 59 ++++++++++ backend/templates/base_with_header.html | 46 ++++---- backend/templates/title.html | 2 +- backend/translation.ron | 20 ++-- 6 files changed, 183 insertions(+), 110 deletions(-) create mode 100644 backend/static/logo.svg diff --git a/Cargo.lock b/Cargo.lock index d9421b6..e2bbbc2 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -374,9 +374,9 @@ dependencies = [ [[package]] name = "clap" -version = "4.5.23" +version = "4.5.24" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "3135e7ec2ef7b10c6ed8950f0f792ed96ee093fa088608f1c76e569722700c84" +checksum = "9560b07a799281c7e0958b9296854d6fafd4c5f31444a7e5bb1ad6dde5ccf1bd" dependencies = [ "clap_builder", "clap_derive", @@ -384,9 +384,9 @@ dependencies = [ [[package]] name = "clap_builder" -version = "4.5.23" +version = "4.5.24" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "30582fc632330df2bd26877bde0c1f4470d57c582bbc070376afcd04d8cb4838" +checksum = "874e0dd3eb68bf99058751ac9712f622e61e6f393a94f7128fa26e3f02f5c7cd" dependencies = [ "anstream", "anstyle", @@ -396,9 +396,9 @@ dependencies = [ [[package]] name = "clap_derive" -version = "4.5.18" +version = "4.5.24" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4ac6a0c7b1a9e9a5186361f67dfa1b88213572f427fb9ab038efb2bd8c582dab" +checksum = "54b755194d6389280185988721fffba69495eed5ee9feeee9a599b53db80318c" dependencies = [ "heck", "proc-macro2", @@ -661,9 +661,9 @@ dependencies = [ [[package]] name = "event-listener" -version = "5.3.1" +version = "5.4.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "6032be9bd27023a771701cc49f9f053c751055f71efb2e0ae5c15809093675ba" +checksum = "3492acde4c3fc54c845eaab3eed8bd00c7a7d881f78bfc801e43a93dec1331ae" dependencies = [ "concurrent-queue", "parking", @@ -1489,9 +1489,9 @@ dependencies = [ [[package]] name = "linux-raw-sys" -version = "0.4.14" +version = "0.4.15" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "78b3ae25bc7c8c38cec158d1f2757ee79e9b3740fbc7ccf0e59e4b08d793fa89" +checksum = "d26c52dbd32dccf2d10cac7725f8eae5296885fb5703b261f7d0a0739ec807ab" [[package]] name = "litemap" @@ -2108,9 +2108,9 @@ checksum = "c7fb8039b3032c191086b10f11f319a6e99e1e82889c5cc6046f515c9db1d497" [[package]] name = "rustix" -version = "0.38.42" +version = "0.38.43" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "f93dc38ecbab2eb790ff964bb77fa94faf256fd3e73285fd7ba0903b76bedb85" +checksum = "a78891ee6bf2340288408954ac787aa063d8e8817e9f53abb37c695c6d834ef6" dependencies = [ "bitflags", "errno", diff --git a/backend/scss/style.scss b/backend/scss/style.scss index b1c26fc..f2db295 100644 --- a/backend/scss/style.scss +++ b/backend/scss/style.scss @@ -1,49 +1,23 @@ @use 'toast.scss'; @use 'modal-dialog.scss'; -@font-face { - font-family: Fira Code; - font-weight: 200; - src: url(FiraCode-Light.woff2) format("woff2"); -} - -@font-face { - font-family: Fira Code; - font-weight: 400; - src: url(FiraCode-Regular.woff2) format("woff2"); -} +$color-1: #B29B89; +$color-2: #89B29B; +$color-3: #9B89B2; -@font-face { - font-family: Fira Code; - font-weight: 600; - src: url(FiraCode-SemiBold.woff2) format("woff2"); -} - -@font-face { - font-family: Fira Code; - font-weight: 700; - src: url(FiraCode-Bold.woff2) format("woff2"); -} - -$primary: #182430; -$background: darken($primary, 5%); -$background-container: lighten($primary, 10%); +$text-color: darken($color-1, 30%); * { margin: 5px; padding: 0px; } -html { - font-size: 80% -} - a { - color: lighten($primary, 40%); + color: darken($color-3, 25%); text-decoration: none; &:hover { - color: lighten($primary, 60%); + color: lighten($color-3, 20%); } } @@ -51,66 +25,110 @@ body { display: flex; flex-direction: column; - font-family: Fira Code, Helvetica Neue, Helvetica, Arial, sans-serif; - text-shadow: 2px 2px 2px rgb(0, 0, 0); - // line-height: 18px; - color: lighten($primary, 60%); - background-color: $background; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: $text-color; + background-color: $color-1; margin: 0px; - .recipe-item { - padding: 4px; - } + .header-container { + display: flex; + flex-direction: row; + justify-content: space-between; - .recipe-item-current { - padding: 3px; - border: 1px solid lighten($primary, 30%); - } + .title { + font-size: 180%; + font-style: italic; - .header-container { - align-self: center; + .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; + } + } + + #select-website-language { + padding: 5px; + } } .footer-container { align-self: center; - font-size: 0.5em; + font-size: 0.7em; } .drag-handle { width: 20px; height: 20px; - background-color: gray; + background-color: blue; + } + + img { + border: 0px; } .main-container { display: flex; flex-direction: row; - // #recipes-list { - // text-align: left; - // } + #recipes-list { + hr { + margin-top: 10px; + margin-bottom: 10px; + height: 1px; + color: $color-3; + background: $color-3; + font-size: 0; + border: 0; + } + + + .recipe-item { + padding: 4px; + } + + .recipe-item-current { + color: lighten($color-3, 30%); + padding: 4px; + background-color: $color-2; + + border: 0.1em solid $color-3; + border-radius: 0.5em; + } + } .content { flex-grow: 1; - background-color: $background-container; - border: 0.1em solid lighten($primary, 50%); - padding: 0.5em; + background-color: $color-2; + border: 0.1em solid $color-3; + border-radius: 1em; + padding: 0.8em; h1 { text-align: center; } .group { - border: 0.1em solid lighten($primary, 30%); + border: 0.1em solid lighten($color-3, 30%); } .step { - border: 0.1em solid lighten($primary, 30%); + border: 0.1em solid lighten($color-3, 30%); } .ingredient { - border: 0.1em solid lighten($primary, 30%); + border: 0.1em solid lighten($color-3, 30%); } #hidden-templates { @@ -125,10 +143,10 @@ body { input, button { - background-color: rgb(52, 40, 85); + // background-color: rgb(52, 40, 85); border-width: 1px; - border-color: white; - color: white; + // border-color: white; + // color: white; } } @@ -175,8 +193,4 @@ body { // } } - - img { - border: 0px; - } } \ No newline at end of file diff --git a/backend/static/logo.svg b/backend/static/logo.svg new file mode 100644 index 0000000..6b8d98f --- /dev/null +++ b/backend/static/logo.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + diff --git a/backend/templates/base_with_header.html b/backend/templates/base_with_header.html index c90a2b4..a38b303 100644 --- a/backend/templates/base_with_header.html +++ b/backend/templates/base_with_header.html @@ -4,31 +4,31 @@
{% include "title.html" %} - {% match user %} - {% when Some with (user) %} - {{ tr.t(Sentence::CreateNewRecipe) }} - - {% if user.name == "" %} - {{ user.email }} - {% else %} - {{ user.name }} - {% endif %} - / {{ tr.t(Sentence::SignOut) }} - {% when None %} - + + {% match user %} + {% when Some with (user) %} + {{ tr.t(Sentence::CreateNewRecipe) }} + + {% if user.name == "" %} + {{ user.email }} + {% else %} + {{ user.name }} + {% endif %} + / {{ tr.t(Sentence::SignOut) }} + {% when None %} {{ tr.t(Sentence::SignInMenu) }}/{{ tr.t(Sentence::SignUpMenu) }}/{{ tr.t(Sentence::LostPassword) }} - - {% endmatch %} + {% endmatch %} - + +
diff --git a/backend/templates/title.html b/backend/templates/title.html index 192b705..5c0fecc 100644 --- a/backend/templates/title.html +++ b/backend/templates/title.html @@ -1 +1 @@ -{{ tr.t(Sentence::MainTitle) }} \ No newline at end of file +{{ tr.t(Sentence::MainTitle) }} \ No newline at end of file diff --git a/backend/translation.ron b/backend/translation.ron index 710682f..4ad2a03 100644 --- a/backend/translation.ron +++ b/backend/translation.ron @@ -38,9 +38,9 @@ (SignUpMenu, "Sign up"), (SignUpTitle, "Sign up"), (SignUpButton, "Sign up"), - (SignUpEmailSent, "An email has been sent), follow the link to validate your account"), + (SignUpEmailSent, "An email has been sent, follow the link to validate your account"), (SignUpFollowEmailLink, "Follow this link to confirm your inscription, {}"), - (SignUpEmailValidationSuccess, "Email validation successful), your account has been created"), + (SignUpEmailValidationSuccess, "Email validation successful, your account has been created"), (SignUpValidationExpired, "The validation has expired. Try to sign up again"), (SignUpValidationErrorTryAgain, "Validation error. Try to sign up again"), (ChooseAPassword, "Choose a password (minimum {} characters)"), @@ -51,9 +51,9 @@ (AskResetAlreadyLoggedInError, "Can't ask to reset password when already logged in"), (AskResetEmailAlreadyResetError, "The password has already been reset for this email"), (AskResetFollowEmailLink, "Follow this link to reset your password, {}"), - (AskResetEmailSent, "An email has been sent), follow the link to reset your password"), + (AskResetEmailSent, "An email has been sent, follow the link to reset your password"), (AskResetTokenMissing, "Reset token missing"), - (AskResetTokenExpired, "Token expired), try to reset password again"), + (AskResetTokenExpired, "Token expired, try to reset password again"), (PasswordReset, "Your password has been reset"), (EmailUnknown, "Email unknown"), (UnableToSendResetEmail, "Unable to send the reset password email"), @@ -62,7 +62,7 @@ (ProfileEmail, "Email (need to be revalidated if changed)"), (ProfileNewPassword, "New password (minimum {} characters)"), (ProfileFollowEmailLink, "Follow this link to validate this email address, {}"), - (ProfileEmailSent, "An email has been sent), follow the link to validate your new email"), + (ProfileEmailSent, "An email has been sent, follow the link to validate your new email"), (ProfileSaved, "Profile saved"), (RecipeNotAllowedToEdit, "Not allowed to edit this recipe"), @@ -134,9 +134,9 @@ (SignUpMenu, "S'inscrire"), (SignUpTitle, "Inscription"), (SignUpButton, "Valider"), - (SignUpEmailSent, "Un email a été envoyé), suivez le lien pour valider votre compte"), + (SignUpEmailSent, "Un email a été envoyé, suivez le lien pour valider votre compte"), (SignUpFollowEmailLink, "Suivez ce lien pour valider votre inscription, {}"), - (SignUpEmailValidationSuccess, "La validation de votre email s'est déroulée avec succès), votre compte a été créé"), + (SignUpEmailValidationSuccess, "La validation de votre email s'est déroulée avec succès, votre compte a été créé"), (SignUpValidationExpired, "La validation a expiré. Essayez de vous inscrire à nouveau"), (SignUpValidationErrorTryAgain, "Erreur de validation. Essayez de vous inscrire à nouveau"), (ChooseAPassword, "Choisir un mot de passe (minimum {} caractères)"), @@ -147,9 +147,9 @@ (AskResetAlreadyLoggedInError, "Impossible de demander une réinitialisation du mot de passe lorsque déjà connecté"), (AskResetEmailAlreadyResetError, "Le mot de passe a déjà été réinitialisé pour cette adresse email"), (AskResetFollowEmailLink, "Suivez ce lien pour réinitialiser votre mot de passe, {}"), - (AskResetEmailSent, "Un email a été envoyé), suivez le lien pour réinitialiser votre mot de passe"), + (AskResetEmailSent, "Un email a été envoyé, suivez le lien pour réinitialiser votre mot de passe"), (AskResetTokenMissing, "Jeton de réinitialisation manquant"), - (AskResetTokenExpired, "Jeton expiré), essayez de réinitialiser votre mot de passe à nouveau"), + (AskResetTokenExpired, "Jeton expiré, essayez de réinitialiser votre mot de passe à nouveau"), (PasswordReset, "Votre mot de passe a été réinitialisé"), (EmailUnknown, "Email inconnu"), (UnableToSendResetEmail, "Impossible d'envoyer l'email pour la réinitialisation du mot de passe"), @@ -158,7 +158,7 @@ (ProfileEmail, "Email (doit être revalidé si changé)"), (ProfileNewPassword, "Nouveau mot de passe (minimum {} caractères)"), (ProfileFollowEmailLink, "Suivez ce lien pour valider l'adresse email, {}"), - (ProfileEmailSent, "Un email a été envoyé), suivez le lien pour valider la nouvelle adresse email"), + (ProfileEmailSent, "Un email a été envoyé, suivez le lien pour valider la nouvelle adresse email"), (ProfileSaved, "Profile sauvegardé"), (RecipeNotAllowedToEdit, "Vous n'êtes pas autorisé à éditer cette recette"), -- 2.49.0