fix: stat card scroll

This commit is contained in:
puriphatt 2024-07-04 04:14:41 +00:00
parent 39fc15167c
commit 93af8ce47b
5 changed files with 65 additions and 58 deletions

View file

@ -22,7 +22,7 @@ const props = withDefaults(
<div <div
class="row full-width" class="row full-width"
style="gap: var(--size-4)" style="gap: var(--size-4)"
:class="{ 'justify-between': $q.screen.lt.md, dark, 'no-wrap': nowrap }" :class="{ dark, 'no-wrap': nowrap }"
> >
<AppBox <AppBox
v-for="v in props.branch" v-for="v in props.branch"

View file

@ -424,9 +424,11 @@ 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 scroll"> <div class="surface-1 bordered rounded q-mb-md scroll">
<div class="q-ma-md" style="display: inline-block">
<StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" nowrap /> <StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" nowrap />
</div> </div>
</div>
<div <div
class="column col surface-1 bordered rounded scroll" class="column col surface-1 bordered rounded scroll"

View file

@ -547,7 +547,8 @@ watch(inputSearch, async () => await fetchUserList());
{{ selectorLabel === '' ? '' : $t(selectorLabel) }} {{ selectorLabel === '' ? '' : $t(selectorLabel) }}
</div> </div>
<div class="q-px-md scroll"> <div class="scroll">
<div class="q-mx-md" style="display: inline-block">
<StatCardComponent <StatCardComponent
v-if="sortedUserStats" v-if="sortedUserStats"
:branch=" :branch="
@ -564,6 +565,7 @@ watch(inputSearch, async () => await fetchUserList());
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- main --> <!-- main -->
<div <div

View file

@ -1354,7 +1354,8 @@ watch([inputSearch, currentStatus], async () => {
}} }}
</div> </div>
<div class="q-px-md scroll"> <div class="scroll">
<div class="q-mx-md" style="display: inline-block">
<StatCardComponent <StatCardComponent
v-if="customerStats && selectorLabel === 'EMPLOYER'" v-if="customerStats && selectorLabel === 'EMPLOYER'"
labelI18n labelI18n
@ -1393,6 +1394,7 @@ watch([inputSearch, currentStatus], async () => {
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- main --> <!-- main -->
<div class="surface-1 bordered rounded q-pa-md scroll col"> <div class="surface-1 bordered rounded q-pa-md scroll col">

View file

@ -1146,14 +1146,15 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</div> </div>
<AppBox <div
v-if="productMode === 'group' || productMode === 'type'" v-if="productMode === 'group' || productMode === 'type'"
bordered class="q-mb-md bordered rounded surface-1 scroll"
style="overflow-x: scroll"
class="q-mb-md"
> >
<div class="q-ma-md" style="display: inline-block">
<StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap /> <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap />
</AppBox> </div>
</div>
<div <div
v-if="productMode === 'group' || productMode === 'type'" v-if="productMode === 'group' || productMode === 'type'"
class="surface-1 col bordered rounded q-pa-md scroll" class="surface-1 col bordered rounded q-pa-md scroll"