Merge branch '302-add-time-slot-numbers-to-start-of-documentation-rows' into 'master'

Resolve "Add time slot numbers to start of documentation rows"

Closes #302

See merge request !390

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

@@ -38,9 +38,13 @@ query documentationsForCoursebook(
     amends {
       id
       title
+      slotNumberStart
+      slotNumberEnd
       amends {
         id
         title
+        slotNumberStart
+        slotNumberEnd
         teachers {
           id
           shortName

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

@@ -7,6 +7,27 @@ import PersonChip from "aleksis.core/components/person/PersonChip.vue";
   <div :class="{ 'full-width grid': true, 'large-grid': largeGrid }">
     <div class="d-flex">
       <documentation-status v-if="compact" v-bind="documentationPartProps" />
+      <div
+        v-if="documentation.amends?.slotNumberStart"
+        :class="{
+          'text-h5 mr-3 d-flex flex-column justify-center slot-number': true,
+          'ml-2 slot-number-mobile': !largeGrid,
+        }"
+      >
+        <span
+          v-if="
+            documentation.amends?.slotNumberStart ==
+            documentation.amends?.slotNumberEnd
+          "
+        >
+          {{ documentation.amends?.slotNumberStart }}.
+        </span>
+        <span v-else>
+          {{ documentation.amends?.slotNumberStart }}.–{{
+            documentation.amends?.slotNumberEnd
+          }}.
+        </span>
+      </div>
       <div :class="{ 'text-right d-flex flex-column fit-content': largeGrid }">
         <time :datetime="documentation.datetimeStart" class="text-no-wrap">
           {{ $d(toDateTime(documentation.datetimeStart), "shortTime") }}
@@ -148,4 +169,15 @@ export default {
 .gap {
   gap: 0.25em;
 }
+
+.slot-number {
+  font-size: 1.6rem !important;
+  font-weight: 300;
+  line-height: 1.6rem;
+}
+
+.slot-number-mobile {
+  font-size: 1.4rem !important;
+  line-height: 1.4rem;
+}
 </style>