From 942cdd1dab09f68a3973dee78174ad55c8a9b689 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Corentin=20S=C3=A9chet?= Date: Mon, 22 Aug 2022 17:04:36 +0200 Subject: [PATCH] armentieres: create theme --- static/armentieres/_custom.scss | 673 ++++++++++++++++++ static/armentieres/_vars.scss | 98 +++ static/armentieres/config.json | 24 + static/armentieres/img/icon-user.png | Bin 0 -> 2545 bytes static/armentieres/style.scss | 5 + .../armentieres/combo/page_template.html | 15 + templates/variants/armentieres/theme.html | 11 + templates/variants/armentieres/wcs/base.html | 19 + 8 files changed, 845 insertions(+) create mode 100644 static/armentieres/_custom.scss create mode 100644 static/armentieres/_vars.scss create mode 100644 static/armentieres/config.json create mode 100644 static/armentieres/img/icon-user.png create mode 100644 static/armentieres/style.scss create mode 100644 templates/variants/armentieres/combo/page_template.html create mode 100644 templates/variants/armentieres/theme.html create mode 100644 templates/variants/armentieres/wcs/base.html diff --git a/static/armentieres/_custom.scss b/static/armentieres/_custom.scss new file mode 100644 index 00000000..6439a85d --- /dev/null +++ b/static/armentieres/_custom.scss @@ -0,0 +1,673 @@ +// +// Typo +// +h1 { + font-size: $fz-1; +} + +h2 { + font-size: $fz-2; +} + +h3 { + font-size: $fz-3; +} + +// +// Header +// +div#top { + display: flex; + align-items: center; + flex-wrap: wrap; + padding-top: 0.5rem; +} + +#logo{ + @media($max-mobile-viewport) { + padding-left: 0; + } +} + +nav.site-nav { + flex-grow: 1; + @media($max-mobile-viewport) { + position: absolute; + top: 75px; + right: 10px; + } +} + +div.gru-nav > ul { + margin: 0; + @media($max-mobile-viewport) { + position: fixed; + top: 0; + right: 0; + z-index: 10; + } + + li a { + font-weight: normal; + padding: 30px 20px; + } +} + +div#header { + max-width: calc(#{$width} + 100px); +} + +div#toplinks { + position: static; + padding-top: 1rem; + padding-bottom: 1rem; + padding-right: 2rem; + @media($max-mobile-viewport) { + flex-grow: 1; + padding-right: 50px; + } + + .logged-in, .login { + display: flex; + flex-wrap: wrap; + + @media($max-mobile-viewport) { + span { + display: flex; + a:first-child { + flex-grow: 1; + } + } + } + + > * { + margin: 0 .3rem; + } + + a { + color: black; + font-weight: bold; + display: flex; + align-items: center; + } + + &::before { + font-family: FontAwesome; + content: ''; + width: 1.5rem; + height: 1.5rem; + background: url('/assets/profile:icon'); + margin-right: 0.5rem; + } + } +} + +.arm-page-header { + background: url('/assets/page-header:background'); + background-size: cover; + background-position: center; + color: white; + + h1 { + font-size: 48em / $base-font; + } + + &--default { + display: none; + } + + &--content { + max-width: $width; + clear: both; + margin: 0 auto; + .cell { + padding: 3rem 0rem; + } + } + + @media ($max-mobile-viewport) { + display: none; + } +} + +// +// Content +// +div#main-content-wrapper { + max-width: none; +} + +.central-content { + max-width: $width; + clear: both; + margin: 0 auto; +} + +@media ($min-desktop-viewport) { + .gru-content { + padding: 3rem 0.5rem 0 0.5rem; + } +} + +div#sidebar { + div.cell h2:first-child { + display: flex; + align-items: center; + &::after { + content: ''; + background: $gray-light; + flex-grow: 1; + height: 1px; + margin-left: 8px; + } + } + + @media($max-mobile-viewport) { + display: none; + } +} + +.errornotice, .warningnotice, .successnotice, .infonotice { + border-radius: $border-radius; + padding-top: 2rem; + padding-bottom: 2rem; + padding-right: 2rem; + + a { + color: $red; + } + + &::before { + top: calc(50% - 1rem); + } +} + +.errornotice, .warningnotice { + &::before { + color: $red; + } +} + +.infonotice::before { + color: $yellow; +} + +.successnotice::before { + color: $green-dark; +} + +// +// Footer +// +#footer-wrapper { + padding: 3rem 1.5rem 0; + #footer { + position: relative; + } + + .back-top { + position: absolute; + top: -4.5rem; + right: 0rem; + background: $primary-color; + border-radius: $border-radius; + padding: 0.5rem; + + &--link { + color: black; + + &:hover { + text-decoration: none; + } + + &::before { + font-size: 1.8rem; + } + } + + &--link-label { + display: none; + } + + + } + +} + +.arm-footer-bottom { + padding: 1rem; + background: $gray; + color: white; + .menu-cell { + text-align: center; + li { + display: inline-block; + border: none; + a { + border-radius: 0; + border: none; + color: white; + padding: 0.5rem 2rem; + &:hover { + color: white; + } + } + } + } +} + +// +// Cells +// +%title { + margin-top: 1rem; + margin-bottom: 1rem; +} + +%cell-links-list { + > li > a { + padding-left: 0; + &:hover { + text-decoration: underline; + } + } +} + +div#rub_service div.category, +div#services, +div#account-management, +#columns div.cell:not(.pk-button,.pk-big-button) div.links-list, +#columns div.menucell, +div.wcsformcell, +div.wcsformsofcategorycell, +div.wcscurrentdraftscell, +div.wcscurrentformscell { + .links-list > ul > li { + margin: 0.5rem; + border: 1px solid $gray-light; + border-radius: $border-radius; + padding: 0rem 0.8rem; + a { + text-decoration: none; + } + + &:hover { + box-shadow: $widget-focus-box-shadow; + } + + &.required-authentication, &.external-link { + a{ + padding-right: 2rem; + + &::after { + content: ''; + height: 1.3rem; + width: 1.3rem; + position: absolute; + right: 0.7rem; + } + } + } + + &.required-authentication a::after { + background: center / contain no-repeat url('/assets/authentication-required:icon'); + } + + &.external-link a::after { + background: center / contain no-repeat url('/assets/external-link:icon'); + } + + &:not(:last-child) { + border-bottom: 1px solid $gray-light; + } + } +} + +.gru-content div.cell { + h2:first-child:not(:only-child) { + border-bottom-left-radius: $border-radius; + border-bottom-right-radius: $border-radius; + } + + &.foldable > div > h2:first-child { + background: $yellow; + border: $yellow solid $gray; + color: black; + display: flex; + font-size: $fz-3; + align-items: center; + height: 4rem; + margin: 0; + padding-left: 1rem; + text-transform: none; + + &:hover { + box-shadow: $widget-focus-box-shadow; + } + } + + &.folded > div > h2:first-child { + border: 1px solid $gray; + background: transparent; + + &::after { + color: $gray; + } + } + + &.has-asset-picture { + position: relative; + + > div > h2:first-child { + padding-left: 6rem; + } + + picture { + height: 3rem; + left: 1.5rem; + position: absolute; + top: 0rem; + width: 3rem; + } + } +} + +.gru-content div.searchcell form { + padding: 0; + input[type="search"] { + background: $gray-xlight; + border: none; + + &:focus { + background: $gray-xlight; + border: none; + } + } + + .combo-search--button { + display: none; + } +} + +.gru-content div.tracking-code-input-cell { + background: right / cover url('/assets/tracking-code-input:background'); + div.wcs-tracking-code-input { + padding: 1rem; + div { + padding: 0; + + form { + display: flex; + flex-wrap: wrap; + input { + flex-grow: 99999; + width: 11rem; + } + button { + flex-grow: 1; + @extend %black-button; + margin-right: 0; + min-width: 10rem; + + &, &:hover { + color: $primary-color; + } + } + } + } + } + + h2:first-child { + color: black; + background: transparent; + font-size: $fz-3; + margin-bottom: 0.5rem; + } + +} + +/// WCS +.arm-form-header { + background: $gray-xlight; + + &--content { + max-width: $width; + margin: 0 auto; + padding: 1.5rem 0 2.5rem 0; + } + + &--title { + margin: 0; + font-weight: 900; + max-width: 35rem; + text-transform: uppercase; + font-size: 48em / $base-font; + } + + &--description { + @media($max-mobile-viewport) { + display: none; + } + margin-top: 4rem; + } + + @media($max-mobile-viewport) { + &--content { + padding: 1rem 0 1rem 0; + } + + &--title { + font-size: $fz-1; + text-align: center; + } + } +} + +div#tracking-code { + padding: 1rem; + background: right / cover url('/assets/tracking-code:background'); + border-radius: $border-radius; + .tracking-code-part { + display: flex; + flex-direction: column; + h3 { + background: transparent; + color: black; + text-transform: none; + text-align: center; + margin-bottom: 0.7rem; + } + a { + text-align:center; + background: white; + padding: 0.5rem; + border-radius: $border-radius; + font-weight: bold; + } + } + + form[action="removedraft"] { + display: flex; + justify-content: center; + .form-discard-draft { + @extend %black-button; + margin-right: 0; + &, &:hover { + color: $primary-color; + } + } + } +} + +%button { + box-shadow: none; + padding: 0.5rem 1.5rem; +} + +%black-button { + @extend %button; + background: black; + &:hover { + background: black; + } +} + +%gray-button { + background: $gray-xlight; + color: black; + &:hover { + background: $gray-xlight; + } +} + +.wcs-step { + border-radius: 0; + align-items: center; + &.current { + font-weight: normal; + } + + &--marker-nb { + font-weight: bold; + } + + @media($min-desktop-viewport) { + &.step-before::after { + content: '\f00c'; + font-family: FontAwesome; + margin: 0rem 1rem; + color: $green; + } + } +} + +.field { + &--label .required { + margin: 0; + color: $primary-color; + } +} + +input[type=radio], input[type=checkbox] { + &:focus { + box-shadow: none; + } +} + +input[readonly], select[readonly], textarea[readonly] { + border-radius: $widget-border-radius; + background: transparent; + border: $widget-border; +} + +input::placeholder { + font-style: italic; +} + +@mixin form-button-left($symbol) { + &::before { + content: $symbol; + font-family: FontAwesome; + font-size: 0.7rem; + margin-right: 1rem; + } +} + +@mixin form-button-right($symbol) { + &::after { + content: $symbol; + font-family: FontAwesome; + font-size: 0.7rem; + margin-left: 1rem; + } +} + +.form-content { + &--body .buttons.submit { + .form-next{ + @include form-button-right('\f054'); + } + + .form-previous { + @include form-button-left('\f053'); + } + + .form-submit { + @include form-button-left('\f00c'); + } + + .form-discard, .cancel { + @include form-button-left('\f00d'); + } + } +} + +div.form-validation div.page { + border-radius: $border-radius; +} + +.back-home-button { + display: flex; + justify-content: center; + a { + @extend %button; + &::after { + content: '\f0e2'; + font-family: FontAwesome; + margin-left: 1rem; + } + } +} + +/// +/// Custom classes +/// +.arm-salmon { + color: $salmon; +} + +@mixin custom-background-cell($background, $button-color) { + border: 1px solid transparent; + background: right / cover no-repeat url($background); + .pk-button, .pk-big-button { + @extend %black-button; + &, &:hover { + color: $button-color; + } + } +} + +.gru-content .cell { + &.arm-report { + @include custom-background-cell('/assets/report:background', $secondary-color); + font-size: 120%; + padding: 2rem; + } + + &.arm-suggest { + @include custom-background-cell('/assets/suggest:background', $primary-color) + } + + &.arm-register { + @include custom-background-cell('/assets/register:background', $primary-color) + } +} + +@mixin arm-link-icon($name) { + & > li.arm-icon-#{$name} { + display: flex; + align-items: center; + + &::before { + content: ''; + width: 32px; + height: 32px; + background: center / cover no-repeat url(img/icon-#{$name}.png); + margin-right: 0.8rem; + } + } +} + +%cell-links-list { + @include arm-link-icon('user'); +} diff --git a/static/armentieres/_vars.scss b/static/armentieres/_vars.scss new file mode 100644 index 00000000..8bba2c3c --- /dev/null +++ b/static/armentieres/_vars.scss @@ -0,0 +1,98 @@ +$gray-xlight: #f2f2f2; +$gray-light: #cccccc; +$gray: #919191; +$gray-dark: #333333; +$salmon: #ec8771; +$yellow: #ecbe54; +$yellow-light: #fdf4da; +$red: #e95f5c; +$red-light: #fae1db; +$green-dark: #557c40; +$green: #9ecf87; +$green-light: #e6efdf; + +$primary-color: $salmon; +$secondary-color: $yellow; + + +/// Typo +$font-family: Lato, sans-serif; +$link-color: $primary-color; +$link-decoration: none; +$link-hover-decoration: underline; + +$base-font: 16; +$fz-1: 30em / $base-font; +$fz-2: 20em / $base-font; +$fz-3: 18em / $base-font; +$fz-4: 14em / $base-font; +$fz-small: 14em / $base-font; +$fz-xsmall: 11em / $base-font; + +$font-size: 100% / ( 15 / $base-font ); + +// General +$border-radius: 5px; +$notification_error_color: $red-light; +$notification_warning_color: #e5e5e5; +$notification_success_color: $green-light; +$notification_info_color: $yellow-light; +$sidebar-columns-gutter: 50px; +$back-top-display: block; +$back-top-icon-character: "\f062"; + +// Header +$header-logo-size: 250px 60px; +$toplinks-style: none; +$sidebar-width: 30%; +$nav-after-image: false; + +$nav-color: $gray; +$nav-item-hover-background: transparent; +$nav-item-selected-mode: bottom-border; +$nav-item-selected-border: $primary-color 3px solid; +$nav-item-hover-border: $primary-color 3px solid; +$nav-button-background: transparent; +$nav-button-color: $primary-color; +$nav-border-color: transparent; +$nav-mobile-menu-item-hover-color: black; +$nav-button-bar-height: 3px; +$nav-mobile-bottom-bar-item-hover-color: black; +$nav-mobile-bottom-bar-item-selected-background: $primary-color; +$nav-mobile-bottom-bar-item-selected-color: black; + +// Title +$title-padding: 0; +$title-color: $primary-color; +$title-font-size: $fz-2; +$title-transform: uppercase; +$title-weight: 700; +$title-background: transparent; + +// Cells +$cell-border: none; +$cell-entry-color: black; +$cell-entry-hover-color: black; +$cell-entry-font-weight: normal; +$cell-entry-hover-background: transparent; +$cell-entry-border: none; + +$widget-focus-box-shadow: 0 0 5px 2px $gray-light; + +// Footer +$footer-background: $gray-dark; + +// WCS +$wcs-step-current-label-color: black; +$wcs-step-color: $gray; +$wcs-step-border-bottom: 1px solid $gray-light; +$wcs-step-current-border-bottom: 2px solid $gray-light; +$form-sidebar-width: 25%; +$form-sidebar-gutter: 3rem; + +$form-accent-color: $primary-color; +$widget-border-radius: $border-radius; +$button-color: black; +$button-background: $secondary-color; +$buttons-order: previous (grow), cancel (grow), submit; +$cancel-button-style: "%gray-button"; diff --git a/static/armentieres/config.json b/static/armentieres/config.json new file mode 100644 index 00000000..e8785e80 --- /dev/null +++ b/static/armentieres/config.json @@ -0,0 +1,24 @@ +{ + "label": "Armentières", + "variables": { + "theme_color": "#e8735f", + "email_header_asset": "emails:logo" + }, + "settings": { + "combo": { + "COMBO_ASSET_SLOTS.update": { + "authentication-required:icon": { "label": "Authentification nécessaire: Icône" }, + "emails:logo": { "label": "Emails : logo" }, + "external-link:icon": { "label": "Lien externe: Icône" }, + "header:logo": { "label": "Têtière : logo" }, + "page-header:background": { "label": "En-tête de page : fond" }, + "profile:icon": { "label": "Profil : Icône" }, + "register:background": { "label": "S'enregistrer: Fond" }, + "report:background": { "label": "Signaler une anomalie: Fond" }, + "suggest:background": { "label": "Suggérer une démarche: Fond" }, + "tracking-code-input:background": { "label": "Entrée du code de suivi: fond" }, + "tracking-code:background": { "label": "Code de suivi: Fond" } + } + } + } +} diff --git a/static/armentieres/img/icon-user.png b/static/armentieres/img/icon-user.png new file mode 100644 index 0000000000000000000000000000000000000000..a2d961082dd8c368115c8bd2db1dbd82a6f102cb GIT binary patch literal 2545 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 Hu0mjfV(-?m literal 0 HcmV?d00001 diff --git a/static/armentieres/style.scss b/static/armentieres/style.scss new file mode 100644 index 00000000..1fd447de --- /dev/null +++ b/static/armentieres/style.scss @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +@import 'vars'; +@import '../includes/publik'; +@import 'custom'; diff --git a/templates/variants/armentieres/combo/page_template.html b/templates/variants/armentieres/combo/page_template.html new file mode 100644 index 00000000..1873255b --- /dev/null +++ b/templates/variants/armentieres/combo/page_template.html @@ -0,0 +1,15 @@ +{% extends "combo/page_template.html" %} + +{% block content-pre %} +
+
{% placeholder "page-header" name="En-tête de la page"%}
+
+ {%skeleton_extra_placeholder after-header %} + {% end_skeleton_extra_placeholder %} +{% endblock %} + +{% block footer-post %} +
+ {% placeholder "footer-bottom" name="Bas du pied de page" acquired=True optional=True %} +
+{% endblock %} diff --git a/templates/variants/armentieres/theme.html b/templates/variants/armentieres/theme.html new file mode 100644 index 00000000..8d0f4246 --- /dev/null +++ b/templates/variants/armentieres/theme.html @@ -0,0 +1,11 @@ +{% extends 'theme.html' %} + +{# move nav #} +{% block header-content %} + {% block nav %}{% endblock %} + {% block top-links %}{% endblock %} +{% endblock %} + +{% block after-header %} +{% endblock %} + diff --git a/templates/variants/armentieres/wcs/base.html b/templates/variants/armentieres/wcs/base.html new file mode 100644 index 00000000..b3a33a24 --- /dev/null +++ b/templates/variants/armentieres/wcs/base.html @@ -0,0 +1,19 @@ +{% extends "wcs/base.html" %} + +{% block placeholder-after-header %} + {% if title %} +
+
+

{{ title }}

+ {% if view.formdef.description %} +
+ {{ view.formdef.description | safe }} +
+ {% endif %} +
+
+ {% endif %} +{% endblock %} + +{% block wcs-form-title %}{% endblock %} + -- 2.35.1