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

This commit is contained in:
nobohan
2021-05-21 16:19:40 +02:00
parent 57a35f88be
commit f7dea7f041
5 changed files with 210 additions and 44 deletions

View File

@@ -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',

View File

@@ -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">
<input type="checkbox"
name="isNoAddress"
v-bind:placeholder="$t('isNoAddress')"
v-model="isNoAddress"
v-bind:value="value"/>
{{ $t('isNoAddress') }}
</label>
<div class="address_form__select">
<country-selection
v-bind:address="address"
v-bind:getCities="getCities">
</country-selection>
<div class="address_form__select__body">
<label for="isNoAddress">
<input type="checkbox"
name="isNoAddress"
v-bind:placeholder="$t('isNoAddress')"
v-model="isNoAddress"
v-bind:value="value"/>
{{ $t('isNoAddress') }}
</label>
<city-selection
v-bind:address="address"
v-bind:getReferenceAddresses="getReferenceAddresses">
</city-selection>
<country-selection
v-bind:address="address"
v-bind:getCities="getCities">
</country-selection>
<address-selection
v-bind:address="address"
v-bind:updateMapCenter="updateMapCenter">
</address-selection>
<city-selection
v-bind:address="address"
v-bind:getReferenceAddresses="getReferenceAddresses">
</city-selection>
<address-map
v-bind:address="address"
ref="addressMap">
</address-map>
<address-selection
v-bind:address="address"
v-bind:updateMapCenter="updateMapCenter">
</address-selection>
</div>
<address-more
v-if="!isNoAddress"
v-bind:address="address">
</address-more>
<div class="address_form__select__map">
<address-map
v-bind:address="address"
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>

View File

@@ -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);

View File

@@ -1,12 +1,12 @@
<template>
<div class="container">
<select
<select
v-model="selected">
<option :value="{}" disabled selected>{{ $t('select_city') }}</option>
<option
v-for="item in this.cities"
v-bind:item="item"
v-bind:key="item.id"
<option
v-for="item in this.cities"
v-bind:item="item"
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() {
return this.address.loaded.cities;
cities() {
return this.address.loaded.cities;
},
selected: {
set(value) {