verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 63 Releases Wiki Activity

refs #5990 refactor: cardSummary
gitea/salix-front/pipeline/head This commit looks good Details

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