chore(instructeurs): sections summary only on xl screens

app/components/viewable_champ/header_sections_summary_component.rb

@@ -1,16 +1,18 @@
 class ViewableChamp::HeaderSectionsSummaryComponent < ApplicationComponent
+  attr_reader :header_sections
+
   def initialize(dossier:, is_private:)
     @dossier = dossier
     @is_private = is_private
-  end
 
-  def header_sections
-    @dossier.revision
+    @header_sections = @dossier.revision
       .types_de_champ_for(scope: @is_private ? :private : :public)
       .filter(&:header_section?)
       .map { @dossier.project_champ(_1, nil) } # row_id not needed, do not link to repetiion header_sections
   end
 
+  def render? = header_sections.any?
+
   def href(header_section) # used by viewable champs to anchor elements
     "##{header_section.input_group_id}"
   end

app/components/viewable_champ/header_sections_summary_component/header_sections_summary_component.html.haml

@@ -1,11 +1,10 @@
-#summary{ class: header_sections.present? ? 'fr-col-12 fr-col-md-3' : '' }
-  - if header_sections.present?
-    %nav.fr-sidemenu.sticky.fr-hidden.fr-unhidden-md{ "aria-labelledby" => "fr-summary-title", role: "navigation" }
-      %ul.fr-sidemenu__list
-        - header_sections.each do |header_section|
-          %li.fr-sidemenu__item
-            - level = header_section.header_section_level_value.to_i
-            - if level == 1
-              %a.fr-sidemenu__link{ href: href(header_section) }= header_section.libelle
-            - else
-              %a.fr-sidemenu__link{ class: level >= 3 ? 'custom-link-grey': '', href: href(header_section) }= "-- #{header_section.libelle}"
+#summary.fr-col-12.fr-col-xl-3.fr-hidden.fr-unhidden-xl
+  %nav.fr-sidemenu.sticky{ "aria-labelledby" => "fr-summary-title", role: "navigation" }
+    %ul.fr-sidemenu__list
+      - header_sections.each do |header_section|
+        %li.fr-sidemenu__item
+          - level = header_section.header_section_level_value.to_i
+          - if level == 1
+            %a.fr-sidemenu__link{ href: href(header_section) }= header_section.libelle
+          - else
+            %a.fr-sidemenu__link{ class: level >= 3 ? 'custom-link-grey': '', href: href(header_section) }= "-- #{header_section.libelle}"

app/views/instructeurs/dossiers/annotations_privees.html.haml

@@ -5,6 +5,7 @@
 #dossier-annotations-privees
   .fr-container
     .fr-grid-row.fr-grid-row--center
-      = render ViewableChamp::HeaderSectionsSummaryComponent.new(dossier: @dossier, is_private: true)
-      .fr-col-md-9
+      - summary = ViewableChamp::HeaderSectionsSummaryComponent.new(dossier: @dossier, is_private: true)
+      = render summary
+      %div{ class: class_names("fr-col-12", "fr-col-xl-9" => summary.render?, "fr-col-xl-8" => !summary.render?) }
         = render partial: "shared/dossiers/edit_annotations", locals: { dossier: @dossier, seen_at: @annotations_privees_seen_at }

app/views/instructeurs/dossiers/show.html.haml

@@ -16,6 +16,7 @@
 
 .fr-container
   .fr-grid-row.fr-grid-row--center
-    = render ViewableChamp::HeaderSectionsSummaryComponent.new(dossier: @dossier, is_private: false)
-    .fr-col-md-9
+    - summary = ViewableChamp::HeaderSectionsSummaryComponent.new(dossier: @dossier, is_private: false)
+    = render summary
+    %div{ class: class_names("fr-col-12", "fr-col-xl-9" => summary.render?, "fr-col-xl-8" => !summary.render?) }
       = render partial: "shared/dossiers/demande", locals: { dossier: @dossier, demande_seen_at: @demande_seen_at, profile: 'instructeur' }