From 69146424cc207b74975f7d05d22ddc6331cca87f Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Fri, 15 Mar 2024 21:30:18 +0100
Subject: [PATCH] Fix mobile design of coursebook
---
.../coursebook/documentation/Documentation.vue | 6 +++---
.../coursebook/documentation/LessonSummary.vue | 13 ++++++-------
2 files changed, 9 insertions(+), 10 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue
index d19068f53..dc54ea104 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue
@@ -10,9 +10,9 @@
class="full-width d-flex flex-column align-stretch"
:class="{ 'flex-md-row': compact }"
>
- <lesson-information v-if="compact" class="flex-110" v-bind="documentationPartProps" />
+ <lesson-information v-if="compact" :class="{ 'flex-110': !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" />
<lesson-summary
- :class="{ 'flex-110': compact }"
+ :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }"
ref="summary"
v-bind="{ ...$attrs, ...documentationPartProps }"
:is-create="false"
@@ -21,7 +21,7 @@
@loading="loading = $event"
@save="$emit('close')"
/>
- <lesson-notes :class="{ 'flex-110': compact }" v-bind="documentationPartProps" />
+ <lesson-notes :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" />
</v-card-text>
<v-divider />
<v-card-actions v-if="!compact">
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
index eec73bdb9..b594d056f 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
@@ -24,7 +24,7 @@
v-on="dialogActivator.on"
:outlined="!documentation.homework"
@click="$emit('open')"
- class="mb-2 chip-width"
+ class="mb-2 max-width"
dense
>
<span class="max-width text-truncate">{{
@@ -39,7 +39,7 @@
v-on="dialogActivator.on"
:outlined="!documentation.groupNote"
@click="$emit('open')"
- class="chip-width"
+ class="max-width"
dense
>
<span class="max-width text-truncate">{{
@@ -170,6 +170,9 @@ export default {
minWidth() {
return Math.min(this.documentation?.topic?.length || 15, 15) + "ch";
},
+ maxWidth() {
+ return this.$vuetify.breakpoint.mobile ? "100%" : "20ch";
+ }
},
};
</script>
@@ -180,11 +183,7 @@ export default {
}
.max-width {
- max-width: min(100%, 20ch);
-}
-
-.chip-width {
- max-width: 20ch;
+ max-width: v-bind(maxWidth)
}
.gap {
--
GitLab