From f157ecc650139af9b84dba3aaff7eac244512510 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Fri, 16 Feb 2024 20:07:28 +0100
Subject: [PATCH] Improve look of coursebook on desktop
---
.../documentation/LessonSummary.vue | 98 +++++++++++++------
1 file changed, 67 insertions(+), 31 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/documentation/LessonSummary.vue b/aleksis/apps/alsijil/frontend/components/documentation/LessonSummary.vue
index aa958595a..cc9a0eaf2 100644
--- a/aleksis/apps/alsijil/frontend/components/documentation/LessonSummary.vue
+++ b/aleksis/apps/alsijil/frontend/components/documentation/LessonSummary.vue
@@ -1,39 +1,57 @@
<template>
<v-card-text>
<!-- compact -->
- <v-text-field
- dense
- filled
- v-if="compact"
- :label="$t('alsijil.coursebook.summary.topic')"
- :value="documentation.topic"
- @input="topic=$event"
- @focusout="save"
- @keydown.enter="saveAndBlur"
- :loading="loading"
- />
- <v-chip
+ <div
+ class="d-flex flex-column flex-md-row align-stretch align-md-center gap justify-start"
v-if="compact"
- outlined
- @click="$emit('open')"
>
- {{
- documentation.homework
- ? $t("alsijil.coursebook.summary.homework.value", {homework: truncate(documentation.homework)})
- : $t("alsijil.coursebook.summary.homework.empty")
- }}
- </v-chip>
- <v-chip
- v-if="compact"
- outlined
- @click="$emit('open')"
- >
- {{
- documentation.groupNote
- ? $t("alsijil.coursebook.summary.group_note.value", {groupNote: truncate(documentation.groupNote)})
- : $t("alsijil.coursebook.summary.group_note.empty")
- }}
- </v-chip>
+ <v-text-field
+ class="flex-grow-1 min-width"
+ dense
+ hide-details
+ filled
+ :label="$t('alsijil.coursebook.summary.topic')"
+ :value="documentation.topic"
+ @input="topic = $event"
+ @focusout="save"
+ @keydown.enter="saveAndBlur"
+ :loading="loading"
+ />
+ <div class="d-flex flex-column align-start">
+ <v-chip
+ :outlined="!documentation.homework"
+ @click="$emit('open')"
+ class="mb-2 chip-width"
+ >
+ <span class="max-width text-truncate">{{
+ documentation.homework
+ ? $t("alsijil.coursebook.summary.homework.value", documentation)
+ : $t("alsijil.coursebook.summary.homework.empty")
+ }}</span>
+ <v-icon right v-if="documentation.homework"
+ >mdi-book-edit-outline</v-icon
+ >
+ <v-icon right v-else>mdi-book-plus-outline</v-icon>
+ </v-chip>
+ <v-chip
+ :outlined="!documentation.groupNote"
+ @click="$emit('open')"
+ class="chip-width"
+ >
+ <span class="max-width text-truncate">{{
+ documentation.groupNote
+ ? $t("alsijil.coursebook.summary.group_note.value", {
+ groupNote: truncate(documentation.groupNote),
+ })
+ : $t("alsijil.coursebook.summary.group_note.empty")
+ }}</span>
+ <v-icon right v-if="documentation.groupNote"
+ >mdi-note-edit-outline</v-icon
+ >
+ <v-icon right v-else>mdi-note-plus-outline</v-icon>
+ </v-chip>
+ </div>
+ </div>
<!-- not compact -->
<!-- Are focusout & enter enough trigger? -->
<v-text-field
@@ -136,3 +154,21 @@ export default {
},
};
</script>
+
+<style scoped>
+.min-width {
+ min-width: 25ch;
+}
+
+.max-width {
+ max-width: min(100%, 40ch);
+}
+
+.chip-width {
+ max-width: 40ch;
+}
+
+.gap {
+ gap: 1em;
+}
+</style>
--
GitLab