From 4d284cd77ca84bcb3d94e4a6bea2e2ba7703c523 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Wed, 27 Mar 2024 19:28:26 +0100
Subject: [PATCH] Use css grid for main documentation layout
---
.../documentation/Documentation.vue | 21 ++++++++++---------
1 file changed, 11 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 694829654..b4368f620 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue
@@ -4,15 +4,12 @@
<lesson-information v-bind="documentationPartProps" />
</v-card-title>
- <!-- flex-md-row zeile ab medium -->
- <!-- align-stretch - stretch full-width -->
<v-card-text
- class="full-width d-flex flex-column align-stretch pa-2"
- :class="{ 'flex-md-row': compact }"
+ class="full-width main-body pa-2"
+ :class="{ 'vertical': !compact || $vuetify.breakpoint.mobile }"
>
- <lesson-information v-if="compact" :class="{ 'flex-110': !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" />
+ <lesson-information v-if="compact" v-bind="documentationPartProps" />
<lesson-summary
- :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }"
ref="summary"
v-bind="{ ...$attrs, ...documentationPartProps }"
:is-create="false"
@@ -21,7 +18,7 @@
@loading="loading = $event"
@save="$emit('close')"
/>
- <lesson-notes :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" />
+ <lesson-notes v-bind="documentationPartProps" />
</v-card-text>
<v-divider />
<v-card-actions v-if="!compact">
@@ -72,8 +69,12 @@ export default {
</script>
<style scoped>
-.flex-110 {
- flex: 1 1 0;
- width: 0;
+.main-body {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1em;
+}
+.vertical {
+ grid-template-columns: 1fr;
}
</style>
--
GitLab