fix: stat responsive

This commit is contained in:
puriphatt 2024-07-03 11:00:45 +00:00
parent 7de60c101f
commit e2f07f47cb
2 changed files with 25 additions and 22 deletions

View file

@ -424,8 +424,8 @@ watch(locale, () => {
<template> <template>
<div class="column full-height no-wrap"> <div class="column full-height no-wrap">
<div class="surface-1 bordered rounded q-pa-md q-mb-md"> <div class="surface-1 bordered rounded q-pa-md q-mb-md scroll">
<StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" /> <StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" nowrap />
</div> </div>
<div <div

View file

@ -1334,26 +1334,27 @@ watch([inputSearch, currentStatus], async () => {
<div class="column full-height no-wrap"> <div class="column full-height no-wrap">
<div v-if="isMainPage" class="column full-height"> <div v-if="isMainPage" class="column full-height">
<div class="row full-width q-mb-md no-wrap"> <div class="row full-width q-pb-md q-gutter-y-md">
<SelectorList <div class="col-sm-5 col-md-3 col-12 q-mr-md">
clickable <SelectorList
:list="selectorList" clickable
v-model:selector="selectorLabel" :list="selectorList"
class="q-mr-md col-3" v-model:selector="selectorLabel"
/> class="full-height"
/>
</div>
<!-- stat --> <!-- stat -->
<AppBox bordered class="column full-width"> <div class="col-12 col-sm bordered surface-1 rounded">
<div class="row q-pb-sm justify-between items-center"> <div class="text-weight-bold text-subtitle1 q-pa-md">
<div class="text-weight-bold text-subtitle1"> {{
{{ selectorLabel === 'EMPLOYER'
selectorLabel === 'EMPLOYER' ? $t('customerEmployerStatTitle')
? $t('customerEmployerStatTitle') : $t('customerEmployeeStatTitle')
: $t('customerEmployeeStatTitle') }}
}}
</div>
</div> </div>
<div class="row full-width" style="overflow-x: auto">
<div class="q-px-md scroll">
<StatCardComponent <StatCardComponent
v-if="customerStats && selectorLabel === 'EMPLOYER'" v-if="customerStats && selectorLabel === 'EMPLOYER'"
labelI18n labelI18n
@ -1371,7 +1372,8 @@ watch([inputSearch, currentStatus], async () => {
})) }))
" "
:dark="$q.dark.isActive" :dark="$q.dark.isActive"
class="no-wrap" nowrap
class="q-mb-md"
/> />
<StatCardComponent <StatCardComponent
@ -1385,10 +1387,11 @@ watch([inputSearch, currentStatus], async () => {
}, },
]" ]"
:dark="$q.dark.isActive" :dark="$q.dark.isActive"
class="no-wrap" nowrap
class="q-mb-md"
/> />
</div> </div>
</AppBox> </div>
</div> </div>
<!-- main --> <!-- main -->