improve AccompanyingCourse ux design

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

@@ -24,7 +24,6 @@ import Referrer from './components/Referrer.vue';
 import Resources from './components/Resources.vue';
 import Comment from './components/Comment.vue';
 import Confirm from './components/Confirm.vue';
-//import Test from './components/Test.vue';
 
 export default {
    name: 'App',
@@ -50,12 +49,13 @@ export default {
    }
    div.vue-component {
       h2 {
+         margin-left: 0.7em;
          position: relative;
          &:before {
             position: absolute;
-            content: "\f1dd";
+            content: "\f192";
             font-family: "ForkAwesome";
-            color: lightgrey;
+            color: #718596ab;
             left: -28px;
             top: 4px;
          }
@@ -64,12 +64,12 @@ export default {
             top: -2em;
          }
       }
-      padding: 1.5em 1em;
+      padding: 0.8em 0em;
       margin: 2em 0;
-      border: 1px solid lightgrey; 
+      border: 1px dotted #718596ab; 
       border-radius: 5px;
-      border-left: 1px dotted lightgrey;
+      border-left: 1px dotted #718596ab;
-      border-right: 1px dotted lightgrey;
+      border-right: 1px dotted #718596ab;
       /*
       position: relative; 
       &:before { 
@@ -85,5 +85,10 @@ export default {
       dd { 
          margin-left: 1em; 
       }
+      & > div {
+         margin: 1em 3em 0;
+      }
+      table {
+      }
    }
 </style>

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>
+         <dt>{{ $t('course.id') }}</dt>
-        <dd>{{ accompanyingCourse.id }}</dd>
+         <dd>{{ accompanyingCourse.id }}</dd>
-     </dl>
+      </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 
+   <div>
-      buttonTitle="persons_associated.add_persons"
+      <add-persons 
-      modalTitle="add_persons.title"
+         buttonTitle="persons_associated.add_persons"
-      v-bind:key="addPersons.key"
+         modalTitle="add_persons.title"
-      v-bind:options="addPersons.options"
+         v-bind:key="addPersons.key"
-      @addNewPersons="addNewPersons"
+         v-bind:options="addPersons.options"
-      ref="addPersons"> <!-- to cast child method -->
+         @addNewPersons="addNewPersons"
-   </add-persons>
+         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>
+   <div>
-   <table class="rounded">
+      <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 
+   <div>
-     buttonTitle="resources.add_resources"
+      <add-persons 
-     modalTitle="resources.add_resources"
+        buttonTitle="resources.add_resources"
-     v-bind:key="addPersons.key"
+        modalTitle="resources.add_resources"
-     v-bind:options="addPersons.options"
+        v-bind:key="addPersons.key"
-     @addNewPersons="addNewPersons"
+        v-bind:options="addPersons.options"
-     ref="addPersons"> <!-- to cast child method -->
+        @addNewPersons="addNewPersons"
-   </add-persons>
+        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>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js

@@ -28,7 +28,7 @@ const appMessages = {
       },
       persons_associated: {
          title: "Usagers concernés",
-         counter: "Pas d'usager | 1 usager | {count} usagers",
+         counter: "Il n'y a pas encore d'usager | 1 usager | {count} usagers",
          firstname: "Prénom",
          lastname: "Nom",
          startdate: "Date d'entrée",
@@ -61,7 +61,7 @@ const appMessages = {
       },
       resources: {
          title: "Interlocuteurs privilégiés",
-         counter: "Pas d'interlocuteur | 1 interlocuteur | {count} interlocuteurs",
+         counter: "Il n'y a pas encore d'interlocuteur | 1 interlocuteur | {count} interlocuteurs",
          text: "Dénomination",
          description: "Description",
          add_resources: "Ajouter des interlocuteurs",

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -1,7 +1,11 @@
 <template>
-   <button class="sc-button bt-create centered mt-4" @click="openModal">
+   <ul class="record_actions">
-      {{ $t(buttonTitle) }}
+      <li>
-   </button>
+         <button class="sc-button bt-create" @click="openModal">
+            {{ $t(buttonTitle) }}
+         </button>
+      </li>
+   </ul>
 
    <teleport to="body">
       <modal v-if="modal.showModal"