refactor: responsive

This commit is contained in:
puriphatt 2024-08-27 11:47:01 +07:00
parent bc578d569c
commit ac9fb0501e
5 changed files with 18 additions and 14 deletions

View file

@ -204,7 +204,7 @@ watch(
<q-input
outlined
for="input-bankbook"
class="col-4"
class="col-md-4 col-12"
lazy-rules="ondemand"
hide-bottom-space
:dense="dense"

View file

@ -58,7 +58,7 @@ defineProps<{
outlined
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-4"
class="col-6 col-md-4"
:label="$t('form.telephone')"
for="input-telephone-no"
:model-value="readonly ? telephoneNo || '-' : telephoneNo"
@ -82,7 +82,7 @@ defineProps<{
outlined
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-4"
class="col-6 col-md-4"
label="Line ID"
for="input-line-id"
:model-value="readonly ? lineId || '-' : lineId"
@ -95,7 +95,7 @@ defineProps<{
outlined
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-4"
class="col-6 col-md-4"
:label="$t('branch.form.contactName')"
for="input-contact-name"
:model-value="readonly ? contactName || '-' : contactName"
@ -110,7 +110,7 @@ defineProps<{
outlined
:readonly="readonly"
hide-bottom-space
class="col-12 col-md-4"
class="col-6 col-md-4"
:label="$t('branch.form.contactTelephone')"
for="input-contact"
:model-value="readonly ? contact || '-' : contact"

View file

@ -46,7 +46,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
:disable="view && !readonly"
:readonly="readonly"
hide-bottom-space
class="col"
class="col-md col-5"
:label="$t('branch.form.abbrev')"
for="input-abbreviation"
:model-value="view ? formatCode(abbreviation, 'code') : abbreviation"
@ -64,7 +64,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
readonly
:disable="!readonly"
hide-bottom-space
class="col"
class="col-md col-7"
:label="$t('branch.form.code')"
for="input-code"
:model-value="view ? formatCode(code, 'number') : code"
@ -93,7 +93,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
outlined
:readonly="readonly"
hide-bottom-space
class="col-5"
class="col-md-5 col-12"
:label="$t('branch.form.taxNo')"
v-model="taxNo"
:rules="[
@ -113,7 +113,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
outlined
:readonly="readonly"
hide-bottom-space
class="col-6"
class="col-md-6 col-12"
:label="
typeBranch === 'headOffice'
? $t('branch.form.headofficeName')
@ -130,7 +130,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
outlined
:readonly="readonly"
hide-bottom-space
class="col-6"
class="col-md-6 col-12"
v-model="nameEN"
:label="
typeBranch === 'headOffice'

View file

@ -304,7 +304,7 @@ defineEmits<{
<q-avatar
size="md"
class="q-mx-lg"
:class="$q.screen.gt.xs ? 'q-mx-lg' : 'q-mr-lg'"
style="background-color: var(--surface-tab)"
>
{{ index + 1 }}
@ -348,9 +348,13 @@ defineEmits<{
</div>
</div>
<div class="row justify-end text-right col-md-6 col-12 q-pr-sm">
<div
class="row justify-end text-right col-md-6 col-12"
:class="$q.screen.xs ? 'q-mt-sm text-caption' : 'q-pr-sm'"
>
<span
class="col-12 q-col-gutter-md row"
class="col-12 row"
:class="{ 'q-col-gutter-md': $q.screen.gt.xs }"
style="color: var(--teal-9)"
>
<span

View file

@ -102,7 +102,7 @@ function reset() {
<text
v-if="!!statusBranch"
class="branch-badge branch-card__badge"
class="branch-badge branch-card__badge q-ml-sm"
:class="{
'branch-card__inactive ': statusBranch === 'INACTIVE',
}"