Include teachers in coursebook

aleksis/apps/alsijil/frontend/components/coursebook/coursebook.graphql

@@ -38,6 +38,11 @@ query documentationsForCoursebook(
     lessonEvent {
       id
     }
+    teachers {
+      id
+      shortName
+      fullName
+    }
     subject {
       id
       name

aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonInformation.vue

+<script setup>
+import PersonChip from "aleksis.core/components/person/PersonChip.vue";
+</script>
+
 <template>
-  <div :class="{ 'full-width grid mr-0': true, 'mr-md-4': compact }">
+  <div :class="{ 'full-width grid mr-0 mb-2': true, 'mr-md-4 mb-0': compact, 'large-grid': largeGrid }">
     <div>
-      <div :class="{ 'text-right d-flex flex-column fit-content': compact }">
+      <div :class="{ 'text-right d-flex flex-column fit-content': largeGrid }">
         <time :datetime="documentation.datetimeStart" class="text-no-wrap">
           {{ $d(toDateTime(documentation.datetimeStart), "shortTime") }}
         </time>
-        <span v-if="!compact">–</span>
+        <span v-if="!largeGrid">–</span>
         <time :datetime="documentation.datetimeEnd" class="text-no-wrap">
           {{ $d(toDateTime(documentation.datetimeEnd), "shortTime") }}
         </time>
       </div>
     </div>
-    <span class="text-center">
+    <span :class="{ 'text-right': !largeGrid }">
       {{ documentation.course?.name }}
     </span>
+    <div :class="{ 'd-flex align-center flex-wrap gap': true, 'justify-center': largeGrid }">
+      <person-chip v-for="teacher in documentation.teachers" :person="teacher" />
+    </div>
     <subject-chip
       v-if="documentation.subject"
       :subject="documentation.subject"
@@ -39,15 +46,33 @@ export default {
       return DateTime.fromISO(dateString);
     },
   },
+  computed: {
+    largeGrid() {
+      return this.compact && !this.$vuetify.breakpoint.mobile;
+    }
+  },
 };
 </script>
 
 <style scoped>
 .grid {
   display: grid;
-  grid-template-columns: 1fr max-content 1fr;
+  grid-template-columns: auto auto;
   align-items: center;
   gap: 1em;
+  align-content: start;
+}
+
+.large-grid {
+  grid-template-columns: min-content 1fr 1fr 1fr;
+  align-content: unset;
+}
+
+.grid:not(.large-grid):nth-child(odd) {
+  justify-self: start;
+}
+.grid:not(.large-grid):nth-child(even) {
+  justify-self: end;
 }
 
 .subject {
@@ -57,4 +82,8 @@ export default {
 .fit-content {
   width: fit-content;
 }
+
+.gap {
+  gap: 0.25em;
+}
 </style>