diff --git a/app/assets/stylesheets/autosave.scss b/app/assets/stylesheets/autosave.scss index 386bedae612..11529620a8f 100644 --- a/app/assets/stylesheets/autosave.scss +++ b/app/assets/stylesheets/autosave.scss @@ -15,10 +15,6 @@ margin-right: 6px; } -.autosave-more-infos { - white-space: nowrap; -} - .autosave-status { // Position the status over the explanation text position: absolute; diff --git a/app/assets/stylesheets/dossier_edit.scss b/app/assets/stylesheets/dossier_edit.scss index 1d4459af897..fee28ca83e3 100644 --- a/app/assets/stylesheets/dossier_edit.scss +++ b/app/assets/stylesheets/dossier_edit.scss @@ -1,8 +1,6 @@ @import 'colors'; @import 'constants'; -$dossier-actions-bar-border-width: 1px; - [data-fr-theme='dark'] .dossier-edit .dossier-edit-sticky-footer { background-color: var(--background-action-low-blue-france); border: none; @@ -25,86 +23,41 @@ $dossier-actions-bar-border-width: 1px; } .dossier-edit { - .prologue { - margin: (1.5 * $default-padding) 0; - display: flex; - flex-wrap: wrap; - align-items: baseline; - - .mandatory-explanation { - flex-grow: 1; // Push the "notice" button to the right - flex-shrink: 1; // Allow the text to shrink - margin-bottom: $default-spacer; // Leave space when the "notice" button wraps under the text - } - - .button.notice { - flex-shrink: 0; // Display the button label on a single line - margin-top: 1rem; - } - } - - .warning { - margin-bottom: 20px; - background-color: #f9b91666; - padding: 20px; - border-radius: 4px; - } - .dossier-edit-sticky-footer { - position: fixed; // Fallback for IE 11, and other browser that don't support sticky position: -webkit-sticky; // This is needed on Safari (tested on 12.1) position: sticky; - // IE 11 uses `position:fixed` – and thus needs an explicit width, content-box for better layout, etc. - width: 100%; - max-width: $page-width + 2 * $default-padding; - box-sizing: content-box; - bottom: 0; - margin-top: $default-padding; - margin-left: -$default-padding; - margin-right: -$default-padding; - margin-bottom: 0; - - padding-right: $default-padding - $dossier-actions-bar-border-width; - padding-left: $default-padding - $dossier-actions-bar-border-width; + padding: 0.5rem 1rem; - background: #ffffff; + background: var(--background-default-grey); - border: $dossier-actions-bar-border-width solid #cccccc; + border: 1px solid var(--border-contrast-grey); + border-bottom: none; border-top-left-radius: 5px; border-top-right-radius: 5px; - border-bottom: none; z-index: 10; // above DSFR btn which are at 1 + + @media (min-width: 48em) { + padding-top: 1rem; + padding-bottom: 1rem; + } } .send-dossier-actions-bar { display: flex; - flex-direction: row; align-items: center; + flex-direction: column; + gap: 1rem; - .button:not(:small) { - min-height: 38px; - line-height: 16px; - } - - // If there are more than one button, align the "Send" button to the right - .button:not(:first-child).send { - margin-left: auto; - } - - // Normal layout - @media (min-width: 620px) { - padding-top: $default-spacer * 2; - padding-bottom: $default-spacer * 2; + a { + white-space: nowrap; } - // Compact layout - @media (max-width: 620px) { - padding-top: $default-spacer; - padding-bottom: $default-spacer; + @media (min-width: 48em) { + flex-direction: row; } } diff --git a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml index 28039d90c53..ee48130a5bb 100644 --- a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml +++ b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml @@ -8,7 +8,7 @@ - else = t('.brouillon.explanation') - if !annotation? - = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'autosave-more-infos fr-link fr-link--sm', **external_link_attributes + = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm', **external_link_attributes %p.autosave-status.succeeded.fr-mb-0 = dsfr_icon('fr-icon-checkbox-circle-fill fr-text-default--success autosave-icon') @@ -20,7 +20,7 @@ - else = t('.brouillon.confirmation') - if !annotation? - = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'autosave-more-infos fr-link fr-link--sm', **external_link_attributes + = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm', **external_link_attributes %p.autosave-status.failed.fr-mb-0 %span.autosave-icon ⚠️ diff --git a/app/components/dossiers/edit_footer_component.rb b/app/components/dossiers/edit_footer_component.rb index f68ec2ef776..13f204d8dae 100644 --- a/app/components/dossiers/edit_footer_component.rb +++ b/app/components/dossiers/edit_footer_component.rb @@ -64,7 +64,7 @@ def disabled_submit_button_options def submit_draft_button_options { - class: 'fr-btn fr-btn--sm', + class: 'fr-btn', disabled: !owner? || !can_passer_en_construction?, method: :post, data: { 'disable-with': t('.submitting'), controller: 'autosave-submit', turbo_force: :server } @@ -73,7 +73,7 @@ def submit_draft_button_options def submit_en_construction_button_options { - class: 'fr-btn fr-btn--sm', + class: 'fr-btn', disabled: !can_passer_en_construction?, method: :post, data: { 'disable-with': t('.submitting'), controller: 'autosave-submit', turbo_force: :server }, diff --git a/app/views/users/dossiers/modifier.html.haml b/app/views/users/dossiers/modifier.html.haml index 6a2b986750e..24202be3673 100644 --- a/app/views/users/dossiers/modifier.html.haml +++ b/app/views/users/dossiers/modifier.html.haml @@ -3,8 +3,7 @@ - content_for :footer do = render partial: "users/procedure_footer", locals: { procedure: @dossier.procedure, dossier: @dossier } -.dossier-container.mb-4 +.dossier-container = render partial: 'users/dossiers/show/header', locals: { dossier: @dossier } - .container - = render partial: "shared/dossiers/edit", locals: { dossier: @dossier, dossier_for_editing: @dossier_for_editing } + = render partial: "shared/dossiers/edit", locals: { dossier: @dossier, dossier_for_editing: @dossier_for_editing }