diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationSummary.vue b/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationSummary.vue index f1e346316aaa719964f88d429e40ef97d019ea2e..17a7795e697caeed9346c3aa13fe6b10e2f54c28 100644 --- a/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationSummary.vue +++ b/aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationSummary.vue @@ -41,26 +41,34 @@ class="px-0" :key="lesson.id" > - <!-- TODO: We should extract this display & share it --> - <time :datetime="lesson.datetimeStart" class="text-no-wrap"> - {{ - $d($parseISODate(lesson.datetimeStart), "shortWithWeekday") - }} - </time> - <span>(</span> - <time :datetime="lesson.datetimeStart" class="text-no-wrap"> - {{ $d($parseISODate(lesson.datetimeStart), "shortTime") }} - </time> - <span>-</span> - <time :datetime="lesson.datetimeEnd" class="text-no-wrap"> - {{ $d($parseISODate(lesson.datetimeEnd), "shortTime") }} - </time> - <span>)</span> - <v-spacer /> - <div class="pr-2"> - {{ lesson.course?.name }} - </div> - <subject-chip :subject="lesson.subject" /> + <v-row> + <!-- TODO: We should extract this display & share it --> + <v-col cols="3"> + <time :datetime="lesson.datetimeStart" class="text-no-wrap"> + {{ + $d( + $parseISODate(lesson.datetimeStart), + "shortWithWeekday", + ) + }} + </time> + </v-col> + <v-col cols="3"> + <time :datetime="lesson.datetimeStart" class="text-no-wrap"> + {{ $d($parseISODate(lesson.datetimeStart), "shortTime") }} + </time> + <span> - </span> + <time :datetime="lesson.datetimeEnd" class="text-no-wrap"> + {{ $d($parseISODate(lesson.datetimeEnd), "shortTime") }} + </time> + </v-col> + <v-col cols="3"> + {{ lesson.course?.name }} + </v-col> + <v-col cols="3"> + <subject-chip :subject="lesson.subject" /> + </v-col> + </v-row> </v-list-item> </v-expansion-panel-content> </v-expansion-panel>