Resolve "Make substitutions table more compact"

Closes #271 (closed)

aleksis/apps/chronos/frontend/components/Substitutions.vue

@@ -17,17 +17,23 @@ import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.v
     :show-select="false"
     :enable-create="false"
     :enable-edit="false"
+    :dense="true"
+    :items-per-page="-1"
+    :mobile-breakpoint="0"
   >
     <template #title>
-      <v-row class="d-flex align-center pt-2 pa-2">
-        <v-card-title class="text-h4">
-          {{ $d(new Date(date), "dateWithWeekday") }}
-        </v-card-title>
+      <v-card-title class="full-width flex-nowrap pb-0">
+        {{
+          $d(
+            new Date(date),
+            $vuetify.breakpoint.xs ? "shortWithWeekday" : "dateWithWeekday",
+          )
+        }}
         <v-spacer />
         <primary-action-button
-          class="mr-4"
           i18n-key="chronos.substitutions.print"
           icon-text="$print"
+          :icon="$vuetify.breakpoint.xs"
           :to="{
             name: 'chronos.printSubstitutionsForDate',
             params: {
@@ -35,39 +41,58 @@ import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.v
             },
           }"
         />
-      </v-row>
-      <v-card-text>
-        <div v-if="affectedTeachers.length > 0">
-          <strong>
-            {{ $t("chronos.substitutions.affected_teachers") }}:
-          </strong>
-          <person-chip
-            v-for="teacher in affectedTeachers"
-            :key="teacher.id"
-            class="ma-1"
-            :person="teacher"
-            :to="{
-              name: 'chronos.timetableWithId',
-              params: {
-                type: 'person',
-                id: teacher.id,
-              },
-            }"
-          />
-        </div>
-        <div v-if="affectedGroups.length > 0">
-          <strong> {{ $t("chronos.substitutions.affected_groups") }}: </strong>
-          <!-- TODO: Link to group-timetable as well -->
-          <!-- as soon as it becomes possible to resolve a -->
-          <!-- group-timetable from the lesson-event group too. -->
-          <group-chip
-            v-for="group in affectedGroups"
-            class="ma-1"
-            :key="group.id"
-            :group="group"
-            format="short"
-          />
-        </div>
+      </v-card-title>
+
+      <v-card-text
+        v-if="affectedTeachers.length > 0 || affectedGroups.length > 0"
+        class="pb-0"
+      >
+        <v-expansion-panels accordion multiple flat>
+          <v-expansion-panel v-if="affectedTeachers.length > 0">
+            <v-expansion-panel-header class="px-0">
+              <strong>{{
+                $t("chronos.substitutions.affected_teachers")
+              }}</strong>
+            </v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <person-chip
+                v-for="teacher in affectedTeachers"
+                :key="teacher.id"
+                class="ma-1"
+                :person="teacher"
+                small
+                :to="{
+                  name: 'chronos.timetableWithId',
+                  params: {
+                    type: 'person',
+                    id: teacher.id,
+                  },
+                }"
+              />
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+
+          <v-expansion-panel v-if="affectedGroups.length > 0">
+            <v-expansion-panel-header class="px-0">
+              <strong>
+                {{ $t("chronos.substitutions.affected_groups") }}</strong
+              >
+            </v-expansion-panel-header>
+            <!-- TODO: Link to group-timetable as well -->
+            <!-- as soon as it becomes possible to resolve a -->
+            <!-- group-timetable from the lesson-event group too. -->
+            <v-expansion-panel-content class="px-0">
+              <group-chip
+                v-for="group in affectedGroups"
+                class="ma-1"
+                :key="group.id"
+                :group="group"
+                format="short"
+                small
+              />
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+        </v-expansion-panels>
       </v-card-text>
     </template>
     <!-- TODO: Extract strike -> bold || normal pattern into own -->
@@ -140,7 +165,7 @@ import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.v
       }}</span>
     </template>
     <template #notes="{ item: { cancelled, notes } }">
-      <v-chip v-if="cancelled" color="green" text-color="white">
+      <v-chip v-if="cancelled" color="green" text-color="white" small>
         {{ $t("chronos.substitutions.cancelled") }}
       </v-chip>
       {{ notes }}
@@ -233,4 +258,8 @@ export default {
 .strike-through {
   text-decoration: line-through;
 }
+.v-expansion-panel-content__wrap {
+  padding: 0;
+  padding-bottom: 4px;
+}
 </style>