diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index ebc1ad87c..fa82639c5 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -623,40 +623,10 @@ textarea::placeholder { color: $dark-grey; } -@media (max-width: 62em) { - - .padded-fixed-footer { - padding-top: 120px; - } -} - -@media (min-width: 62em) { - - .padded-fixed-footer { - padding-top: 60px; - } -} - -[data-fr-theme="dark"] .fixed-footer { - border-top: 2px solid var(--background-action-low-blue-france-hover); - background-color: var(--background-action-low-blue-france); -} - .mandatory { fill: currentColor; } -.fixed-footer { - border-top: 2px solid $blue-france-500; - position: fixed; - bottom: 0; - left: 0; - right: 0; - padding-top: $default-padding; - background-color: $white; - z-index: 2; -} - .fr-menu__list { padding: $default-spacer; overflow-y: auto; diff --git a/app/assets/stylesheets/sticky.scss b/app/assets/stylesheets/sticky.scss new file mode 100644 index 000000000..c9920a4ff --- /dev/null +++ b/app/assets/stylesheets/sticky.scss @@ -0,0 +1,49 @@ +@import "constants"; + +.fixed-footer { + border-top: 2px solid var(--border-plain-blue-france); + position: fixed; + bottom: 0; + left: 0; + right: 0; + padding-top: $default-padding; + background-color: var(--background-default-grey); + z-index: 2; +} + +@media (max-width: 62em) { + .padded-fixed-footer { + padding-top: 120px; + } +} + +@media (min-width: 62em) { + .padded-fixed-footer { + padding-top: 60px; + } +} + +[data-fr-theme="dark"] .fixed-footer { + background-color: var(--background-action-low-blue-france); +} + +.sticky-header { + padding-top: $default-padding; + padding-bottom: $default-padding; + + &-container { + position: sticky; + top: 0; + left: 0; + right: 0; + z-index: 800; + } + + &-warning { + background-color: var(--background-contrast-warning); + } + + p { + margin: 0; + } +} diff --git a/app/views/administrateurs/attestation_template_v2s/_fixed_footer.html.haml b/app/views/administrateurs/attestation_template_v2s/_fixed_footer.html.haml index ec8f4d655..67d778563 100644 --- a/app/views/administrateurs/attestation_template_v2s/_fixed_footer.html.haml +++ b/app/views/administrateurs/attestation_template_v2s/_fixed_footer.html.haml @@ -11,8 +11,3 @@ %p.fr-hint-text Cette attestation est actuellement délivrée aux usagers. %span#autosave-notice - - - if procedure.feature_enabled?(:attestation_v2) && attestation_template.draft? - %button.fr-btn.fr-ml-2w{ name: field_name(:attestation_template, :state), value: "published", - data: { 'disable-with': "Publication en cours…", controller: 'autosave-submit' } } - Publier diff --git a/app/views/administrateurs/attestation_template_v2s/_sticky_header.html.haml b/app/views/administrateurs/attestation_template_v2s/_sticky_header.html.haml new file mode 100644 index 000000000..d5f2312d6 --- /dev/null +++ b/app/views/administrateurs/attestation_template_v2s/_sticky_header.html.haml @@ -0,0 +1,10 @@ +.sticky-header.sticky-header-warning + .fr-container + %p.flex.justify-between.align-center.fr-text-default--warning + %span + = dsfr_icon("fr-icon-warning-fill fr-mr-1v") + Les modifications effectuées ne seront appliquées qu’une fois que vous aurez publié cette version de l’attestation. + %span + %button.fr-btn.fr-ml-2w{ form: "attestation-template", name: field_name(:attestation_template, :state), value: "published", + data: { 'disable-with': "Publication en cours…", controller: 'autosave-submit' } } + Publier l’attestation diff --git a/app/views/administrateurs/attestation_template_v2s/edit.html.haml b/app/views/administrateurs/attestation_template_v2s/edit.html.haml index 8b0f3ecb1..0630f4cd4 100644 --- a/app/views/administrateurs/attestation_template_v2s/edit.html.haml +++ b/app/views/administrateurs/attestation_template_v2s/edit.html.haml @@ -4,7 +4,8 @@ ['Attestation']] } = render NestedForms::FormOwnerComponent.new -= form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure), html: { multipart: true }, += form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure), + html: { multipart: true , id: "attestation-template" }, data: { turbo: 'true', controller: 'autosubmit attestation', autosubmit_debounce_delay_value: 1000, @@ -118,6 +119,10 @@ L’aperçu est mis à jour automatiquement après chaque modification. Pour générer un aperçu fidèle avec tous les champs et les dates, créez-vous un dossier et acceptez-le : l’aperçu l’utilisera. + - if @procedure.feature_enabled?(:attestation_v2) && @attestation_template.draft? + - content_for(:sticky_header) do + = render partial: "sticky_header" + .padded-fixed-footer .fixed-footer#fixed_footer = render partial: "fixed_footer", locals: { procedure: @procedure, attestation_template: @attestation_template } diff --git a/app/views/administrateurs/attestation_template_v2s/update.turbo_stream.haml b/app/views/administrateurs/attestation_template_v2s/update.turbo_stream.haml index 69447ce28..0bf0da34a 100644 --- a/app/views/administrateurs/attestation_template_v2s/update.turbo_stream.haml +++ b/app/views/administrateurs/attestation_template_v2s/update.turbo_stream.haml @@ -1,5 +1,6 @@ - if @attestation_template.previously_new_record? || @attestation_template.state_changed? = turbo_stream.update "fixed_footer", render(partial: "fixed_footer", locals: { procedure: @procedure, attestation_template: @attestation_template }) + = turbo_stream.update "sticky-header", render(partial: "sticky_header") = turbo_stream.show 'autosave-notice' = turbo_stream.replace 'autosave-notice', render(partial: 'administrateurs/autosave_notice', locals: { success: !@attestation_template.changed? }) diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 36755078f..ceb84ff47 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -45,6 +45,9 @@ #beta Env Test + #sticky-header.sticky-header-container + = content_for(:sticky_header) + = render partial: "layouts/header" %main#contenu{ role: :main } = render partial: "layouts/flash_messages"