DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Change help menu design pattern (user pages)

Browse source
This commit is contained in:
Corinne Durrmeyer 2024-08-05 12:06:27 +02:00
parent 399f020047
commit 33eece94fd
No known key found for this signature in database
GPG key ID: DDC049DDA35585B6
5 changed files with 67 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
app/assets/stylesheets/buttons.scss
View file

@ -243,6 +243,44 @@ ul.dropdown-items {
margin-bottom: 0;
}
// Apply custom styles to DSFR fr-translate component
.fr-translate__btn.fr-btn.help-btn::before {
content: none;
}
.help__content.fr-menu ul.fr-menu__list {
text-align: left;
font-size: 1rem;
@media (min-width: 62em) {
font-size: 0.875rem;
padding: 0;
width: 360px;
}
}
.help__content.fr-menu ul.fr-menu__list li {
padding: 0.75rem 1rem;
@media (min-width: 62em) {
padding-right: 1rem;
padding-left: 1rem;
}
}
.help__content.fr-menu ul.fr-menu__list li:not(:last-child) {
@media (min-width: 62em) {
border-bottom: 1px solid $border-grey;
}
}
.help__content.fr-menu ul.fr-menu__list {
h1, p {
font-size: inherit;
line-height: inherit;
}
}
.dropdown-items {
li {
display: flex;

29
app/views/shared/help/_help_dropdown_dossier.html.haml
View file

@ -1,17 +1,20 @@
= render Dropdown::MenuComponent.new(wrapper: :span, wrapper_options: { class: ['help-dropdown']}, menu_options: { id: "help-menu" }) do |menu|
- menu.with_button_inner_html do
= t('help')
.fr-translate.fr-nav
.fr-nav__item
%button.help-btn.fr-translate__btn.fr-btn{ "aria-controls" => "help-menu", "aria-expanded" => "false" }
= t('help')
- title = dossier.brouillon? ? t("help_dropdown.help_brouillon_title") : t("help_dropdown.help_filled_dossier")
#help-menu.help__content.fr-collapse.fr-menu
- title = dossier.brouillon? ? t("help_dropdown.help_brouillon_title") : t("help_dropdown.help_filled_dossier")
%ul.fr-menu__list
- if dossier.messagerie_available?
- menu.with_item do
= render partial: 'shared/help/dropdown_items/messagerie_item', locals: { dossier: dossier, title: title }
- if dossier.messagerie_available?
%li.flex
= render partial: 'shared/help/dropdown_items/messagerie_item', locals: { dossier: dossier, title: title }
- elsif dossier.procedure.service.present?
- menu.with_item do
= render partial: 'shared/help/dropdown_items/service_item',
locals: { service: dossier.procedure.service, title: title }
- elsif dossier.procedure.service.present?
%li.flex
= render partial: 'shared/help/dropdown_items/service_item',
locals: { service: dossier.procedure.service, title: title }
- menu.with_item do
= render partial: 'shared/help/dropdown_items/faq_item'
%li
= render partial: 'shared/help/dropdown_items/faq_item'

6
app/views/shared/help/dropdown_items/_faq_item.html.haml
View file

@ -1,5 +1,5 @@
= link_to t("links.common.faq.url"), title: new_tab_suffix(t('help_dropdown.general_title')), **external_link_attributes, role: 'menuitem' do
= link_to t("links.common.faq.url"), class: 'flex', title: new_tab_suffix(t('help_dropdown.general_title')), **external_link_attributes do
%span.fr-icon-question-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
.fr-pl-1w
%h1.fr-text--sm= t('help_dropdown.problem_title')
%p.fr-text--sm= t('help_dropdown.problem_description')
%h1= t('help_dropdown.problem_title')
%p= t('help_dropdown.problem_description')

6
app/views/shared/help/dropdown_items/_messagerie_item.html.haml
View file

@ -1,5 +1,5 @@
= link_to messagerie_dossier_path(dossier), role: 'menuitem' do
= link_to messagerie_dossier_path(dossier), class: 'flex' do
%span.fr-icon-mail-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
.fr-pl-1w
%h1.fr-text--sm= title
%p.fr-text--sm= t('help_dropdown.contact_instructeur')
%h1= title
%p= t('help_dropdown.contact_instructeur')

14
app/views/shared/help/dropdown_items/_service_item.html.haml
View file

@ -1,20 +1,20 @@
%span.fr-icon-user-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
.fr-pl-1w
%h1.fr-text--sm= title
%p.fr-mt-2w.fr-mb-1w.fr-text--sm= t('help_dropdown.contact_administration')
%dl.fr-text--sm
.flex.fr-mb-1w
%h1= title
%p.fr-mb-1w= t('help_dropdown.contact_administration')
%dl
.flex.fr-mb-1v
%dt.fr-mr-1v
%span.fr-icon-mail-fill.fr-icon--sm{ "aria-hidden": "true" }
%span.visually-hidden= t('layouts.mailers.service_footer.by_email')
%dd
= link_to service.email, "mailto:#{service.email}", role: 'menuitem'
.flex.fr-mb-1w
= link_to service.email, "mailto:#{service.email}"
.flex.fr-mb-1v
%dt.fr-mr-1v
%span.fr-icon-phone-fill.fr-icon--sm{ "aria-hidden": "true" }
%span.visually-hidden= t('layouts.mailers.service_footer.by_phone')
%dd
= link_to service.telephone, service.telephone_url, role: 'menuitem'
= link_to service.telephone, service.telephone_url
.flex
%dt.fr-mr-1v
%span.fr-icon-time-fill.fr-icon--sm{ "aria-hidden": "true" }