diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index e4f412ce7..2b26b4ff8 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -361,6 +361,57 @@ } } + .send-dossier-wrapper { + display: flex; + width: 100%; + margin-top: $default-padding; + background: #FFFFFF; + position: fixed; + bottom: 0px; + border: 1px solid #CCCCCC; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + border-bottom: none; + padding: 30px; + padding-bottom: 5px; + padding-top: 5px; + left: 0px; + margin: 0 auto; + + .button { + margin-top: $default-padding; + margin-bottom: 0; + } + + // Wide layout: align buttons on a single row + @media (min-width: 550px) { + flex-direction: row; + + .button:not(:first-of-type) { + margin-left: $default-spacer; + } + + // If there are more than one button, align the "Send" button to the right + .button:not(:first-of-type).send { + margin-left: auto; + } + } + + // Narrow layout: stack buttons vertically + @media (max-width: 550px) { + flex-direction: column-reverse; + align-items: center; + + .button { + width: 100%; + max-width: 350px; + line-height: 30px; + margin-left: none; + margin-right: none; + } + } + } + .send-notice { @include notice-text-style; margin-bottom: $default-padding; diff --git a/app/views/shared/dossiers/_edit.html.haml b/app/views/shared/dossiers/_edit.html.haml index 01cfa4f2a..cfe6c2217 100644 --- a/app/views/shared/dossiers/_edit.html.haml +++ b/app/views/shared/dossiers/_edit.html.haml @@ -32,7 +32,7 @@ locals: { champ: champ, form: champ_form } - if !apercu - .send-wrapper + .send-dossier-wrapper - if dossier.brouillon? = f.button 'Enregistrer le brouillon', formnovalidate: true, diff --git a/spec/views/users/dossiers/brouillon.html.haml_spec.rb b/spec/views/users/dossiers/brouillon.html.haml_spec.rb index 2d95b631a..505ae734d 100644 --- a/spec/views/users/dossiers/brouillon.html.haml_spec.rb +++ b/spec/views/users/dossiers/brouillon.html.haml_spec.rb @@ -21,7 +21,7 @@ describe 'users/dossiers/brouillon.html.haml', type: :view do end it 'affiche les boutons de validation' do - expect(rendered).to have_selector('.send-wrapper') + expect(rendered).to have_selector('.send-dossier-wrapper') end it 'prépare le footer' do