mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-20 22:53:49 +00:00
adapt AddAddress modal to bootstrap: position, responsive, form
This commit is contained in:
@@ -17,62 +17,62 @@
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
<div class="address_form">
|
||||
|
||||
<div v-if="loading">
|
||||
{{ $t('loading') }}
|
||||
</div>
|
||||
|
||||
<div class="address_form__header">
|
||||
<h4>{{ $t('select_an_address_title') }}</h4>
|
||||
</div>
|
||||
|
||||
<div class="address_form__select">
|
||||
|
||||
<div class="address_form__select__body">
|
||||
<label for="isNoAddress">
|
||||
<div class="address-form">
|
||||
|
||||
<h4 class="h3">{{ $t('select_an_address_title') }}
|
||||
<span v-if="loading">
|
||||
<i class="fa fa-circle-o-notch"></i>
|
||||
</span>
|
||||
</h4>
|
||||
|
||||
<div class="row my-3">
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox"
|
||||
name="isNoAddress"
|
||||
v-bind:placeholder="$t('isNoAddress')"
|
||||
class="form-check-input"
|
||||
id="isNoAddress"
|
||||
v-model="isNoAddress"
|
||||
v-bind:value="value"/>
|
||||
{{ $t('isNoAddress') }}
|
||||
</label>
|
||||
|
||||
v-bind:value="value" />
|
||||
<label class="form-check-label" for="isNoAddress">
|
||||
{{ $t('isNoAddress') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<country-selection
|
||||
v-bind:address="address"
|
||||
v-bind:getCities="getCities">
|
||||
</country-selection>
|
||||
|
||||
|
||||
<city-selection
|
||||
v-bind:address="address"
|
||||
v-bind:focusOnAddress="focusOnAddress"
|
||||
v-bind:getReferenceAddresses="getReferenceAddresses">
|
||||
</city-selection>
|
||||
|
||||
|
||||
<address-selection
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address"
|
||||
v-bind:updateMapCenter="updateMapCenter">
|
||||
</address-selection>
|
||||
</div>
|
||||
|
||||
<div class="address_form__select__map">
|
||||
</div>
|
||||
<div class="col-lg-6 mt-3 mt-lg-0">
|
||||
|
||||
<address-map
|
||||
v-bind:address="address"
|
||||
ref="addressMap">
|
||||
</address-map>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<address-more
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address">
|
||||
</address-more>
|
||||
|
||||
<div class="address_form__more">
|
||||
<address-more
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address">
|
||||
</address-more>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
@@ -257,3 +257,16 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
div.address-form {
|
||||
h4.h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
div#address_map {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id='address_map'></div>
|
||||
</div>
|
||||
<div id="address_map"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,67 +1,73 @@
|
||||
<template>
|
||||
<h4>{{ $t('fill_an_address') }}</h4>
|
||||
<div>
|
||||
<label for="floor">{{ $t('floor') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="floor"
|
||||
maxlength=16
|
||||
:placeholder="$t('floor')"
|
||||
v-model="floor"/>
|
||||
<h4 class="h3">{{ $t('fill_an_address') }}</h4>
|
||||
<div class="row my-3">
|
||||
<div class="col-lg-6">
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="floor"
|
||||
maxlength=16
|
||||
:placeholder="$t('floor')"
|
||||
v-model="floor"/>
|
||||
<label for="floor">{{ $t('floor') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="corridor"
|
||||
maxlength=16
|
||||
:placeholder="$t('corridor')"
|
||||
v-model="corridor"/>
|
||||
<label for="corridor">{{ $t('corridor') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="steps"
|
||||
maxlength=16
|
||||
:placeholder="$t('steps')"
|
||||
v-model="steps"/>
|
||||
<label for="steps">{{ $t('steps') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="flat"
|
||||
maxlength=16
|
||||
:placeholder="$t('flat')"
|
||||
v-model="flat"/>
|
||||
<label for="flat">{{ $t('flat') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="buildingName"
|
||||
maxlength=255
|
||||
:placeholder="$t('buildingName')"
|
||||
v-model="buildingName"/>
|
||||
<label for="buildingName">{{ $t('buildingName') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="extra"
|
||||
maxlength=255
|
||||
:placeholder="$t('extra')"
|
||||
v-model="extra"/>
|
||||
<label for="extra">{{ $t('extra') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="distribution"
|
||||
maxlength=255
|
||||
:placeholder="$t('distribution')"
|
||||
v-model="distribution"/>
|
||||
<label for="distribution">{{ $t('distribution') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="corridor">{{ $t('corridor') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="corridor"
|
||||
maxlength=16
|
||||
:placeholder="$t('corridor')"
|
||||
v-model="corridor"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="steps">{{ $t('steps') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="steps"
|
||||
maxlength=16
|
||||
:placeholder="$t('steps')"
|
||||
v-model="steps"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="flat">{{ $t('flat') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="flat"
|
||||
maxlength=16
|
||||
:placeholder="$t('flat')"
|
||||
v-model="flat"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="buildingName">{{ $t('buildingName') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="buildingName"
|
||||
maxlength=255
|
||||
:placeholder="$t('buildingName')"
|
||||
v-model="buildingName"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="extra">{{ $t('extra') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="extra"
|
||||
maxlength=255
|
||||
:placeholder="$t('extra')"
|
||||
v-model="extra"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="distribution">{{ $t('distribution') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="distribution"
|
||||
maxlength=255
|
||||
:placeholder="$t('distribution')"
|
||||
v-model="distribution"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="my-1">
|
||||
<label class="col-form-label" for="addressSelector">{{ $t('address') }}</label>
|
||||
<VueMultiselect
|
||||
id="addressSelector"
|
||||
v-model="value"
|
||||
@@ -16,17 +17,27 @@
|
||||
:options="addresses">
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
<div class="custom-address" v-if="writeNewAddress || writeNewPostalCode">
|
||||
<input
|
||||
type="text"
|
||||
name="street"
|
||||
:placeholder="$t('street')"
|
||||
v-model="street"/>
|
||||
<input
|
||||
type="text"
|
||||
name="streetNumber"
|
||||
:placeholder="$t('streetNumber')"
|
||||
v-model="streetNumber"/>
|
||||
<div class="custom-address row g-1" v-if="writeNewAddress || writeNewPostalCode">
|
||||
<div class="col-10">
|
||||
<div class="form-floating">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="street"
|
||||
:placeholder="$t('street')"
|
||||
v-model="street"/>
|
||||
<label for="street">{{ $t('street') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="form-floating">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="streetNumber"
|
||||
:placeholder="$t('streetNumber')"
|
||||
v-model="streetNumber"/>
|
||||
<label for="streetNumber">{{ $t('streetNumber') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="my-1">
|
||||
<label class="col-form-label" for="citySelector">{{ $t('city') }}</label>
|
||||
<VueMultiselect
|
||||
id="citySelector"
|
||||
v-model="value"
|
||||
@@ -16,17 +17,28 @@
|
||||
:options="cities">
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
<div class="custom-postcode" v-if="writeNewPostalCode">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
:placeholder="$t('postalCode_name')"
|
||||
v-model="name"/>
|
||||
<input
|
||||
type="text"
|
||||
name="code"
|
||||
:placeholder="$t('postalCode_code')"
|
||||
v-model="code"/>
|
||||
|
||||
<div class="custom-postcode row g-1" v-if="writeNewPostalCode">
|
||||
<div class="col-4">
|
||||
<div class="form-floating">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="code"
|
||||
:placeholder="$t('postalCode_code')"
|
||||
v-model="code"/>
|
||||
<label for="code">{{ $t('postalCode_code') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="form-floating">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="name"
|
||||
:placeholder="$t('postalCode_name')"
|
||||
v-model="name"/>
|
||||
<label for="name">{{ $t('postalCode_name') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="my-1">
|
||||
<label class="col-form-label" for="countrySelect">{{ $t('country') }}</label>
|
||||
<VueMultiselect
|
||||
v-model="value"
|
||||
name="field"
|
||||
id="countrySelect"
|
||||
track-by="id"
|
||||
label="name"
|
||||
:custom-label="transName"
|
||||
|
||||
Reference in New Issue
Block a user