From e1287218c4003ee0d3426d50544f944d2703924b Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 4 Nov 2024 18:37:03 +0100
Subject: [PATCH] Update layout of tardiness card (horizontal stack)
---
.../statistics/StatisticsForPersonCard.vue | 5 +-
.../statistics/StatisticsTardinessCard.vue | 56 ++++++++++---------
2 files changed, 33 insertions(+), 28 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
index 220d4c6bc..ebcb00af0 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
@@ -108,12 +108,11 @@ export default {
computed: {
gridTemplateAreas() {
return this.compact
- ? `"absences tardinesses extra_marks"
- "personal_notes personal_notes personal_notes"`
+ ? `"absences extra_marks" "tardinesses tardinesses"`
: `"absences" "tardinesses" "extra_marks"`;
},
gridTemplateColumnsNum() {
- return this.compact ? 3 : 1;
+ return this.compact ? 2 : 1;
},
},
};
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue
index bba96cd38..3103208fb 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue
@@ -1,30 +1,36 @@
<template>
<v-skeleton-loader v-if="loading" type="card" />
- <v-card v-else class="text-center">
- <v-card-text
- class="d-flex flex-column align-center justify-center fill-height"
- >
- <div class="text-h2">
- {{ $n(tardinessCount) }}
- </div>
- <div class="text-subtitle-2">
- {{ $tc("alsijil.personal_notes.tardiness_n", tardinessCount) }}
- </div>
- <div class="text-caption">
- <!-- TODO: Show average tardiness instead of sum like mock-up? -->
- <div>
- <v-icon small>mdi-sigma</v-icon>
- {{ $tc("time.minutes_n", tardinessSum, { n: $n(tardinessSum) }) }}
- </div>
- <div>
- <v-icon small>mdi-diameter-variant</v-icon>
- {{
- $tc("time.minutes_n", tardinessSum / tardinessCount, {
- n: $n(tardinessSum / tardinessCount),
- })
- }}
- </div>
- </div>
+ <v-card v-else>
+ <v-card-text>
+ <v-row>
+ <v-col class="text-center">
+ <div class="text-h2">
+ {{ $n(tardinessCount) }}
+ </div>
+ <div class="text-subtitle-2">
+ {{ $tc("alsijil.personal_notes.tardiness_n", tardinessCount) }}
+ </div>
+ </v-col>
+
+ <v-col
+ class="text-caption d-flex flex-column justify-center align-center"
+ >
+ <div>
+ <div>
+ <v-icon small>mdi-sigma</v-icon>
+ {{ $tc("time.minutes_n", tardinessSum, { n: $n(tardinessSum) }) }}
+ </div>
+ <div>
+ <v-icon small>mdi-diameter-variant</v-icon>
+ {{
+ $tc("time.minutes_n", tardinessSum / tardinessCount, {
+ n: $n(tardinessSum / tardinessCount),
+ })
+ }}
+ </div>
+ </div>
+ </v-col>
+ </v-row>
</v-card-text>
</v-card>
</template>
--
GitLab