diff --git a/app/assets/stylesheets/new_design/dossier_edit.scss b/app/assets/stylesheets/new_design/dossier_edit.scss index 05096311e..4e5c4ca75 100644 --- a/app/assets/stylesheets/new_design/dossier_edit.scss +++ b/app/assets/stylesheets/new_design/dossier_edit.scss @@ -1,6 +1,8 @@ @import "colors"; @import "constants"; +$dossier-actions-bar-border-width: 1px; + .dossier-header { .container { padding-bottom: $default-padding; @@ -46,29 +48,40 @@ border-radius: 4px; } - .send-dossier-actions-bar { - // scss-lint:disable VendorPrefix + .dossier-edit-sticky-footer { + // scss-lint:disable VendorPrefix DuplicateProperty + 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) - // scss-lint:enable VendorPrefix position: sticky; + // scss-lint:enable VendorPrefix DuplicateProperty + + // 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; - display: flex; - flex-direction: row; - align-items: center; margin-top: $default-padding; margin-left: -$default-padding; margin-right: -$default-padding; margin-bottom: 0; - padding-top: 0; - padding-bottom: $default-spacer; - padding-right: $default-padding; - padding-left: $default-padding; + + padding-right: $default-padding - $dossier-actions-bar-border-width; + padding-left: $default-padding - $dossier-actions-bar-border-width; + background: #FFFFFF; - border: 1px solid #CCCCCC; + + border: $dossier-actions-bar-border-width solid #CCCCCC; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: none; + } + + .send-dossier-actions-bar { + display: flex; + flex-direction: row; + align-items: center; .button:not(:small) { min-height: 38px; @@ -81,13 +94,13 @@ } // Normal layout - @media (min-width: 500px) { + @media (min-width: 620px) { padding-top: $default-spacer * 2; padding-bottom: $default-spacer * 2; } // Compact layout - @media (max-width: 500px) { + @media (max-width: 620px) { padding-top: $default-spacer; padding-bottom: $default-spacer; } diff --git a/app/views/shared/dossiers/_edit.html.haml b/app/views/shared/dossiers/_edit.html.haml index 6523e05cc..bda7f5c05 100644 --- a/app/views/shared/dossiers/_edit.html.haml +++ b/app/views/shared/dossiers/_edit.html.haml @@ -53,31 +53,32 @@ locals: { champ: champ, form: champ_form } - if !apercu - .send-dossier-actions-bar - - if dossier.brouillon? - - if autosave_available?(dossier) - = render partial: 'users/dossiers/autosave' + .dossier-edit-sticky-footer + .send-dossier-actions-bar + - if dossier.brouillon? + - if autosave_available?(dossier) + = render partial: 'users/dossiers/autosave' + - else + = f.button 'Enregistrer le brouillon', + formnovalidate: true, + class: 'button send secondary', + data: { 'disable-with': "Envoi en cours…" } + + - if dossier.can_transition_to_en_construction? + = f.button 'Déposer le dossier', + name: :submit_draft, + value: true, + class: 'button send primary', + disabled: !current_user.owns?(dossier), + data: { 'disable-with': "Envoi en cours…" } + - else - = f.button 'Enregistrer le brouillon', - formnovalidate: true, - class: 'button send secondary', - data: { 'disable-with': "Envoi en cours…" } - - - if dossier.can_transition_to_en_construction? - = f.button 'Déposer le dossier', - name: :submit_draft, - value: true, + = f.button 'Enregistrer les modifications du dossier', class: 'button send primary', - disabled: !current_user.owns?(dossier), data: { 'disable-with': "Envoi en cours…" } - - else - = f.button 'Enregistrer les modifications du dossier', - class: 'button send primary', - data: { 'disable-with': "Envoi en cours…" } + - if dossier.brouillon? && !current_user.owns?(dossier) + .send-notice.invite-cannot-submit + En tant qu’invité, vous pouvez remplir ce formulaire – mais le titulaire du dossier doit le déposer lui-même. - - if dossier.brouillon? && !current_user.owns?(dossier) - .send-notice.invite-cannot-submit - En tant qu’invité, vous pouvez remplir ce formulaire – mais le titulaire du dossier doit le déposer lui-même. - - = render partial: "shared/dossiers/submit_is_over", locals: { dossier: dossier } + = render partial: "shared/dossiers/submit_is_over", locals: { dossier: dossier }