From a421e4165c8b4106489702d55267d27f8e6494b6 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Fri, 15 Mar 2024 19:18:48 +0100
Subject: [PATCH] Stack lesson times in compact mode like in the mockup

---
 .../documentation/LessonInformation.vue       | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue
index aae88b5dd..7f2d5c36a 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue
@@ -1,7 +1,14 @@
 <template>
-  <v-card-text class="d-flex align-center flex-wrap">
-    {{ $d(toDateTime(documentation.datetimeStart), "shortTime") }} –
-    {{ $d(toDateTime(documentation.datetimeEnd), "shortTime") }}
+  <v-card-text class="d-flex align-center flex-wrap gap">
+    <div>
+      <time :datetime="documentation.datetimeStart" :class="{ 'd-block': compact }">
+        {{ $d(toDateTime(documentation.datetimeStart), "shortTime") }}
+      </time>
+      <span v-if="!compact">–</span>
+      <time :datetime="documentation.datetimeEnd" :class="{ 'd-block': compact }">
+        {{ $d(toDateTime(documentation.datetimeEnd), "shortTime") }}
+      </time>
+    </div>
     {{ documentation.course?.name }}
     <subject-chip
       v-if="documentation.subject"
@@ -30,3 +37,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.gap {
+  gap: 1em;
+}
+</style>
-- 
GitLab