improve addPersons modal ux

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

@@ -4,46 +4,54 @@
    </button>
    
    <teleport to="body">
-      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" 
+      <modal v-if="modal.showModal" 
+         :modalDialogClass="modal.modalDialogClass" 
          @close="modal.showModal = false">      
+            
          <template v-slot:header>
-            
             <h3 class="modal-title">{{ $t('add_persons.title') }}</h3>
-
          </template>
+
          <template v-slot:body-fixed>
-
-            <label style="float: right;">
-               {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
-            </label>
-            
-            <input class="my-4" 
-               name="query" 
-               ref="search" 
-               v-model="query" 
-               :placeholder="$t('add_persons.search_some_persons')" />
+            <div class="search">
+               <label style="float: right;">
+                  {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
+               </label>
                
-            <div v-if="selectedCounter > 0">
-               {{ $tc('add_persons.selected_counter', selectedCounter) }}
+               <input id="search-persons"
+                  name="query" 
+                  v-model="query" 
+                  :placeholder="$t('add_persons.search_some_persons')" 
+                  ref="search" />
+               <i class="fa fa-search fa-lg"></i>
             </div>
-                  
          </template>
-         <template v-slot:body>
                
+         <template v-slot:body>
             <!--span class="discret">Selection: {{ selected }}</span-->
             <div class="results">
+               <div class="count">
+                  <span v-if="suggestedCounter > 0" style="">
+                        <a href="#">{{ $t('action.check_all')}}</a>
+                  </span>
+                  <span v-if="selectedCounter > 0" style="float:right;">
+                     {{ $tc('add_persons.selected_counter', selectedCounter) }}
+                  </span>
+               </div>
                <person-suggestion 
                   v-for="item in this.selectedAndSuggested"
                   v-bind:item="item" 
                   v-bind:key="item.id">
                </person-suggestion>
             </div>
-               
          </template>
+               
          <template v-slot:footer>
             <button class="sc-button green" @click="addPersons">
-               <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}</button>
+               <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
+            </button>
          </template>
+         
       </modal>
    </teleport>
 </template>

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

@@ -9,7 +9,7 @@
                <button class="close sc-button grey" @click="$emit('close')">
                   <i class="fa fa-times" aria-hidden="true"></i></button>
             </div>
-            <div class="modal-body" style="overflow-y: unset;">
+            <div class="modal-body up" style="overflow-y: unset;">
                <slot name="body-fixed"></slot>
             </div>
             <div class="modal-body">