295 resume retouches

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue

@@ -1,35 +1,33 @@
 <template>
-   <teleport to="#add-persons" v-if="isComponentVisible">
+    <teleport to="#add-persons" v-if="isComponentVisible">
 
-      <div class="flex-bloc concerned-groups" :class="getContext">
-         <persons-bloc
-            v-for="bloc in contextPersonsBlocs"
-            v-bind:key="bloc.key"
-            v-bind:bloc="bloc"
-            v-bind:setPersonsInBloc="setPersonsInBloc">
-         </persons-bloc>
-      </div>
-     <div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0">
-         <ul class="list-unstyled">
-          <li v-for="p in suggestedEntities" @click="addSuggestedEntity(p)">
-             <span class="badge bg-primary" style="cursor: pointer;">
-                 <i class="fa fa-plus fa-fw text-success"></i>
-                 {{ p.text }}
-             </span>
-          </li>
-        </ul>
-     </div>
+        <div class="flex-bloc concerned-groups" :class="getContext">
+            <persons-bloc
+                v-for="bloc in contextPersonsBlocs"
+                v-bind:key="bloc.key"
+                v-bind:bloc="bloc"
+                v-bind:blocWidth="getBlocWidth"
+                v-bind:setPersonsInBloc="setPersonsInBloc">
+            </persons-bloc>
+        </div>
+        <div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0">
+            <ul class="list-suggest add-items">
+                <li v-for="p in suggestedEntities" @click="addSuggestedEntity(p)">
+                    <span>{{ p.text }}</span>
+                </li>
+            </ul>
+        </div>
 
-      <add-persons
-         buttonTitle="activity.add_persons"
-         modalTitle="activity.add_persons"
-         v-bind:key="addPersons.key"
-         v-bind:options="addPersonsOptions"
-         @addNewPersons="addNewPersons"
-         ref="addPersons">
-      </add-persons>
+        <add-persons
+            buttonTitle="activity.add_persons"
+            modalTitle="activity.add_persons"
+            v-bind:key="addPersons.key"
+            v-bind:options="addPersonsOptions"
+            @addNewPersons="addNewPersons"
+            ref="addPersons">
+        </add-persons>
 
-  </teleport>
+    </teleport>
 </template>
 
 <script>
@@ -122,6 +120,9 @@ export default {
             }
          }
       },
+       getBlocWidth() {
+           return Math.round(100/(this.contextPersonsBlocs.length)) + '%';
+       }
    },
    mounted() {
       this.setPersonsInBloc();

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue

@@ -1,12 +1,8 @@
 <template>
    <li>
-      <span class="badge bg-primary" :title="person.text">
-         <span class="chill_denomination">
-            {{ textCutted }}
-         </span>
-         <a class="fa fa-fw fa-times text-danger text-decoration-none"
-            @click.prevent="$emit('remove', person)">
-         </a>
+      <span :title="person.text">
+         <span class="chill_denomination">{{ textCutted }}</span>
+         <a @click.prevent="$emit('remove', person)"></a>
       </span>
    </li>
 </template>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue

@@ -1,11 +1,11 @@
 <template>
-   <div class="item-bloc">
+   <div class="item-bloc" :style="{ 'flex-basis': blocWidth }">
       <div class="item-row">
          <div class="item-col">
             <h4>{{ $t(bloc.title) }}</h4>
          </div>
          <div class="item-col">
-            <ul class="list-content">
+            <ul class="list-suggest remove-items">
                <person-badge
                   v-for="person in bloc.persons"
                   v-bind:key="person.id"
@@ -25,7 +25,7 @@ export default {
    components: {
       PersonBadge
    },
-   props: ['bloc', 'setPersonsInBloc'],
+   props: ['bloc', 'setPersonsInBloc', 'blocWidth'],
    methods: {
       removePerson(item) {
          console.log('@@ CLICK remove person: item', item);