fix: 01 form responsive
This commit is contained in:
puriphatt
parent
c05e26f36b
commit
331a45ad4e
7 changed files with 145 additions and 119 deletions
|
|
@ -17,14 +17,16 @@ defineProps<{
|
|||
</script>
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<div class="col-md-3 col-12 app-text-muted q-pb-sm">
|
||||
• {{ $t(`${title}`) }}
|
||||
</div>
|
||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
class="col-md-5 col-12"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputEmailHq')
|
||||
|
|
@ -39,7 +41,7 @@ defineProps<{
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-7"
|
||||
class="col-md-7 col-12"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputTelephoneHq')
|
||||
|
|
@ -54,7 +56,7 @@ defineProps<{
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
class="col-md-5 col-12"
|
||||
:label="$t('formDialogInputContactName')"
|
||||
v-model="contactName"
|
||||
for="input-contact-name"
|
||||
|
|
|
|||
|
|
@ -16,103 +16,110 @@ defineProps<{
|
|||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:class="{
|
||||
'col-6': typeBranch == 'headOffice',
|
||||
'col-4': typeBranch != 'headOffice',
|
||||
}"
|
||||
:label="$t('formDialogInputCode')"
|
||||
v-model="code"
|
||||
for="input-code"
|
||||
/>
|
||||
<div class="row col-12">
|
||||
<div class="col-md-3 col-12 app-text-muted q-pb-sm">
|
||||
• {{ $t(`${title}`) }}
|
||||
</div>
|
||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:class="{
|
||||
'col-12': $q.screen.xs,
|
||||
'col-6': typeBranch == 'headOffice',
|
||||
'col-4': typeBranch != 'headOffice',
|
||||
}"
|
||||
:label="$t('formDialogInputCode')"
|
||||
v-model="code"
|
||||
for="input-code"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-if="typeBranch !== 'headOffice'"
|
||||
:dense="dense"
|
||||
outlined
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:class="{
|
||||
'col-6': typeBranch == 'headOffice',
|
||||
'col-4': typeBranch != 'headOffice',
|
||||
}"
|
||||
:label="$t('branchLabelCode')"
|
||||
v-model="codeSubBranch"
|
||||
for="input-code-sub-branch"
|
||||
/>
|
||||
<q-input
|
||||
v-if="typeBranch !== 'headOffice'"
|
||||
:dense="dense"
|
||||
outlined
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:class="{
|
||||
'col-12': $q.screen.xs,
|
||||
'col-6': typeBranch == 'headOffice',
|
||||
'col-4': typeBranch != 'headOffice',
|
||||
}"
|
||||
:label="$t('branchLabelCode')"
|
||||
v-model="codeSubBranch"
|
||||
for="input-code-sub-branch"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:class="{
|
||||
'col-6': typeBranch === 'headOffice',
|
||||
'col-4': typeBranch !== 'headOffice',
|
||||
}"
|
||||
:label="$t('formDialogInputTaxNo')"
|
||||
v-model="taxNo"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length === 13 && /[0-9]+/.test(val)) ||
|
||||
$t('formDialogInputTaxNoValidate'),
|
||||
]"
|
||||
for="input-tax-no"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:class="{
|
||||
'col-12': $q.screen.xs,
|
||||
'col-6': typeBranch === 'headOffice',
|
||||
'col-4': typeBranch !== 'headOffice',
|
||||
}"
|
||||
:label="$t('formDialogInputTaxNo')"
|
||||
v-model="taxNo"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length === 13 && /[0-9]+/.test(val)) ||
|
||||
$t('formDialogInputTaxNoValidate'),
|
||||
]"
|
||||
for="input-tax-no"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHq')
|
||||
: $t('formDialogInputNameSubBranch')
|
||||
"
|
||||
v-model="name"
|
||||
lazy-rules
|
||||
:rules="[(val) => val && val.length > 0]"
|
||||
:error-message="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHqValidate')
|
||||
: $t('formDialogInputNameSubBranchValidate')
|
||||
"
|
||||
for="input-name"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHq')
|
||||
: $t('formDialogInputNameSubBranch')
|
||||
"
|
||||
v-model="name"
|
||||
lazy-rules
|
||||
:rules="[(val) => val && val.length > 0]"
|
||||
:error-message="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHqValidate')
|
||||
: $t('formDialogInputNameSubBranchValidate')
|
||||
"
|
||||
for="input-name"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
v-model="nameEN"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHqEn')
|
||||
: $t('formDialogInputNameSubBranchEn')
|
||||
"
|
||||
:rules="[(val) => val && val.length > 0]"
|
||||
:error-message="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHqEnValidate')
|
||||
: $t('formDialogInputNameSubBranchEnValidate')
|
||||
"
|
||||
for="input-name-en"
|
||||
<q-input
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
v-model="nameEN"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHqEn')
|
||||
: $t('formDialogInputNameSubBranchEn')
|
||||
"
|
||||
:rules="[(val) => val && val.length > 0]"
|
||||
:error-message="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHqEnValidate')
|
||||
: $t('formDialogInputNameSubBranchEnValidate')
|
||||
"
|
||||
for="input-name-en"
|
||||
/>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -14,10 +14,14 @@ defineEmits<{
|
|||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• {{ title }}</div>
|
||||
<div class="col-md-3 col-12 app-text-muted">• {{ title }}</div>
|
||||
<div
|
||||
:class="{ 'dark-form-show-img-qh': $q.dark.isActive }"
|
||||
class="col-9 row q-mt-lg branch-form-show-img-hq"
|
||||
:class="{
|
||||
'dark-form-show-img-qh': $q.dark.isActive,
|
||||
'q-mt-lg': !$q.screen.xs,
|
||||
'q-mt-sm': $q.screen.xs,
|
||||
}"
|
||||
class="col-md-9 col-12 row branch-form-show-img-hq"
|
||||
style="min-height: 150px"
|
||||
>
|
||||
<div class="col-12 flex flex-center" v-if="image">
|
||||
|
|
|
|||
|
|
@ -18,8 +18,11 @@ defineProps<{
|
|||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
|
||||
<div class="col-9 q-mt-lg bordered rounded row no-padding">
|
||||
<div class="col-md-3 col-12 app-text-muted">• {{ $t(`${title}`) }}</div>
|
||||
<div
|
||||
class="col-md-9 col-12 bordered rounded row no-padding"
|
||||
:class="{ 'q-mt-lg': !$q.screen.xs, 'q-mt-sm': $q.screen.xs }"
|
||||
>
|
||||
<div class="col-12 q-pl-md q-py-sm app-text-muted">location</div>
|
||||
|
||||
<div v-if="!!longitude && !!latitude" class="col-12 flex flex-center">
|
||||
|
|
|
|||
|
|
@ -16,10 +16,14 @@ defineEmits<{
|
|||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• {{ title }}</div>
|
||||
<div class="col-md-3 col-12 app-text-muted">• {{ title }}</div>
|
||||
<div
|
||||
:class="{ 'dark-form-show-qr-code': $q.dark.isActive }"
|
||||
class="col-9 row q-mt-lg branch-form-show-qr-code"
|
||||
:class="{
|
||||
'dark-form-show-qr-code': $q.dark.isActive,
|
||||
'q-mt-lg': !$q.screen.xs,
|
||||
'q-mt-sm': $q.screen.xs,
|
||||
}"
|
||||
class="col-md-9 col-12 row branch-form-show-qr-code"
|
||||
>
|
||||
<div class="col-12 flex flex-center">
|
||||
<q-img v-if="qr" :src="qr as string" style="width: 150px; height: 150px">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue