From df94e11c4f2b2d7106c8264ffa8cb17cfcd5f1c6 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Tue, 18 Jun 2024 16:37:16 +0200 Subject: [PATCH 1/6] Prevents menu overflow in mobile version --- app/assets/stylesheets/new_header.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/assets/stylesheets/new_header.scss b/app/assets/stylesheets/new_header.scss index 176b1432e..78888fe62 100644 --- a/app/assets/stylesheets/new_header.scss +++ b/app/assets/stylesheets/new_header.scss @@ -5,3 +5,13 @@ filter: none; } } + +.fr-header__menu.fr-modal { + // Avoid overflow on mobile version + // Due to button width + overflow-x: hidden; + + .fr-btn { + width: auto; + } +} \ No newline at end of file From d8f7269f70e45f74a5dbec2ee813dfdfc5494a99 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Tue, 18 Jun 2024 16:38:46 +0200 Subject: [PATCH 2/6] Align links & buttons in mobile version --- app/assets/stylesheets/new_header.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/assets/stylesheets/new_header.scss b/app/assets/stylesheets/new_header.scss index 78888fe62..2175d260b 100644 --- a/app/assets/stylesheets/new_header.scss +++ b/app/assets/stylesheets/new_header.scss @@ -14,4 +14,10 @@ .fr-btn { width: auto; } + + // Align links & buttons in mobile version + .fr-translate { + margin-left: 0; + margin-right: 0; + } } \ No newline at end of file From f12f7c15e55267b1d08e801fa3300ae2db47d25c Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Thu, 20 Jun 2024 09:46:30 +0200 Subject: [PATCH 3/6] Remove border on when there is one item only --- app/assets/stylesheets/new_header.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/assets/stylesheets/new_header.scss b/app/assets/stylesheets/new_header.scss index 2175d260b..255bf16ce 100644 --- a/app/assets/stylesheets/new_header.scss +++ b/app/assets/stylesheets/new_header.scss @@ -20,4 +20,9 @@ margin-left: 0; margin-right: 0; } + + // Remove border on when there is one item only + .fr-nav__item:only-child::before { + box-shadow: none; + } } \ No newline at end of file From f3181f1f5e0c3258d72a2e7c7e0c3272824bb672 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Thu, 20 Jun 2024 09:57:19 +0200 Subject: [PATCH 4/6] Moves separating margin --- app/assets/stylesheets/new_header.scss | 2 +- app/views/layouts/_account_dropdown.haml | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/new_header.scss b/app/assets/stylesheets/new_header.scss index 255bf16ce..e80f27060 100644 --- a/app/assets/stylesheets/new_header.scss +++ b/app/assets/stylesheets/new_header.scss @@ -25,4 +25,4 @@ .fr-nav__item:only-child::before { box-shadow: none; } -} \ No newline at end of file +} diff --git a/app/views/layouts/_account_dropdown.haml b/app/views/layouts/_account_dropdown.haml index fb7c6026e..39beaf8ce 100644 --- a/app/views/layouts/_account_dropdown.haml +++ b/app/views/layouts/_account_dropdown.haml @@ -1,11 +1,11 @@ %nav.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('my_account', scope: [:layouts]) } .fr-nav__item %button.account-btn.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) } - %span= current_email + %span.fr-mr-1w= current_email - if dossier.present? && dossier&.france_connected_with_one_identity? %span  via FranceConnect - %span{ class: "fr-badge fr-badge--sm fr-ml-1w #{color_by_role(nav_bar_profile)}" } + %span{ class: "fr-badge fr-badge--sm #{color_by_role(nav_bar_profile)}" } = t("layouts.#{nav_bar_profile}") #account.fr-collapse.fr-menu %ul.fr-menu__list.max-content From 8cfef1bc8fbcace2f3cb393838460aae14e56f38 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Fri, 21 Jun 2024 11:07:58 +0200 Subject: [PATCH 5/6] Add space between button edge and content --- app/assets/stylesheets/new_header.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/assets/stylesheets/new_header.scss b/app/assets/stylesheets/new_header.scss index e80f27060..faee9cf01 100644 --- a/app/assets/stylesheets/new_header.scss +++ b/app/assets/stylesheets/new_header.scss @@ -26,3 +26,11 @@ box-shadow: none; } } + +// Add space between button edge and content +#modal-header__menu .fr-translate__btn { + margin-right: 0; + margin-left: 0; + padding-right: 0.5rem; + padding-left: 0.5rem; +} From b9ba2d9a01f3a2cba1f5bf77087608044c2a5c9b Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Fri, 21 Jun 2024 11:27:44 +0200 Subject: [PATCH 6/6] Align contents of language selector list --- app/assets/stylesheets/dsfr.scss | 12 ++++++++++++ app/assets/stylesheets/new_header.scss | 27 +++++++++++++++----------- 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/dsfr.scss b/app/assets/stylesheets/dsfr.scss index 11343be43..2b312fc36 100644 --- a/app/assets/stylesheets/dsfr.scss +++ b/app/assets/stylesheets/dsfr.scss @@ -132,6 +132,18 @@ button.fr-tag-bug { } } +// on applique le comportement desktop du sélecteur de langue aux terminaux de toute dimension +.fr-translate .fr-menu__list { + display: grid; + grid-template-rows: repeat(var(--rows), auto); + grid-auto-flow: column; +} + +.fr-translate__language[aria-current]:not([aria-current="false"]) { + display: inline-flex; +} + + // on veut ajouter un gris plus clair dans le side_menu .fr-sidemenu__item .fr-sidemenu__link.custom-link-grey { color: var(--text-disabled-grey); diff --git a/app/assets/stylesheets/new_header.scss b/app/assets/stylesheets/new_header.scss index faee9cf01..77f4bff98 100644 --- a/app/assets/stylesheets/new_header.scss +++ b/app/assets/stylesheets/new_header.scss @@ -6,31 +6,36 @@ } } +// Target mobile version .fr-header__menu.fr-modal { - // Avoid overflow on mobile version - // Due to button width + // Avoid overflow due to button width overflow-x: hidden; .fr-btn { width: auto; } - // Align links & buttons in mobile version + // Align links & buttons .fr-translate { margin-left: 0; margin-right: 0; } + // Align list content with other items + .fr-menu__list { + margin-left: 0.5rem; + } + + // Add space between button edge and content + .fr-container .fr-header__menu-links .fr-btns-group.flex.align-center .fr-translate.fr-nav .fr-nav__item .fr-translate__btn.fr-btn { + margin-right: 0; + margin-left: 0; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + // Remove border on when there is one item only .fr-nav__item:only-child::before { box-shadow: none; } } - -// Add space between button edge and content -#modal-header__menu .fr-translate__btn { - margin-right: 0; - margin-left: 0; - padding-right: 0.5rem; - padding-left: 0.5rem; -}