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>
<div class="column full-height no-wrap">
<div class="surface-1 bordered rounded q-pa-md q-mb-md">
<StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" />
<div class="surface-1 bordered rounded q-pa-md q-mb-md scroll">
<StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" nowrap />
</div>
<div

View file

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