diff --git a/app/components/viewable_champ/section_component.rb b/app/components/viewable_champ/section_component.rb index 481410c78..6debfb874 100644 --- a/app/components/viewable_champ/section_component.rb +++ b/app/components/viewable_champ/section_component.rb @@ -33,11 +33,15 @@ class ViewableChamp::SectionComponent < ApplicationComponent rest_of_champ end - def tag_for_depth - "h#{header_section.level + 1}" if header_section + def reset_tag_for_depth + return if !header_section + + "reset-h#{header_section.level + 1}" end def first_level? + return if header_section.nil? + header_section.level == 1 end diff --git a/app/components/viewable_champ/section_component/section_component.html.haml b/app/components/viewable_champ/section_component/section_component.html.haml index a8f53a21e..e5453c8a1 100644 --- a/app/components/viewable_champ/section_component/section_component.html.haml +++ b/app/components/viewable_champ/section_component/section_component.html.haml @@ -1,8 +1,8 @@ -= tag.div(class: "reset-#{tag_for_depth} fr-mt-4v", 'data-controller': 'expand') do += tag.div(class: class_names(reset_tag_for_depth => true, "fr-my-2w" => !first_level?), 'data-controller': 'expand') do - if header_section - %div{ class: class_names(flex: true, "top-bordered" => header_section.level == 1) } - = render EditableChamp::HeaderSectionComponent.new(champ: header_section, html_class: {' fr-m-0 fr-text--md fr-px-4v flex-grow' => true, "fr-text-action-high--blue-france" => header_section.level == 1, 'fr-py-3v' => header_section.level == 1, 'fr-pt-3v' => header_section.level == 1}) - - if ![champs, sections].map(&:empty?).all? && header_section.level == 1 + %div{ class: class_names(flex: true, "top-bordered" => first_level?) } + = render EditableChamp::HeaderSectionComponent.new(champ: header_section, html_class: {' fr-m-0 fr-text--md fr-px-4v flex-grow' => true, "fr-text-action-high--blue-france" => header_section.level == 1, 'fr-py-2w' => first_level?, 'fr-py-1v' => !first_level?}) + - if ![champs, sections].map(&:empty?).all? && first_level? %button{ type: "button", aria: { controls: section_id, "expanded": "true", label: t('.toggle_section', section: header_section.libelle) }, href: section_id, 'data-action': 'click->expand#toggle', class: "fr-btn fr-btn--tertiary-no-outline" } %i.fr-icon-arrow-up-s-line{ 'aria-hidden': 'true', 'data-expand-target': 'icon' }