adapt AddAddress modal to bootstrap: position, responsive, form

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue

@@ -1,6 +1,5 @@
 <template>
-
-   <div class='person__address__create'>
+   <div class='person-address__create'>
       <div>
          <h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
          <h2 v-else>{{ $t('edit_a_new_address') }}</h2>
@@ -8,7 +7,6 @@
             @addNewAddress="addNewAddress">
          </add-address>
       </div>
-
       <div>
          <show-address
             v-if="address"
@@ -16,13 +14,18 @@
          </show-address>
       </div>
    </div>
-   <div v-if="!edit" class='person__address__valid'>
+   
+   <div v-if="!edit" class='person-address__valid'>
       <h2>{{ $t('date') }}</h2>
-      <input
-         type="date"
-         name="validFrom"
-         :placeholder="$t('validFrom')"
-         v-model="validFrom"/>
+      
+      <div class="input-group mb-3">
+         <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
+         <input type="date" class="form-control form-control-lg" name="validFrom"
+            v-bind:placeholder="$t('validFrom')"
+            v-model="validFrom"
+            aria-describedby="validFrom" />
+      </div>
+      
       <div v-if="errors.length > 0">
          {{ errors }}
       </div>
@@ -34,19 +37,16 @@
       </div>
    </div>
 
-   <div>
-      <ul class="record_actions sticky-form-buttons">
-         <li class="btn btn-cancel">
-            <a :href=backUrl class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
-         </li>
-         <li v-if="!edit">
-            <button type="submit" class="btn btn-update centered" @click="addToPerson">
-               {{ $t('add_an_address_to_person') }}
-            </button>
-         </li>
-      </ul>
-   </div>
-
+   <ul class="record_actions sticky-form-buttons">
+      <li class="cancel">
+         <a :href="backUrl" class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
+      </li>
+      <li v-if="!edit">
+         <button type="submit" class="btn btn-update" @click="addToPerson">
+            {{ $t('add_an_address_to_person') }}
+         </button>
+      </li>
+   </ul>
 </template>
 
 <script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js

@@ -7,8 +7,13 @@ const addressMessages = {
       select_an_address_title: 'Sélectionner une adresse',
       fill_an_address: 'Compléter l\'adresse',
       select_country: 'Choisir le pays',
+      country: 'Pays',
       select_city: 'Choisir une localité',
+      city: 'Localité',
+      other_city: 'Autre localité',
       select_address: 'Choisir une adresse',
+      address: 'Adresse',
+      other_address: 'Autre adresse',
       create_address: 'Adresse inconnue. Cliquez ici pour créer une nouvelle adresse',
       isNoAddress: 'Pas d\'adresse complète',
       street: 'Nom de rue',
@@ -17,12 +22,12 @@ const addressMessages = {
       corridor: 'Couloir',
       steps: 'Escalier',
       flat: 'Appartement',
-      buildingName: 'Nom du batiment',
+      buildingName: 'Nom du bâtiment',
       extra: 'Complément d\'adresse',
       distribution: 'Service particulier de distribution',
       create_postal_code: 'Localité inconnue. Cliquez ici pour créer une nouvelle localité',
-      postalCode_name: 'Nom de la localité',
-      postalCode_code: 'Code postal de la localité',
+      postalCode_name: 'Nom',
+      postalCode_code: 'Code postal',
       date: 'Date de la nouvelle adresse',
       add_an_address_to_person: 'Ajouter l\'adresse à la personne',
       validFrom: 'Date de la nouvelle adresse',