Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-22 07:33:50 +00:00
Code Issues Actions Projects Releases Wiki Activity

adapt vue modals styles to bootstrap

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-07-13 15:35:48 +02:00
parent bdf0ec63d2
commit 50f3ec9064
9 changed files with 57 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
View File

@@ -54,30 +54,55 @@
</div>
<div v-else-if="action === 'edit' || action === 'create'">
<input v-model="firstName" :placeholder="$t('person.firstname')" />
<input v-model="lastName" :placeholder="$t('person.lastname')" />
<div class="form-floating mb-3">
<input class="form-control form-control-lg" id="firstname" v-model="firstName" v-bind:placeholder="$t('person.firstname')" />
<label for="firstname">{{ $t('person.firstname') }}</label>
</div>
<div class="form-floating mb-3">
<input class="form-control form-control-lg" id="lastname" v-model="lastName" v-bind:placeholder="$t('person.lastname')" />
<label for="lastname">{{ $t('person.lastname') }}</label>
</div>
<!-- TODO fix placeholder if undefined
TODO dynamically get gender options
-->
<select v-model="gender">
<option disabled value="">{{ $t('person.gender.placeholder') }}</option>
<option value="woman">{{ $t('person.gender.woman') }}</option>
<option value="man">{{ $t('person.gender.man') }}</option>
<option value="neuter">{{ $t('person.gender.neuter') }}</option>
</select>
<div class="form-floating mb-3">
<select class="form-select form-select-lg" id="gender" v-model="gender">
<option selected disabled >{{ $t('person.gender.placeholder') }}</option>
<option value="woman">{{ $t('person.gender.woman') }}</option>
<option value="man">{{ $t('person.gender.man') }}</option>
<option value="neuter">{{ $t('person.gender.neuter') }}</option>
</select>
<label for="gender">{{ $t('person.gender.title') }}</label>
</div>
<i class="fa fa-birthday-cake"></i>
<input type="date"
id="chill_personbundle_person_birthdate"
name="chill_personbundle_person[birthdate]"
v-model="birthDate"
/>
<div class="input-group mb-3">
<span class="input-group-text" id="birthdate"><i class="fa fa-fw fa-birthday-cake"></i></span>
<input type="date"
class="form-control form-control-lg"
id="chill_personbundle_person_birthdate"
name="chill_personbundle_person[birthdate]"
v-model="birthDate"
aria-describedby="birthdate" />
</div>
<i class="fa fa-phone">
</i><input v-model="phonenumber" :placeholder="$t('person.phonenumber')" />
<i class="fa fa-mobile">
</i><input v-model="mobilenumber" :placeholder="$t('person.mobilenumber')" />
<div class="input-group mb-3">
<span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
<input class="form-control form-control-lg"
v-model="phonenumber"
v-bind:placeholder="$t('person.phonenumber')"
v-bind:aria-label="$t('person.phonenumber')"
aria-describedby="phonenumber" />
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="mobilenumber"><i class="fa fa-fw fa-mobile"></i></span>
<input class="form-control form-control-lg"
v-model="mobilenumber"
v-bind:placeholder="$t('person.mobilenumber')"
v-bind:aria-label="$t('person.mobilenumber')"
aria-describedby="mobilenumber" />
</div>
</div>
</template>