You've already forked isop-mirror
refactor: wrap student registration form in v-container and v-card to match style
This commit is contained in:
@@ -1,37 +1,39 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container form-wrap">
|
<v-container fluid class="page-container form-wrap">
|
||||||
<h4 class="page-title">Registrácia študenta</h4>
|
<v-card id="page-container-card">
|
||||||
<v-form v-model="isValid" @submit.prevent="onSubmit">
|
<h4 class="page-title">Registrácia študenta</h4>
|
||||||
<v-text-field v-model="form.title" label="Tituly pred:" variant="outlined" density="comfortable" />
|
<v-form v-model="isValid" @submit.prevent="onSubmit">
|
||||||
|
<v-text-field v-model="form.title" label="Tituly pred:" variant="outlined" density="comfortable" />
|
||||||
|
|
||||||
<v-text-field v-model="form.firstName" :rules="[rules.required]" label="Meno:" variant="outlined"
|
<v-text-field v-model="form.firstName" :rules="[rules.required]" label="Meno:" variant="outlined"
|
||||||
density="comfortable" />
|
density="comfortable" />
|
||||||
|
|
||||||
<v-text-field v-model="form.lastName" :rules="[rules.required]" label="Priezvisko:" variant="outlined"
|
<v-text-field v-model="form.lastName" :rules="[rules.required]" label="Priezvisko:" variant="outlined"
|
||||||
density="comfortable" />
|
density="comfortable" />
|
||||||
|
|
||||||
<v-text-field v-model="form.address" label="Adresa:" variant="outlined" density="comfortable" />
|
<v-text-field v-model="form.address" label="Adresa:" variant="outlined" density="comfortable" />
|
||||||
|
|
||||||
<v-text-field v-model="form.studentEmail" :rules="[rules.required, rules.email]" label="Študentský email:"
|
<v-text-field v-model="form.studentEmail" :rules="[rules.required, rules.email]"
|
||||||
variant="outlined" density="comfortable" />
|
label="Študentský email:" variant="outlined" density="comfortable" />
|
||||||
|
|
||||||
<v-text-field v-model="form.altEmail" :rules="[rules.optionalEmail]" label="Alternatívny email:"
|
<v-text-field v-model="form.altEmail" :rules="[rules.optionalEmail]" label="Alternatívny email:"
|
||||||
variant="outlined" density="comfortable" />
|
variant="outlined" density="comfortable" />
|
||||||
|
|
||||||
<v-text-field v-model="form.phone" :rules="[rules.phone]" label="Telefón:" variant="outlined"
|
<v-text-field v-model="form.phone" :rules="[rules.phone]" label="Telefón:" variant="outlined"
|
||||||
density="comfortable" />
|
density="comfortable" />
|
||||||
|
|
||||||
<v-select v-model="form.studyProgram" :items="programs" :rules="[rules.required]" label="Študijný odbor:"
|
<v-select v-model="form.studyProgram" :items="programs" :rules="[rules.required]"
|
||||||
variant="outlined" density="comfortable" />
|
label="Študijný odbor:" variant="outlined" density="comfortable" />
|
||||||
|
|
||||||
<v-checkbox v-model="form.consent" :rules="[rules.mustAgree]"
|
<v-checkbox v-model="form.consent" :rules="[rules.mustAgree]"
|
||||||
label="Súhlasím s podmienkami spracúvania osobných údajov" density="comfortable" />
|
label="Súhlasím s podmienkami spracúvania osobných údajov" density="comfortable" />
|
||||||
|
|
||||||
<v-btn type="submit" color="success" size="large" block :disabled="!isValid || !form.consent">
|
<v-btn type="submit" color="success" size="large" block :disabled="!isValid || !form.consent">
|
||||||
Registrovať
|
Registrovať
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-form>
|
</v-form>
|
||||||
</div>
|
</v-card>
|
||||||
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -79,6 +81,10 @@ function onSubmit() {
|
|||||||
padding-right: 24px;
|
padding-right: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#page-container-card {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
|
|||||||
Reference in New Issue
Block a user