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