wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

change monitor list layout

This commit is contained in:
William Buezas 2024-05-08 10:58:27 -03:00
parent 712d7e13ff
commit 399c2723a9
1 changed files with 29 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/pages/Monitor/MonitorList.vue
View File

@ -21,46 +21,45 @@ onUnmounted(() => (stateStore.rightDrawer = false));
<template>
<QPage class="column items-center q-pa-md">
<QExpansionItem
v-model="expanded"
dense
:duration="150"
class="full-width q-mb-lg"
>
<template v-if="!expanded" #header>
<div class="row full-width">
<span class="flex col text-body1">
{{ t('salesMonitor.clientsOnWebsite') }}
</span>
<span class="flex col q-ml-xl text-body1">
{{ t('salesMonitor.recentOrderActions') }}
</span>
</div>
</template>
<template #default>
<QCard class="card">
<QCardSection class="col">
<span class="flex col q-mb-sm text-body1">
<QCard class="full-width q-mb-lg">
<QExpansionItem v-model="expanded" dense :duration="150">
<template v-if="!expanded" #header>
<div class="row full-width">
<span class="flex col text-body1">
{{ t('salesMonitor.clientsOnWebsite') }}
</span>
<SalesClientTable />
</QCardSection>
<QCardSection class="col">
<span class="flex col q-mb-sm text-body1">
<span class="flex col q-ml-xl text-body1">
{{ t('salesMonitor.recentOrderActions') }}
</span>
<SalesOrdersTable />
</QCardSection>
</QCard>
</template>
</QExpansionItem>
</div>
</template>
<template #default>
<div class="expansion-tables-container">
<QCardSection class="col">
<span class="flex col q-mb-sm text-body1">
{{ t('salesMonitor.clientsOnWebsite') }}
</span>
<SalesClientTable />
</QCardSection>
<QCardSection class="col">
<span class="flex col q-mb-sm text-body1">
{{ t('salesMonitor.recentOrderActions') }}
</span>
<SalesOrdersTable />
</QCardSection>
</div>
</template>
</QExpansionItem>
</QCard>
<SalesTicketsTable />
</QPage>
</template>
<style lang="scss" scoped>
.card {
.expansion-tables-container {
display: flex;
border-top: 1px solid $color-spacer;
@media (max-width: $breakpoint-md-max) {
flex-direction: column;