diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue index bcf6b0d6fc2732a8c6036dad4e31517e332840c9..e9559ac971bc834dadb96f8f7554004268de84a2 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;