Merge pull request #4208 from pengfeidong/fix_3975_buttons_floating

[fix #3975] set buttons floating in dossier page

app/assets/stylesheets/new_design/dossier_edit.scss

@@ -45,4 +45,51 @@
     padding: 20px;
     border-radius: 4px;
   }
+
+  .send-dossier-actions-bar {
+    // scss-lint:disable VendorPrefix
+    position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
+    // scss-lint:enable VendorPrefix
+    position: sticky;
+    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;
+    background: #FFFFFF;
+    border: 1px solid #CCCCCC;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    border-bottom: none;
+
+    .button {
+      min-height: 38px;
+      line-height: 16px;
+    }
+
+    // If there are more than one button, align the "Send" button to the right
+    .button:not(:first-of-type).send {
+      margin-left: auto;
+    }
+
+    // Normal layout
+    @media (min-width: 500px) {
+      padding-top: $default-spacer * 2;
+      padding-bottom: $default-spacer * 2;
+    }
+
+    // Compact layout
+    @media (max-width: 500px) {
+      padding-top: $default-spacer;
+      padding-bottom: $default-spacer;
+    }
+  }
 }

app/assets/stylesheets/new_design/new_footer.scss

@@ -108,10 +108,6 @@ footer {
 .footer-row {
   margin-bottom: 30px;
 
-  &:last-child {
-    margin-bottom: 0;
-  }
-
   // In this case, the bottom margin is defined directly on each individual column
   &.footer-columns {
     margin-bottom: 0;

app/views/shared/dossiers/_edit.html.haml

@@ -32,7 +32,7 @@
         locals: { champ: champ, form: champ_form }
 
     - if !apercu
-      .send-wrapper
+      .send-dossier-actions-bar
         - if dossier.brouillon?
           = f.button 'Enregistrer le brouillon',
             formnovalidate: true,

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-actions-bar')
   end
 
   it 'prépare le footer' do