From 12696dc9bdb083df777f21aadfc87e3b1b64c868 Mon Sep 17 00:00:00 2001 From: Hangzhi Yu <hangzhi@protonmail.com> Date: Wed, 10 Apr 2024 14:22:31 +0200 Subject: [PATCH] Fix coursebook layout --- .../documentation/LessonInformation.vue | 51 ++++++++----------- 1 file changed, 21 insertions(+), 30 deletions(-) diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue index bcf6b0d6f..e9559ac97 100644 --- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue +++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue @@ -26,24 +26,26 @@ import PersonChip from "aleksis.core/components/person/PersonChip.vue"; > {{ documentation.course?.name }} </span> - <subject-chip - v-if="documentation.subject" - :subject="documentation.subject" - v-bind="compact ? dialogActivator.attrs : {}" - v-on="compact ? dialogActivator.on : {}" - /> - <subject-chip - v-if=" - documentation?.lessonEvent?.amends?.subject && - documentation.lessonEvent.amends.subject.id !== documentation.subject.id - " - :subject="documentation.lessonEvent.amends.subject" - v-bind="compact ? dialogActivator.attrs : {}" - v-on="compact ? dialogActivator.on : {}" - class="text-decoration-line-through" - disabled - /> - <div :class="{ 'd-flex align-center flex-wrap gap': true }"> + <div :class="{ 'd-flex align-center flex-wrap gap': true, 'justify-center': largeGrid, 'justify-start': !largeGrid }"> + <subject-chip + v-if="documentation.subject" + :subject="documentation.subject" + v-bind="compact ? dialogActivator.attrs : {}" + v-on="compact ? dialogActivator.on : {}" + /> + <subject-chip + v-if=" + documentation?.lessonEvent?.amends?.subject && + documentation.lessonEvent.amends.subject.id !== documentation.subject.id + " + :subject="documentation.lessonEvent.amends.subject" + v-bind="compact ? dialogActivator.attrs : {}" + v-on="compact ? dialogActivator.on : {}" + class="text-decoration-line-through" + disabled + /> + </div> + <div :class="{ 'd-flex align-center flex-wrap gap': true, 'justify-end': !largeGrid }"> <person-chip v-for="teacher in documentation.teachers" :key="documentation.id + '-teacher-' + teacher.id" @@ -103,7 +105,7 @@ export default { <style scoped> .grid { display: grid; - grid-template-columns: auto auto; + grid-template-columns: 1fr 1fr; align-items: center; gap: 1em; align-content: start; @@ -114,17 +116,6 @@ export default { align-content: unset; } -.grid:not(.large-grid):nth-child(odd) { - justify-self: start; -} -.grid:not(.large-grid):nth-child(even) { - justify-self: end; -} - -.grid.large-grid:nth-child(3) { - justify-self: center; -} - .grid:last-child { justify-self: end; justify-content: end; -- GitLab