From 14cbb1dd28e863acc2bb7f470cb7af4d7c94b6c9 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 20 Aug 2021 23:04:51 +0200
Subject: [PATCH] AccompanyingCourse: improve design of CourseLocation block

---
 .../public/chill/scss/person_with_period.scss |  2 +-
 .../components/CourseLocation.vue             | 36 +++++++++++++------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss
index 55aacca88..2443c4295 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss
@@ -8,7 +8,7 @@ div.list-with-period {
          flex-wrap: nowrap;
          div.wl-col {
             &.title {
-               width: 36%;
+               width: 34%;
                @include media-breakpoint-up(md) {
                   margin-left: 0;
                }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
index 3c4d79521..83390f20f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
@@ -15,19 +15,22 @@
          </label>
       </div>
 
-      <div v-if="isPersonLocation">
-         <label class="col-form-label">
-            {{ $t('courselocation.person_locator', [ accompanyingCourse.personLocation.text ]) }}
-         </label>
-      </div>
+      <div class="flex-table" v-if="accompanyingCourse.location">
+         <div class="item-bloc">
+            <show-address
+               :address="accompanyingCourse.location">
+            </show-address>
 
-      <show-address
-         v-if="accompanyingCourse.location"
-         :address="accompanyingCourse.location">
-      </show-address>
+            <div v-if="isPersonLocation" class="alert alert-secondary separator">
+               <label class="col-form-label">
+                  {{ $t('courselocation.person_locator', [ accompanyingCourse.personLocation.text ]) }}
+               </label>
+            </div>
 
-      <div v-if="isTemporaryAddress" class="alert alert-warning">
-         <p>{{ $t('courselocation.temporary_address_must_be_changed') }}</p>
+            <div v-if="isTemporaryAddress" class="alert alert-warning separator">
+               <p>{{ $t('courselocation.temporary_address_must_be_changed') }}</p>
+            </div>
+         </div>
       </div>
 
       <div>
@@ -156,3 +159,14 @@ export default {
    }
 }
 </script>
+<style lang="scss" scoped>
+
+div.flex-table {
+   div.item-bloc {
+      div.alert {
+         margin: 0 -0.9em -1em;
+      }
+   }
+}
+
+</style>