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 176b1432e..77f4bff98 100644 --- a/app/assets/stylesheets/new_header.scss +++ b/app/assets/stylesheets/new_header.scss @@ -5,3 +5,37 @@ filter: none; } } + +// Target mobile version +.fr-header__menu.fr-modal { + // Avoid overflow due to button width + overflow-x: hidden; + + .fr-btn { + width: auto; + } + + // 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; + } +} 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