From 47bf1e259625990c1a34d070f6c91ee819f1c5ed Mon Sep 17 00:00:00 2001
From: Michael Bauer <michael-bauer@posteo.de>
Date: Fri, 31 May 2024 16:16:52 +0200
Subject: [PATCH] Style the StatisticsForPersonCard
---
.../statistics/StatisticsAbsencesCard.vue | 12 ++--
.../statistics/StatisticsExtraMarksCard.vue | 20 ++++---
.../statistics/StatisticsForPersonCard.vue | 55 +++++++++++--------
.../statistics/StatisticsTardinessCard.vue | 18 ++++--
4 files changed, 63 insertions(+), 42 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue
index 1874929f2..780a3b732 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue
@@ -1,10 +1,12 @@
<template>
<v-card>
- <absence-reason-chip
- v-for="absenceReason in absenceReasons"
- :absenceReason="absenceReason.absenceReason"
- :count="absenceReason.count"
- />
+ <v-card-text class="d-flex flex-column" style="gap: .5em">
+ <absence-reason-chip
+ v-for="absenceReason in absenceReasons"
+ :absenceReason="absenceReason.absenceReason"
+ :count="absenceReason.count"
+ />
+ </v-card-text>
</v-card>
</template>
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue
index b9182bf84..dba9b73e2 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue
@@ -1,14 +1,16 @@
<template>
<v-card>
- <counter-chip
- v-for="extraMark in extraMarks"
- :value="extraMark.extraMark.id"
- :color="extraMark.extraMark.colourBg"
- :text-color="extraMark.extraMark.colourFg"
- :count="extraMark.count"
- >
- {{ extraMark.extraMark.name }}
- </counter-chip>
+ <v-card-text class="d-flex flex-column" style="gap: .5em">
+ <counter-chip
+ v-for="extraMark in extraMarks"
+ :value="extraMark.extraMark.id"
+ :color="extraMark.extraMark.colourBg"
+ :text-color="extraMark.extraMark.colourFg"
+ :count="extraMark.count"
+ >
+ {{ extraMark.extraMark.name }}
+ </counter-chip>
+ </v-card-text>
</v-card>
</template>
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
index b34401b9e..7450f2bd3 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
@@ -17,29 +17,38 @@
{{ $t("alsijil.coursebook.statistics.person_page.title") }}
</v-card-title>
- <v-skeleton-loader v-if="$apollo.loading"
- type="card"
- />
- <statistics-absences-card v-else
- :absence-reasons="statistics.absenceReasons"
- />
- <v-skeleton-loader v-if="$apollo.loading"
- type="card"
- />
- <statistics-tardiness-card v-else
- :tardiness-sum="statistics.tardinessSum"
- :tardiness-count="statistics.tardinessCount"
- />
- <v-skeleton-loader v-if="$apollo.loading"
- type="card"
- />
- <statistics-extra-marks-card v-else
- :extra-marks="statistics.extraMarks"
- />
- <v-skeleton-loader v-if="compact && $apollo.loading"
- type="card"
- />
- <statistics-personal-notes-list v-else-if="compact" />
+ <v-card-text>
+ <div class="d-flex mb-4" style="gap: 1em">
+ <v-skeleton-loader v-if="$apollo.loading"
+ type="card"
+ />
+ <statistics-absences-card v-else
+ class="flex-grow-1"
+ :absence-reasons="statistics.absenceReasons"
+ />
+ <v-skeleton-loader v-if="$apollo.loading"
+ type="card"
+ />
+ <statistics-tardiness-card v-else
+ class="flex-grow-1"
+ :tardiness-sum="statistics.tardinessSum"
+ :tardiness-count="statistics.tardinessCount"
+ />
+ <v-skeleton-loader v-if="$apollo.loading"
+ type="card"
+ />
+ <statistics-extra-marks-card v-else
+ class="flex-grow-1"
+ :extra-marks="statistics.extraMarks"
+ />
+ </div>
+ <v-skeleton-loader v-if="compact && $apollo.loading"
+ type="card"
+ />
+ <statistics-personal-notes-list v-else-if="compact"
+ class="flex-grow-1"
+ />
+ </v-card-text>
</v-card>
</template>
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue
index fc9428de2..39ad5e937 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue
@@ -1,9 +1,17 @@
<template>
-<v-card>
- {{ tardinessCount }}
- {{ $t("alsijil.tardiness.plural") }}
- <!-- TODO: Show average tardiness instead of sum like mock-up? -->
- {{ tardinessSum }}
+ <v-card class="text-center">
+ <v-card-text>
+ <div class="text-h2">
+ {{ tardinessCount }}
+ </div>
+ <div class="text-subtitle-2">
+ {{ $t("alsijil.tardiness.plural") }}
+ </div>
+ <div class="text-subtitle-2">
+ <!-- TODO: Show average tardiness instead of sum like mock-up? -->
+ {{ tardinessSum }}
+ </div>
+ </v-card-text>
</v-card>
</template>
--
GitLab