0
0
Fork 0

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

View File

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