ui(navigation_icons): use span icons which are bolder [asked by design].
ensure next/prev links are always on oneline, make back button bigger [same as design], align back/next/prev to top when there is more than oneline for h1 [either procedure name, either dossier name]
This commit is contained in:
parent
eea5758753
commit
af5af67750
5 changed files with 22 additions and 14 deletions
|
@ -397,3 +397,7 @@ ul.dropdown-items {
|
|||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
|
|
@ -6,6 +6,8 @@ class Instructeurs::BackButtonComponent < ApplicationComponent
|
|||
end
|
||||
|
||||
def call
|
||||
link_to "", @to, class: 'back-btn fr-btn fr-btn--secondary fr-btn--sm fr-mr-2w fr-icon-arrow-left-line', title: t('.back')
|
||||
link_to @to, class: 'back-btn fr-btn fr-btn--secondary fr-btn--sm fr-mr-2w fr-px-1v', title: t('.back') do
|
||||
dsfr_icon("fr-icon-arrow-left-line")
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
@ -16,25 +16,27 @@ class Instructeurs::DossiersNavigationComponent < ApplicationComponent
|
|||
end
|
||||
|
||||
def link_next
|
||||
options = { class: "fr-link fr-icon-arrow-right-line fr-link--icon-right fr-ml-3w" }
|
||||
|
||||
if has_next?
|
||||
tag.a(t('.next'), **options.merge(href: next_instructeur_dossier_path(dossier:, statut:)))
|
||||
html_tag = :a
|
||||
options = { class: "fr-link no-wrap fr-ml-3w", href: next_instructeur_dossier_path(dossier:, statut:) }
|
||||
else
|
||||
options[:class] = "#{options[:class]} fr-text-mention--grey"
|
||||
tag.span(t('.next'), **options)
|
||||
html_tag = :span
|
||||
options = { class: "fr-link no-wrap fr-ml-3w fr-text-mention--grey" }
|
||||
end
|
||||
|
||||
tag.send(html_tag, t('.next').html_safe + tag.span(class: 'fr-icon-arrow-right-line fr-ml-1w'), **options)
|
||||
end
|
||||
|
||||
def link_previous
|
||||
options = { class: "fr-link fr-icon-arrow-left-line fr-link--icon-left" }
|
||||
|
||||
if has_previous?
|
||||
tag.a(t('.previous'), **options.merge(href: previous_instructeur_dossier_path(dossier:, statut:)))
|
||||
html_tag = :a
|
||||
options = { class: "fr-link no-wrap", href: previous_instructeur_dossier_path(dossier:, statut:) }
|
||||
else
|
||||
options[:class] = "#{options[:class]} fr-text-mention--grey"
|
||||
tag.span(t('.previous'), **options)
|
||||
html_tag = :span
|
||||
options = { class: "fr-link no-wrap fr-text-mention--grey" }
|
||||
end
|
||||
|
||||
tag.send(html_tag, tag.span(class: 'fr-icon-arrow-left-line fr-mr-1w') + t('.previous'), **options)
|
||||
end
|
||||
|
||||
def has_next? = @has_next ||= @cache.next_dossier_id(from_id: dossier.id).present?
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
.flex.fr-mb-1w.align-center
|
||||
.flex.fr-mb-1w.align-start
|
||||
= render Instructeurs::BackButtonComponent.new(to: instructeur_procedure_path(dossier.procedure, **back_url_options))
|
||||
|
||||
%h1.fr-h3.fr-mb-0
|
||||
= t('show_dossier', scope: [:layouts, :breadcrumb], dossier_id: dossier.id, owner_name: dossier.owner_name)
|
||||
|
||||
.fr.ml-auto.align-center.flex
|
||||
.fr.ml-auto.align-center.flex.fr-mt-1v
|
||||
= link_previous
|
||||
= link_next
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.procedure-header
|
||||
.clipboard-container.flex
|
||||
.align-start.flex
|
||||
= render Instructeurs::BackButtonComponent.new(to: instructeur_procedures_path)
|
||||
%h1.fr-h3.fr-mb-0
|
||||
= "#{procedure_libelle procedure} (n°#{procedure.id})"
|
||||
|
|
Loading…
Reference in a new issue