rename classes and add tags in vue Address component

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

@@ -1,23 +1,22 @@
 <template>
-   <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>
-         <add-address
-            @addNewAddress="addNewAddress">
-         </add-address>
-      </div>
-      <div>
-         <show-address
-            v-if="address"
-            v-bind:address="address">
-         </show-address>
-      </div>
+   <div class="chill-entity entity-address">
+
+      <h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
+      <h2 v-else>{{ $t('edit_address') }}</h2>
+
+      <show-address
+         v-if="address"
+         v-bind:address="address">
+      </show-address>
+
+      <add-address
+         @addNewAddress="addNewAddress">
+      </add-address>
    </div>
-   
+
    <div v-if="!edit" class='person-address__valid'>
       <h2>{{ $t('date') }}</h2>
-      
+
       <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"
@@ -25,7 +24,7 @@
             v-model="validFrom"
             aria-describedby="validFrom" />
       </div>
-      
+
       <div v-if="errors.length > 0">
          {{ errors }}
       </div>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue

@@ -3,7 +3,7 @@
       {{ $t('add_an_address_title') }}
    </button>
    <button v-else class="btn btn-create mt-4" @click="openModal">
-      {{ $t('edit_an_address_title') }}
+      {{ $t('edit_address') }}
    </button>
 
    <teleport to="body">
@@ -18,19 +18,19 @@
 
          <template v-slot:body>
             <div class="address-form">
-   
+
                <h4 class="h3">{{ $t('select_an_address_title') }}
                   <span v-if="loading">
                      <i class="fa fa-circle-o-notch fa-spin fa-lg"></i>
                   </span>
                </h4>
-            
+
                <div class="row my-3">
-                  <div class="col-lg-6">                     
-                  
+                  <div class="col-lg-6">
+
                      <div class="form-check">
                         <input type="checkbox"
-                           class="form-check-input" 
+                           class="form-check-input"
                            id="isNoAddress"
                            v-model="isNoAddress"
                            v-bind:value="value" />
@@ -38,18 +38,18 @@
                            {{ $t('isNoAddress') }}
                         </label>
                      </div>
-                     
+
                      <country-selection
                         v-bind:address="address"
                         v-bind:getCities="getCities">
                      </country-selection>
-                     
+
                      <city-selection
                         v-bind:address="address"
                         v-bind:focusOnAddress="focusOnAddress"
                         v-bind:getReferenceAddresses="getReferenceAddresses">
                      </city-selection>
-                     
+
                      <address-selection
                         v-if="!isNoAddress"
                         v-bind:address="address"
@@ -58,15 +58,15 @@
 
                   </div>
                   <div class="col-lg-6 mt-3 mt-lg-0">
-                  
+
                      <address-map
                         v-bind:address="address"
                         ref="addressMap">
                      </address-map>
-                  
+
                   </div>
                </div>
-               
+
                <address-more
                   v-if="!isNoAddress"
                   v-bind:address="address">

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue

@@ -1,36 +1,54 @@
 <template>
-  <div class="chill_address_address chill_address_address--multiline">
-   <div v-if="address.text">
-      {{ address.text }}
+   <div class="address multiline">
+      <p v-if="address.text"
+         class="street">
+         {{ address.text }}
+      </p>
+      <p v-if="address.postcode"
+         class="postcode">
+         {{ address.postcode.name }}
+      </p>
+      <p v-if="address.country"
+         class="country">
+         {{ address.country.name.fr }}
+      </p>
+
+      <div v-if="address.floor">
+         <span class="floor">
+            <b>{{ $t('floor') }}</b>: {{ address.floor }}
+         </span>
+      </div>
+      <div v-if="address.corridor">
+         <span class="corridor">
+            <b>{{ $t('corridor') }}</b>: {{ address.corridor }}
+         </span>
+      </div>
+      <div v-if="address.steps">
+         <span class="steps">
+            <b>{{ $t('steps') }}</b>: {{ address.steps }}
+         </span>
+      </div>
+      <div v-if="address.flat">
+         <span class="flat">
+            <b>{{ $t('flat') }}</b>: {{ address.flat }}
+         </span>
+      </div>
+      <div v-if="address.buildingName">
+         <span class="buildingName">
+            <b>{{ $t('buildingName') }}</b>: {{ address.buildingName }}
+         </span>
+      </div>
+      <div v-if="address.extra">
+         <span class="extra">
+            <b>{{ $t('extra') }}</b>: {{ address.extra }}
+         </span>
+      </div>
+      <div v-if="address.distribution">
+         <span class="distribution">
+            <b>{{ $t('distribution') }}</b>: {{ address.distribution }}
+         </span>
+      </div>
    </div>
-   <div v-if="address.postcode">
-      {{ address.postcode.name }}
-   </div>
-   <div v-if="address.country">
-      {{ address.country.name.fr }}
-   </div>
-   <div v-if="address.floor">
-      <span>{{ $t('floor') }}</span>: {{ address.floor }}
-   </div>
-   <div v-if="address.corridor">
-      <span>{{ $t('corridor') }}</span>: {{ address.corridor }}
-   </div>
-   <div v-if="address.steps">
-      <span>{{ $t('steps') }}</span>: {{ address.steps }}
-   </div>
-   <div v-if="address.flat">
-      <span>{{ $t('flat') }}</span>: {{ address.flat }}
-   </div>
-   <div v-if="address.buildingName">
-      <span>{{ $t('buildingName') }}</span>: {{ address.buildingName }}
-   </div>
-   <div v-if="address.extra">
-      <span>{{ $t('extra') }}</span>: {{ address.extra }}
-   </div>
-   <div v-if="address.distribution">
-      <span>{{ $t('distribution') }}</span>: {{ address.distribution }}
-    </div>
-  </div>
 </template>
 
 <script>

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

@@ -3,7 +3,7 @@ const addressMessages = {
       add_an_address_title: 'Créer une adresse',
       edit_an_address_title: 'Modifier une adresse',
       create_a_new_address: 'Créer une nouvelle adresse',
-      edit_a_new_address: 'Modifier l\'adresse',
+      edit_address: 'Modifier l\'adresse',
       select_an_address_title: 'Sélectionner une adresse',
       fill_an_address: 'Compléter l\'adresse',
       select_country: 'Choisir le pays',