Skip to content
Snippets Groups Projects
Commit b9492721 authored by Hangzhi Yu's avatar Hangzhi Yu
Browse files

Make design responsive

parent ea120f72
No related branches found
No related tags found
1 merge request!78Resolve "Rewrite registration wizard"
Pipeline #196022 canceled
Stage: prepare
Stage: test
Stage: build
Stage: publish
Hide whitespace changes
Inline Side-by-side
aleksis/apps/paweljong/frontend/components/event_registration/EventRegistrationForm.vue
+ 40
− 33
View file @ b9492721
...@@ -39,11 +39,11 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -39,11 +39,11 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
<v-card-text> <v-card-text>
{{ $t("paweljong.event_registration.form.steps.email.choose_mode.help_text") }} {{ $t("paweljong.event_registration.form.steps.email.choose_mode.help_text") }}
</v-card-text> </v-card-text>
<v-tabs v-model="emailMode" grow optional show-arrows> <v-tabs v-model="emailMode" :grow="!$vuetify.breakpoint.mdAndDown" optional show-arrows>
<v-tab tab-value="postbuero"> <v-tab tab-value="postbuero" style="max-width: 50vw">
{{ $t("paweljong.event_registration.form.steps.email.choose_mode.continue_aleksis") }} {{ $t("paweljong.event_registration.form.steps.email.choose_mode.continue_aleksis") }}
</v-tab> </v-tab>
<v-tab tab-value="own"> <v-tab tab-value="own" style="max-width: 50vw">
{{ $t("paweljong.event_registration.form.steps.email.choose_mode.continue_own") }} {{ $t("paweljong.event_registration.form.steps.email.choose_mode.continue_own") }}
</v-tab> </v-tab>
</v-tabs> </v-tabs>
...@@ -51,7 +51,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -51,7 +51,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
<v-tabs-items v-model="emailMode"> <v-tabs-items v-model="emailMode">
<v-tab-item key="postbuero"> <v-tab-item key="postbuero">
<v-row class="mt-4"> <v-row class="mt-4">
<v-col> <v-col cols="12" md="6">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -62,7 +62,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -62,7 +62,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
></v-text-field> ></v-text-field>
</div> </div>
</v-col> </v-col>
<v-col> <v-col cols="12" md="6">
<div aria-required="true"> <div aria-required="true">
<v-autocomplete <v-autocomplete
outlined outlined
...@@ -83,7 +83,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -83,7 +83,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
</v-tab-item> </v-tab-item>
<v-tab-item key="own"> <v-tab-item key="own">
<v-row class="mt-4"> <v-row class="mt-4">
<v-col> <v-col cols="12" md="6">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -95,7 +95,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -95,7 +95,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
></v-text-field> ></v-text-field>
</div> </div>
</v-col> </v-col>
<v-col> <v-col cols="12" md="6">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -149,7 +149,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -149,7 +149,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-row>
<v-col> <v-col cols="12" lg="4">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -161,7 +161,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -161,7 +161,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
></v-text-field> ></v-text-field>
</div> </div>
</v-col> </v-col>
<v-col> <v-col cols="12" md="6" lg="4">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -174,7 +174,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -174,7 +174,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
></v-text-field> ></v-text-field>
</div> </div>
</v-col> </v-col>
<v-col> <v-col cols="12" md="6" lg="4">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -203,7 +203,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -203,7 +203,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
<div class="mb-4"> <div class="mb-4">
<v-form v-model="validationStatuses['contact_details']"> <v-form v-model="validationStatuses['contact_details']">
<v-row> <v-row>
<v-col v-if="isFieldVisible('date_of_birth')"> <v-col v-if="isFieldVisible('date_of_birth')" cols="12" md="6" lg="4">
<div aria-required="true"> <div aria-required="true">
<date-field <date-field
outlined outlined
...@@ -215,7 +215,15 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -215,7 +215,15 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
/> />
</div> </div>
</v-col> </v-col>
<v-col v-if="isFieldVisible('sex')"> <v-col v-if="isFieldVisible('mobile_number')" cols="12" md="6" lg="4">
<v-text-field
outlined
v-model="data.person.mobileNumber"
:label="$t('paweljong.event_registration.form.steps.contact_details.fields.mobile_number.label')"
prepend-icon="mdi-phone-outline"
></v-text-field>
</v-col>
<v-col v-if="isFieldVisible('sex')" cols="12" lg="4">
<div aria-required="true"> <div aria-required="true">
<!-- FIXME: Prefilling data does not work due to upper-/lowercase situation; will be fixed with core person form refactoring --> <!-- FIXME: Prefilling data does not work due to upper-/lowercase situation; will be fixed with core person form refactoring -->
<sex-select <sex-select
...@@ -229,17 +237,9 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -229,17 +237,9 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
/> />
</div> </div>
</v-col> </v-col>
<v-col v-if="isFieldVisible('mobile_number')">
<v-text-field
outlined
v-model="data.person.mobileNumber"
:label="$t('paweljong.event_registration.form.steps.contact_details.fields.mobile_number.label')"
prepend-icon="mdi-phone-outline"
></v-text-field>
</v-col>
</v-row> </v-row>
<v-row> <v-row>
<v-col v-if="isFieldVisible('street')"> <v-col v-if="isFieldVisible('street')" cols="12" lg="4">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -250,7 +250,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -250,7 +250,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
></v-text-field> ></v-text-field>
</div> </div>
</v-col> </v-col>
<v-col v-if="isFieldVisible('housenumber')"> <v-col v-if="isFieldVisible('housenumber')" cols="12" lg="4">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -263,7 +263,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -263,7 +263,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-row>
<v-col v-if="isFieldVisible('postal_code')"> <v-col v-if="isFieldVisible('postal_code')" cols="12" lg="4">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -274,7 +274,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -274,7 +274,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
></v-text-field> ></v-text-field>
</div> </div>
</v-col> </v-col>
<v-col v-if="isFieldVisible('place')"> <v-col v-if="isFieldVisible('place')" cols="12" lg="4">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -287,7 +287,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -287,7 +287,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
</v-col> </v-col>
</v-row> </v-row>
<v-row v-if="isFieldVisible('school_details')"> <v-row v-if="isFieldVisible('school_details')">
<v-col> <v-col cols="12" lg="4">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -299,7 +299,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -299,7 +299,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
></v-text-field> ></v-text-field>
</div> </div>
</v-col> </v-col>
<v-col> <v-col cols="12" lg="4">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -311,7 +311,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -311,7 +311,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
></v-text-field> ></v-text-field>
</div> </div>
</v-col> </v-col>
<v-col> <v-col cols="12" lg="4">
<div aria-required="true"> <div aria-required="true">
<v-text-field <v-text-field
outlined outlined
...@@ -344,7 +344,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -344,7 +344,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-row> <v-row>
<v-col> <v-col cols="12" md="6">
<div :aria-required="index === 0 ? 'true' : 'false'"> <div :aria-required="index === 0 ? 'true' : 'false'">
<v-text-field <v-text-field
outlined outlined
...@@ -356,7 +356,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -356,7 +356,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
></v-text-field> ></v-text-field>
</div> </div>
</v-col> </v-col>
<v-col> <v-col cols="12" md="6">
<div :aria-required="index === 0 ? 'true' : 'false'"> <div :aria-required="index === 0 ? 'true' : 'false'">
<v-text-field <v-text-field
outlined outlined
...@@ -370,7 +370,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -370,7 +370,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-row>
<v-col> <v-col cols="12" md="6">
<div :aria-required="index === 0 ? 'true' : 'false'"> <div :aria-required="index === 0 ? 'true' : 'false'">
<v-text-field <v-text-field
outlined outlined
...@@ -381,7 +381,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -381,7 +381,7 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
></v-text-field> ></v-text-field>
</div> </div>
</v-col> </v-col>
<v-col> <v-col cols="12" md="6">
<div :aria-required="index === 0 ? 'true' : 'false'"> <div :aria-required="index === 0 ? 'true' : 'false'">
<v-text-field <v-text-field
outlined outlined
...@@ -402,8 +402,11 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -402,8 +402,11 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
<v-spacer /> <v-spacer />
<secondary-action-button <secondary-action-button
@click="addGuardian" @click="addGuardian"
i18n-key="paweljong.event_registration.form.steps.guardians.add" class="btn-multiline"
> >
<span class="text-wrap">
{{ $t("paweljong.event_registration.form.steps.guardians.add") }}
</span>
</secondary-action-button> </secondary-action-button>
</v-col> </v-col>
</v-row> </v-row>
...@@ -890,5 +893,9 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon ...@@ -890,5 +893,9 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
}; };
</script> </script>
<style></style> <style>
.btn-multiline > span {
width: 100%
}
</style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment