address selection: fix leaflet icon anchor + css for the form

src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

@@ -14,7 +14,7 @@ div#header-accompanying_course-name {
   background: none repeat scroll 0 0 #718596;
   color: #FFF;
   h1 {
-    margin: 0.4em 0;       
+    margin: 0.4em 0;
   }
   span {
     a {
@@ -49,15 +49,167 @@ div.subheader {
    }
 }
 
-//// à ranger
+//// VUEJS ////
+div.vue-component {
+  padding: 1.5em;
+  margin: 2em 0;
+  border: 2px dashed grey;
+  position: relative;
+  &:before {
+    content: "vuejs component";
+    position: absolute;
+    left: 1.5em;
+    top: -0.9em;
+    background-color: white;
+    color: grey;
+    padding: 0 0.3em;
+  }
+  dd { margin-left: 1em; }
+}
+
+//// MODAL ////
+.modal-mask {
+   position: fixed;
+   z-index: 9998;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background-color: rgba(0, 0, 0, 0.75);
+   display: table;
+   transition: opacity 0.3s ease;
+}
+.modal-header .close { // bootstrap classes, override sc-button 0 radius
+   border-top-right-radius: 0.3rem;
+}
+
+/*
+* The following styles are auto-applied to elements with
+* transition="modal" when their visibility is toggled
+* by Vue.js.
+*
+* You can easily play with the modal transition by editing
+* these styles.
+*/
+.modal-enter {
+   opacity: 0;
+}
+.modal-leave-active {
+   opacity: 0;
+}
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+   -webkit-transform: scale(1.1);
+   transform: scale(1.1);
+}
+
+//// AddPersons modal
+div.body-head {
+   overflow-y: unset;
+   div.modal-body:first-child {
+      margin: auto 4em;
+      div.search {
+         position: relative;
+         input {
+            padding: 1.2em 1.5em 1.2em 2.5em;
+            margin: 1em 0;
+         }
+         i {
+            position: absolute;
+            opacity: 0.5;
+            padding: 0.65em 0;
+            top: 50%;
+         }
+         i.fa-search {
+            left: 0.5em;
+         }
+         i.fa-times {
+            right: 1em;
+            padding: 0.75em 0;
+            cursor: pointer;
+         }
+      }
+   }
+   div.modal-body:last-child {
+      padding-bottom: 0;
+   }
+}
+div.count {
+   margin: -0.5em 0 0.7em;
+   display: flex;
+   justify-content: space-between;
+   a {
+      cursor: pointer;
+   }
+}
+div.results {
+   div.list-item {
+      padding: 0.4em 0.8em;
+      display: flex;
+      flex-direction: row;
+      &.checked {
+         background-color: #ececec;
+         border-bottom: 1px dotted #8b8b8b;
+      }
+      div.container {
+         & > input {
+            margin-right: 0.8em;
+         }
+         span:not(.name) {
+            margin-left: 0.5em;
+            opacity: 0.5;
+            font-size: 90%;
+            font-style: italic;
+         }
+      }
+      div.right_actions {
+         margin: 0 0 0 auto;
+         display: flex;
+         align-items: flex-end;
+         & > * {
+            margin-left: 0.5em;
+            align-self: baseline;
+         }
+         a.sc-button {
+            border: 1px solid lightgrey;
+            font-size: 70%;
+            padding: 4px;
+         }
+      }
+   }
+}
 .discret {
    color: grey;
    margin-right: 1em;
 }
 
-table {
+
-   ul.record_actions {
+div.address_form {
-      margin: 0;
+   display: flex;
-      padding: 0.5em;
+   flex-direction: column;
+   div.address_form__header {
+
+   }
+   div.address_form__select {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      div.address_form__select__body {
+         display: flex;
+         flex-direction: column;
+         flex-grow: 1;
+      }
+
+      div.address_form__select__map {
+         margin: 0px 20px;
+         div#address_map {
+            height:400px;
+            width:400px;
+         }
+      }
+   }
+   div.address_form__more {
+
    }
 }

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js

@@ -6,7 +6,7 @@ const addressMessages = {
       select_country: 'Choisir le pays',
       select_city: 'Choisir une localité',
       select_address: 'Choisir une adresse',
-      isNoAddress: 'L\'adresse n\'est pas celle d\'un domicile fixe ?',
+      isNoAddress: 'Pas d\'adresse complète',
       floor: 'Étage',
       corridor: 'Couloir',
       steps: 'Escalier',

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue

@@ -13,42 +13,55 @@
          </template>
 
          <template v-slot:body>
+            <div class="address_form">
 
-            <h4>{{ $t('select_an_address') }}</h4>
+               <div class="address_form__header">
+                  <h4>{{ $t('select_an_address') }}</h4>
+               </div>
 
-            <label for="isNoAddress">
+               <div class="address_form__select">
-               <input type="checkbox"
-                  name="isNoAddress"
-                  v-bind:placeholder="$t('isNoAddress')"
-                  v-model="isNoAddress"
-                  v-bind:value="value"/>
-               {{ $t('isNoAddress') }}
-            </label>
 
-            <country-selection
+                  <div class="address_form__select__body">
-               v-bind:address="address"
+                     <label for="isNoAddress">
-               v-bind:getCities="getCities">
+                        <input type="checkbox"
-            </country-selection>
+                           name="isNoAddress"
+                           v-bind:placeholder="$t('isNoAddress')"
+                           v-model="isNoAddress"
+                           v-bind:value="value"/>
+                        {{ $t('isNoAddress') }}
+                     </label>
 
-            <city-selection
+                     <country-selection
-               v-bind:address="address"
+                        v-bind:address="address"
-               v-bind:getReferenceAddresses="getReferenceAddresses">
+                        v-bind:getCities="getCities">
-            </city-selection>
+                     </country-selection>
 
-            <address-selection
+                     <city-selection
-               v-bind:address="address"
+                        v-bind:address="address"
-               v-bind:updateMapCenter="updateMapCenter">
+                        v-bind:getReferenceAddresses="getReferenceAddresses">
-            </address-selection>
+                     </city-selection>
 
-            <address-map
+                     <address-selection
-               v-bind:address="address"
+                        v-bind:address="address"
-               ref="addressMap">
+                        v-bind:updateMapCenter="updateMapCenter">
-            </address-map>
+                     </address-selection>
+                  </div>
 
-            <address-more
+                  <div class="address_form__select__map">
-               v-if="!isNoAddress"
+                     <address-map
-               v-bind:address="address">
+                        v-bind:address="address"
-            </address-more>
+                        ref="addressMap">
+                     </address-map>
+                  </div>
+               </div>
+
+               <div class="address_form__more">
+                  <address-more
+                     v-if="!isNoAddress"
+                     v-bind:address="address">
+                  </address-more>
+               </div>
+            </div>
 
             <!--
             <div class="address_form__fields__isNoAddress"></div>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="container">
-      <div id='address_map' style='height:400px; width:400px;'></div>
+      <div id='address_map'></div>
    </div>
 </template>
 
@@ -31,6 +31,7 @@ export default {
 
          const markerIcon = L.icon({
             iconUrl: markerIconPng,
+            iconAnchor: [12, 41],
          });
 
          marker = L.marker([48.8589, 2.3469], {icon: markerIcon}).addTo(map);

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue

@@ -1,12 +1,12 @@
 <template>
    <div class="container">
-      <select 
+      <select
          v-model="selected">
          <option :value="{}" disabled selected>{{ $t('select_city') }}</option>
-         <option 
+         <option
-            v-for="item in this.cities" 
+            v-for="item in this.cities"
-            v-bind:item="item" 
+            v-bind:item="item"
-            v-bind:key="item.id" 
+            v-bind:key="item.id"
             v-bind:value="item">
             {{ item.code }}-{{ item.name }}
          </option>
@@ -20,8 +20,8 @@ export default {
    name: 'CitySelection',
    props: ['address', 'getReferenceAddresses'],
    computed: {
-      cities() { 
+      cities() {
-         return this.address.loaded.cities; 
+         return this.address.loaded.cities;
       },
       selected: {
          set(value) {