From d2a78abc3a9ae1236846ec876e5894e1c63bcc42 Mon Sep 17 00:00:00 2001
From: pedong <mail@peng-fei.name>
Date: Wed, 14 Aug 2019 18:54:45 +0200
Subject: [PATCH] [fix #3975] set buttons floating in dossier page

---
 app/assets/stylesheets/new_design/forms.scss  | 51 +++++++++++++++++++
 app/views/shared/dossiers/_edit.html.haml     |  2 +-
 .../dossiers/brouillon.html.haml_spec.rb      |  2 +-
 3 files changed, 53 insertions(+), 2 deletions(-)

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