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

refs #5990 refactor: cardSummary

This commit is contained in:
Alex Moreno 2023-08-09 15:16:00 +02:00
parent 2816413eb6
commit 5417c1691a
1 changed files with 48 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/ui/CardSummary.vue
View File

@ -2,6 +2,8 @@
import { onMounted, ref, watch } from 'vue'; import { onMounted, ref, watch } from 'vue';
import axios from 'axios'; import axios from 'axios';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue'; import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
onMounted(() => fetch()); onMounted(() => fetch());
const entity = ref(); const entity = ref();
@ -44,9 +46,9 @@ watch(props, async () => {
<QCard> <QCard>
<SkeletonSummary v-if="!entity" /> <SkeletonSummary v-if="!entity" />
<template v-if="entity"> <template v-if="entity">
<div class="header bg-primary q-pa-sm q-mb-md"> <div class="header bg-primary q-pa-sm q-mb-md text-weight-bolder text-h2">
<slot name="header" :entity="entity"> <slot name="header" :entity="entity">
{{ entity.id }} - {{ entity.name }} <VnLv :label="entity.id" :value="entity.name" />
</slot> </slot>
</div> </div>
<div class="body q-pa-md q-mb-md"> <div class="body q-pa-md q-mb-md">
@ -58,62 +60,63 @@ watch(props, async () => {
</template> </template>
<style lang="scss"> <style lang="scss">
.summary.container { // .summary.container {
display: flex; // display: flex;
justify-content: center; // justify-content: center;
} // }
.summary { .summary {
.q-card { // .q-card {
width: 100%; // width: 100%;
max-width: 1200px; // max-width: 1200px;
} // }
.negative { // .negative {
color: red; // color: red;
} // }
.q-list { // .q-list {
.q-item__label--header { // .q-item__label--header {
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
a { // a {
color: $primary; // color: $primary;
} // }
} // }
} // }
.body > .q-card__section.row { // .body > .q-card__section.row {
flex-wrap: wrap; // flex-wrap: wrap;
& > .col { // & > .col {
min-width: 250px; // min-width: 250px;
} // }
} // }
.header { .header {
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
color: $label-color;
} }
#slider-container { // #slider-container {
max-width: 80%; // max-width: 80%;
margin: 0 auto; // margin: 0 auto;
.q-slider { // .q-slider {
.q-slider__marker-labels:nth-child(1) { // .q-slider__marker-labels:nth-child(1) {
transform: none; // transform: none;
} // }
.q-slider__marker-labels:nth-child(2) { // .q-slider__marker-labels:nth-child(2) {
transform: none; // transform: none;
left: auto !important; // left: auto !important;
right: 0%; // right: 0%;
} // }
} // }
} // }
} // }
.q-dialog .summary { // .q-dialog .summary {
max-width: 1200px; // max-width: 1200px;
} }
</style> </style>