From 76ac27c260e72c43c6ef5bf945d489217cd8a92c Mon Sep 17 00:00:00 2001 From: florimondmanca Date: Thu, 14 Sep 2023 15:48:34 +0200 Subject: [PATCH] Address DSFR 1.10 changes --- assets/styles/app.scss | 26 ++++++++++++++----- public/images/restriction/all_vehicles.no.svg | 6 +++-- .../images/restriction/all_vehicles.yes.svg | 6 +++-- templates/common/form/dsfr_theme.html.twig | 2 +- templates/index.html.twig | 2 +- templates/login.html.twig | 2 +- .../regulation/_vehicle_set_form.html.twig | 8 +++--- 7 files changed, 36 insertions(+), 16 deletions(-) diff --git a/assets/styles/app.scss b/assets/styles/app.scss index b6d1791a2..8382a050b 100644 --- a/assets/styles/app.scss +++ b/assets/styles/app.scss @@ -111,7 +111,7 @@ label.required > .fr-x-label-content::after, legend.required > .fr-x-label-conte } .fr-x-background-alt--blue-france { - background-color: var(--blue-france-975-75); + background-color: var(--background-alt-blue-france); } .fr-x-autocomplete-wrapper { @@ -300,11 +300,9 @@ li.app-card + li.app-card { } .app-vehicle-image { + position: relative; display: grid !important; place-content: center; - /* Without a 'height', DSFR default image separator would not span entire height. This is a problem especially on mobile. */ - /* We also account for the 2x0.25rem space that DSFR leaves between the image separator and the rich radio top and bottom borders. */ - height: calc(100% - 0.5rem) !important; } .app-vehicle-image__close { @@ -314,9 +312,25 @@ li.app-card + li.app-card { } .app-someVehicles__radiogroup > input[type="radio"]:checked + label { - box-shadow: none; // Drop the DSFR default, we'll place the borders ourselves. - border: 1px solid var(--border-action-high-blue-france); + // DSFR uses a background-image trick to place borders AND the custom checkbox. + // Copy DSFR default and tweak it to use a grey bottom border. + background-image: + linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), // border-top + linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), // border-right + linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), // border-bottom -> We make it grey + linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), // border-left + radial-gradient(transparent 6px, var(--background-action-high-blue-france) 7px, transparent 8px), // Checkbox contour + radial-gradient(var(--background-action-high-blue-france) 3px, transparent 4px); // Checkbox dot +} + +.app-someVehicles__radiogroup > input[type="radio"]:checked ~ .fr-radio-rich__pictogram { + // DSFR uses a background-image trick to place borders. + // We want to use grey left and bottom borders. Drop the default and place actual borders ourselves. + background-image: none; + border-top: 1px solid var(--border-action-high-blue-france); + border-right: 1px solid var(--border-action-high-blue-france); border-bottom: 1px solid var(--border-default-grey); + border-left: 1px solid var(--border-default-grey); } .app-someVehicles__form { diff --git a/public/images/restriction/all_vehicles.no.svg b/public/images/restriction/all_vehicles.no.svg index f35d4906e..ee1b3e5f2 100644 --- a/public/images/restriction/all_vehicles.no.svg +++ b/public/images/restriction/all_vehicles.no.svg @@ -1,3 +1,5 @@ - - + + + + diff --git a/public/images/restriction/all_vehicles.yes.svg b/public/images/restriction/all_vehicles.yes.svg index 109108431..a8cd304ac 100644 --- a/public/images/restriction/all_vehicles.yes.svg +++ b/public/images/restriction/all_vehicles.yes.svg @@ -1,3 +1,5 @@ - - + + + + diff --git a/templates/common/form/dsfr_theme.html.twig b/templates/common/form/dsfr_theme.html.twig index 3f901b52f..d6e32fb6c 100644 --- a/templates/common/form/dsfr_theme.html.twig +++ b/templates/common/form/dsfr_theme.html.twig @@ -97,7 +97,7 @@ https://github.com/symfony/symfony/blob/6.3/src/Symfony/Bridge/Twig/Resources/vi {% block form_errors %} {% if errors|length > 0 %} -
+
{%- for error in errors -%}

{{ error.message }} diff --git a/templates/index.html.twig b/templates/index.html.twig index 96117c788..1dde8ea09 100644 --- a/templates/index.html.twig +++ b/templates/index.html.twig @@ -23,7 +23,7 @@

-
+

{{ 'landing.for-who.title'|trans }}

diff --git a/templates/login.html.twig b/templates/login.html.twig index 3936c4b70..f9cf1c9d7 100644 --- a/templates/login.html.twig +++ b/templates/login.html.twig @@ -43,7 +43,7 @@
-
+
{% if error %}

{{ error.messageKey|trans(error.messageData, 'security') }} diff --git a/templates/regulation/_vehicle_set_form.html.twig b/templates/regulation/_vehicle_set_form.html.twig index b521cf616..11a296c6d 100644 --- a/templates/regulation/_vehicle_set_form.html.twig +++ b/templates/regulation/_vehicle_set_form.html.twig @@ -27,9 +27,11 @@ }, }) }} {{ form_label(option, null, { help: (option.vars.label ~ '.help')|trans }) }} -

- - +
+ +