From 6700e8d935b25cbcd94195482df62f4e41b582b4 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Fri, 18 Oct 2024 14:01:18 +0200
Subject: [PATCH] Use grid-based styling of statistics card
---
.../statistics/StatisticsForPersonCard.vue | 29 +++++++++++++------
1 file changed, 20 insertions(+), 9 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
index a961e6892..54975be56 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
@@ -16,29 +16,29 @@
</v-card-title>
<v-card-text>
- <div class="d-flex mb-4" style="gap: 1em">
+ <div class="grid">
<statistics-absences-card
- class="flex-grow-1"
+ style="grid-area: absences"
:absence-reasons="statistics.absenceReasons"
:loading="$apollo.loading"
/>
<statistics-tardiness-card
- class="flex-grow-1"
+ style="grid-area: tardinesses"
:tardiness-sum="statistics.tardinessSum"
:tardiness-count="statistics.tardinessCount"
:loading="$apollo.loading"
/>
<statistics-extra-marks-card
- class="flex-grow-1"
+ style="grid-area: extra_marks"
:extra-marks="statistics.extraMarks"
:loading="$apollo.loading"
/>
+ <statistics-personal-notes-list
+ v-if="compact"
+ style="grid-area: personal_notes"
+ :loading="$apollo.loading"
+ />
</div>
- <statistics-personal-notes-list
- v-if="compact"
- class="flex-grow-1"
- :loading="$apollo.loading"
- />
</v-card-text>
</v-card>
</template>
@@ -111,3 +111,14 @@ export default {
},
};
</script>
+
+<style scoped>
+.grid {
+ display: grid;
+ max-width: 100%;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ grid-template-areas: "absences tardinesses extra_marks"
+ "personal_notes personal_notes personal_notes";
+ gap: 0.5em;
+}
+</style>
--
GitLab