Beautify action bar

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -15,11 +15,19 @@
   >
     <template #additionalActions="{ attrs, on }">
       <coursebook-filters v-model="filters" />
-      <absence-reason-buttons
-        v-if="pageType === 'absences' && selectedParticipations.length"
-        allow-empty
-        empty-value="present"
-      />
+      <v-expand-transition>
+        <v-card outlined class="full-width" v-show="pageType === 'absences' && selectedParticipations.length">
+          <v-card-text>
+            {{ $tc('alsijil.coursebook.absences.action_for_selected', selectedParticipations.length) }}
+          </v-card-text>
+          <v-card-actions>
+            <absence-reason-buttons
+              allow-empty
+              empty-value="present"
+            />
+          </v-card-actions>
+        </v-card>
+      </v-expand-transition>
     </template>
 
     <template #item="{ item, lastQuery }">

aleksis/apps/alsijil/frontend/messages/en.json

@@ -80,7 +80,10 @@
       },
       "present_number": "{present}/{total} present",
       "no_data": "No lessons for the selected groups and courses in this period",
-      "no_results": "No search results for {search}"
+      "no_results": "No search results for {search}",
+      "absences": {
+        "action_for_selected": "Action for one selected participation | Action for {count} selected participations"
+      }
     }
   },
   "actions": {