vue Address: fix ShowAddress multiline option

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

@@ -1,41 +1,22 @@
 <template>
-<div class="chill-entity entity-address my-3"></div>
-   
-   <component :is="component" :class="'address'+ isMultiline">
-      <p v-if="address.text"
-         class="street">
-         {{ address.text }},
-      </p>
-      <p v-if="address.postcode"
-         class="postcode">
-         {{ address.postcode.code }} {{ address.postcode.name }}
-      </p>
-      <p v-if="address.country"
-         class="country">
-         {{ address.country.name.fr }}
-      </p>
+   <component :is="component" class="chill-entity entity-address my-3">
 
-      <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>
+      <component :is="component" class="address" :class="multiline">
+         <p v-if="address.text"
+            class="street">
+            {{ address.text }},
+         </p>
+         <p v-if="address.postcode"
+            class="postcode">
+            {{ address.postcode.code }} {{ address.postcode.name }}
+         </p>
+         <p v-if="address.country"
+            class="country">
+            {{ address.country.name.fr }}
+         </p>
+      </component>
+
+      <div v-if="isMultiline">
          <div v-if="address.floor">
             <span class="floor">
                <b>{{ $t('floor') }}</b>: {{ address.floor }}
@@ -56,24 +37,46 @@
                <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 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>
-   </component>
 
+   </component>
 </template>
 
 <script>
@@ -83,25 +86,25 @@ export default {
       address: {
          type: Object
       },
-      multiline: {
+      isMultiline: {
          default: true,
          type: Boolean
       }
    },
    computed: {
       component(){
-         return this.multiline == true ? "div" : "span";
+         return this.isMultiline == true ? "div" : "span";
       },
-      isMultiline(){
-         return this.multiline == true ? " multiline" : "";
+      multiline(){
+         return this.isMultiline == true ? "multiline" : "";
       }
    }
 };
 </script>
 
 <style lang="scss" scoped>
-p{
-   &:after{
+p {
+   &:after {
       content: " ";
       margin-right: 0.3em;
    }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

@@ -64,9 +64,9 @@
         <div class="item-col">
             <ul class="list-content fa-ul">
                 <!-- ADDRESS -->
-                <li v-if="person.current_household_address" class="chill-entity entity-address">
+                <li v-if="person.current_household_address">
                     <i class="fa fa-li fa-map-marker"></i>
-                    <show-address :address="person.current_household_address" :multiline="false"></show-address>
+                    <show-address :address="person.current_household_address" :isMultiline="false"></show-address>
                 </li>
                 <!-- PHONENUMBER -->
                 <!-- todo: change href for phonenumbers and format phone number? -->

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue

@@ -49,9 +49,9 @@
         <div class="item-col">
             <ul class="list-content fa-ul">
                 <!-- ADDRESS -->
-                <li v-if="thirdparty.resource.address" class="chill-entity entity-address">
+                <li v-if="thirdparty.resource.address">
                     <i class="fa fa-li fa-map-marker"></i>
-                    <show-address :address="thirdparty.resource.address" :multiline="false"></show-address>
+                    <show-address :address="thirdparty.resource.address" :isMultiline="false"></show-address>
                 </li>
                 <!-- PHONENUMBER -->
                 <!-- todo: change href for phonenumbers -->