Fix buttons on screen bottom

app/assets/stylesheets/new_design/_colors.scss

@@ -2,6 +2,7 @@ $blue: #0069CC;
 $light-blue: #1C7EC9;
 $lighter-blue: #C3D9FF;
 $black: #333333;
+$white: #FFFFFF;
 $grey: #999999;
 $light-grey: #F8F8F8;
 $border-grey: #CCCCCC;

app/assets/stylesheets/new_design/procedure_champs_editor.scss

@@ -1,4 +1,5 @@
 @import "colors";
+@import "constants";
 
 #champs-editor {
   .spinner {
@@ -111,10 +112,21 @@
   }
 }
 
-.header,
 .footer {
+  margin-bottom: 70px;
+}
+
+.buttons {
   display: flex;
   justify-content: space-between;
-  margin-top: 30px;
-  margin-bottom: 30px;
+  margin: 0px;
+  position: fixed;
+  bottom: 0px;
+  background-color: $white;
+  max-width: $page-width;
+  width: 100%;
+  border: 1px solid $border-grey;
+  padding: 10px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 }

app/javascript/new_design/administrateur/DraggableList.vue

@@ -1,18 +1,5 @@
 <template>
   <div class="champs-editor">
-    <div v-if="state.typesDeChamp.length > 3" class="header">
-      <button class="button" v-scroll-to="'.footer'" @click.prevent="addChamp">
-        <template v-if="state.isAnnotation">
-          Ajouter une annotation
-        </template>
-        <template v-else>
-          Ajouter un champ
-        </template>
-      </button>
-
-      <button class="button primary" @click.prevent="save">Enregistrer</button>
-    </div>
-
     <Draggable :list="state.typesDeChamp" :options="{handle:'.handle'}">
       <DraggableItem
         v-for="(item, index) in state.typesDeChamp"
@@ -22,7 +9,8 @@
         :key="item.id" />
     </Draggable>
 
-    <div class="footer">
+    <div class="footer"></div>
+    <div class="buttons">
       <button class="button" v-scroll-to="'.footer'" @click.prevent="addChamp">
         <template v-if="state.isAnnotation">
           Ajouter une annotation

spec/features/admin/procedure_creation_spec.rb

@@ -105,7 +105,7 @@ feature 'As an administrateur I wanna create a new procedure', js: true do
         blur
         expect(page).to have_content('Formulaire enregistré')
 
-        within '.footer' do
+        within '.buttons' do
           click_on 'Ajouter un champ'
         end
         expect(page).to have_selector('#procedure_types_de_champ_attributes_1_libelle')

spec/features/new_administrateur/types_de_champ_spec.rb

@@ -13,7 +13,7 @@ feature 'As an administrateur I can edit types de champ', js: true do
   it "Add a new champ" do
     click_on 'Supprimer'
 
-    within '.footer' do
+    within '.buttons' do
       click_on 'Ajouter un champ'
     end
     expect(page).to have_selector('#procedure_types_de_champ_attributes_0_libelle')
@@ -22,7 +22,7 @@ feature 'As an administrateur I can edit types de champ', js: true do
     expect(page).to have_content('Formulaire enregistré')
 
     page.refresh
-    within '.footer' do
+    within '.buttons' do
       click_on 'Enregistrer'
     end
 
@@ -30,7 +30,7 @@ feature 'As an administrateur I can edit types de champ', js: true do
   end
 
   it "Add multiple champs" do
-    within '.footer' do
+    within '.buttons' do
       click_on 'Ajouter un champ'
       click_on 'Ajouter un champ'
       click_on 'Ajouter un champ'
@@ -107,7 +107,7 @@ feature 'As an administrateur I can edit types de champ', js: true do
     expect(page).to have_content('Formulaire enregistré')
     expect(page).to have_content('Supprimer', count: 2)
 
-    within '.footer' do
+    within '.buttons' do
       click_on 'Ajouter un champ'
     end