improve AccompanyingCourse ux design

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue

@@ -2,9 +2,16 @@
    
    <div class="vue-component" style="display: none;">
       <dl>
-        <dt>{{ $t('course.id') }}</dt>
-        <dd>{{ accompanyingCourse.id }}</dd>
-     </dl>
+         <dt>{{ $t('course.id') }}</dt>
+         <dd>{{ accompanyingCourse.id }}</dd>
+      </dl>
+      <dl v-if="accompanyingCourse.closingDate">
+         <dt>{{ $t('course.closing_date') }}</dt>
+         <dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
+
+         <dt>{{ $t('course.closing_motive') }}</dt>
+         <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
+      </dl>
    </div>
       
    <teleport to="#header-accompanying_course-name #banner-flags">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue

@@ -92,6 +92,6 @@ export default {
 
 <style lang="scss" scoped>
    div.vue-component > div {
-      margin: 1em;
+      //margin: 1em;
    }
 </style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue

@@ -13,24 +13,16 @@
          {{ $t('confirm.text_active') }}
          <span class="badge badge-primary">{{ $t('course.step.active') }}</span>
       </p>
+      
+      <ul class="record_actions">
+         <li>
+            <button class="sc-button bt-save" @click="modal.showModal = true">
+               {{ $t('confirm.ok') }}
+            </button>
+         </li>
+      </ul>
    </div>
 
-   <dl v-if="accompanyingCourse.closingDate">
-      <dt>{{ $t('course.closing_date') }}</dt>
-      <dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
-
-      <dt>{{ $t('course.closing_motive') }}</dt>
-      <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
-   </dl>
-
-   <ul class="record_actions">
-      <li>
-         <button class="sc-button bt-save" @click="modal.showModal = true">
-            {{ $t('confirm.ok') }}
-         </button>
-      </li>
-   </ul>
-
    <teleport to="body">
       <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
          <template v-slot:header>
@@ -83,6 +75,6 @@ export default {
 
 <style lang="scss" scoped>
 div.vue-component > div {
-    margin: 1em;
+    //margin: 1em;
 }
 </style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue

@@ -1,8 +1,12 @@
 <template>
 <div class="vue-component">
    <h2><a name="section-10"></a>{{ $t('persons_associated.title')}}</h2>
-   <label>{{ $tc('persons_associated.counter', counter) }}</label>
-   <table class="rounded">
+   
+   <div>
+      <label>{{ $tc('persons_associated.counter', counter) }}</label>
+   </div>
+   
+   <table class="rounded" v-if="participations.length > 0">
       <thead>
          <tr>
             <th class="chill-orange">{{ $t('persons_associated.firstname') }}</th>
@@ -23,14 +27,16 @@
       </tbody>
    </table>
 
-   <add-persons 
-      buttonTitle="persons_associated.add_persons"
-      modalTitle="add_persons.title"
-      v-bind:key="addPersons.key"
-      v-bind:options="addPersons.options"
-      @addNewPersons="addNewPersons"
-      ref="addPersons"> <!-- to cast child method -->
-   </add-persons>
+   <div>
+      <add-persons 
+         buttonTitle="persons_associated.add_persons"
+         modalTitle="add_persons.title"
+         v-bind:key="addPersons.key"
+         v-bind:options="addPersons.options"
+         @addNewPersons="addNewPersons"
+         ref="addPersons"> <!-- to cast child method -->
+      </add-persons>
+   </div>
 
 </div>
 </template>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue

@@ -43,22 +43,28 @@
          <dt>{{ $t('requestor.location') }}</dt>
          <dd>{{ accompanyingCourse.requestor.address.postcode.name }}</dd>
       </div>
+
+      <ul class="record_actions">
+         <li>
+            <button class="sc-button bt-remove"
+               :title="$t('action.remove')" 
+               @click="removeRequestor">
+               {{ $t('action.remove') }}
+            </button>
+         </li>
+      </ul>
+   </div>   
+   
+   <div>
+      <add-persons v-if="accompanyingCourse.requestor === null"
+         buttonTitle="requestor.add_requestor"
+         modalTitle="requestor.add_requestor"
+         v-bind:key="addPersons.key"
+         v-bind:options="addPersons.options"
+         @addNewPersons="addNewPersons"
+         ref="addPersons"> <!-- to cast child method -->
+      </add-persons>
    </div>
-   
-   <button v-if="accompanyingCourse.requestor !== null"
-      class="sc-button bt-remove"
-      :title="$t('action.remove')" 
-      @click="removeRequestor">
-   </button>
-   
-   <add-persons v-if="accompanyingCourse.requestor === null"
-      buttonTitle="requestor.add_requestor"
-      modalTitle="requestor.add_requestor"
-      v-bind:key="addPersons.key"
-      v-bind:options="addPersons.options"
-      @addNewPersons="addNewPersons"
-      ref="addPersons"> <!-- to cast child method -->
-   </add-persons>
 
 </div>
 </template>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue

@@ -3,8 +3,11 @@
   
    <h2><a name="section-50"></a>{{ $t('resources.title')}}</h2>
    
-   <label>{{ $tc('resources.counter', counter) }}</label>
-   <table class="rounded">
+   <div>
+      <label>{{ $tc('resources.counter', counter) }}</label>
+   </div>
+   
+   <table class="rounded" v-if="resources.length > 0">
       <thead>
          <tr>
             <th class="chill-orange">{{ $t('resources.text') }}</th>
@@ -22,14 +25,16 @@
       </tbody>
    </table>
    
-   <add-persons 
-     buttonTitle="resources.add_resources"
-     modalTitle="resources.add_resources"
-     v-bind:key="addPersons.key"
-     v-bind:options="addPersons.options"
-     @addNewPersons="addNewPersons"
-     ref="addPersons"> <!-- to cast child method -->
-   </add-persons>
+   <div>
+      <add-persons 
+        buttonTitle="resources.add_resources"
+        modalTitle="resources.add_resources"
+        v-bind:key="addPersons.key"
+        v-bind:options="addPersons.options"
+        @addNewPersons="addNewPersons"
+        ref="addPersons"> <!-- to cast child method -->
+      </add-persons>
+   </div>
 
 </div>
 </template>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue

@@ -2,7 +2,7 @@
   <div class="vue-component">
      <h2><a name="section-30"></a>{{ $t('social_issue.title') }}</h2>
      
-     <div>
+     <div class="my-4">
         <!--label for="selectIssues">{{ $t('social_issue.label') }}</label-->
         <VueMultiselect
             name="selectIssues"
@@ -55,6 +55,6 @@ export default {
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="scss" scoped>
    div.vue-component > div {
-      margin: 3em;
+      //margin: 3em;
    }
 </style>