Create one-line mode for LessonCards for Minitables

aleksis/apps/lesrooster/frontend/components/timetable_management/LessonCard.vue

@@ -21,6 +21,11 @@ export default defineComponent({
       required: false,
       default: () => [],
     },
+    oneLine: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     subject() {
@@ -69,8 +74,12 @@ export default defineComponent({
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <div v-if="!loading" class="d-flex flex-column align-center my-1">
-      <v-card-title
+    <div
+      v-if="!loading"
+      :class="{ 'd-flex align-center my-1': true, 'flex-column': !oneLine }"
+    >
+      <component
+        :is="oneLine ? 'div' : 'v-card-title'"
         class="color d-flex justify-center flex-wrap px-3 py-0 ma-0"
       >
         <span>
@@ -92,7 +101,7 @@ export default defineComponent({
         >
           {{ "course" in lesson ? lesson.course.name : lesson.name }}
         </v-card-subtitle>
-      </v-card-title>
+      </component>
       <v-card-subtitle
         class="color pa-0 ma-0 d-flex flex-wrap justify-center small-gap"
       >

aleksis/apps/lesrooster/frontend/components/timetable_management/timetables/MiniTimeTable.vue

@@ -136,6 +136,7 @@ export default defineComponent({
           v-for="lesson in lessonsPerSlot[weekday][period]"
           :lesson="lesson"
           :key="lesson.id"
+          one-line
         />
       </div>
     </template>
@@ -153,7 +154,7 @@ export default defineComponent({
 .timetable {
   display: grid;
   grid-template: v-bind(gridTemplate);
-  gap: 1em;
+  gap: 0.7em;
 }
 
 .timetable > * {
@@ -162,6 +163,6 @@ export default defineComponent({
 }
 
 .gap-small {
-  gap: 0.4em;
+  gap: 0.15em;
 }
 </style>