Resolve "Follow-up from "Resolve "Add absence overview page"""

Closes #308

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

@@ -53,18 +53,23 @@ import TextNoteCard from "../personal_notes/TextNoteCard.vue";
             <template #append>
               <span
                 >:
-                <span>
-                  {{
-                    participations
-                      .slice(0, 5)
-                      .map((participation) => participation.person.firstName)
-                      .join(", ")
-                  }}
-                </span>
-                <span v-if="participations.length > 5">
-                  <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-                  +{{ participations.length - 5 }}
-                  <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+                <template v-if="!$vuetify.breakpoint.mobile">
+                  <span>
+                    {{
+                      participations
+                        .slice(0, 5)
+                        .map((participation) => participation.person.firstName)
+                        .join(", ")
+                    }}
+                  </span>
+                  <span v-if="participations.length > 5">
+                    <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+                    +{{ participations.length - 5 }}
+                    <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+                  </span>
+                </template>
+                <span v-else>
+                  {{ `${participations.length} ${$t('alsijil.coursebook.notes.persons')}` }}
                 </span>
               </span>
             </template>
@@ -95,18 +100,23 @@ import TextNoteCard from "../personal_notes/TextNoteCard.vue";
           <template #append>
             <span
               >:
-              <span>
-                {{
-                  participations
-                    .slice(0, 5)
-                    .map((participation) => participation.person.firstName)
-                    .join(", ")
-                }}
-              </span>
-              <span v-if="participations.length > 5">
-                <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-                +{{ participations.length - 5 }}
-                <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+              <template v-if="!$vuetify.breakpoint.mobile">
+                <span>
+                  {{
+                    participations
+                      .slice(0, 5)
+                      .map((participation) => participation.person.firstName)
+                      .join(", ")
+                  }}
+                </span>
+                <span v-if="participations.length > 5">
+                  <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+                  +{{ participations.length - 5 }}
+                  <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+                </span>
+              </template>
+              <span v-else>
+                {{ `${participations.length} ${$t('alsijil.coursebook.notes.persons')}` }}
               </span>
             </span>
           </template>
@@ -135,17 +145,23 @@ import TextNoteCard from "../personal_notes/TextNoteCard.vue";
           <template #append>
             <span
               >:
-              {{
-                tardyParticipations
-                  .slice(0, 5)
-                  .map((participation) => participation.person.firstName)
-                  .join(", ")
-              }}
-
-              <span v-if="tardyParticipations.length > 5">
-                <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-                +{{ tardyParticipations.length - 5 }}
-                <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+              <template v-if="!$vuetify.breakpoint.mobile">
+                <span>
+                  {{
+                    tardyParticipations
+                      .slice(0, 5)
+                      .map((participation) => participation.person.firstName)
+                      .join(", ")
+                  }}
+                </span>
+                <span v-if="tardyParticipations.length > 5">
+                  <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+                  +{{ tardyParticipations.length - 5 }}
+                  <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+                </span>
+              </template>
+              <span v-else>
+                {{ `${tardyParticipations.length} ${$t('alsijil.coursebook.notes.persons')}` }}
               </span>
             </span>
           </template>