use lists for grid components where appropriate

src/views/HomePage.vue

@@ -17,10 +17,10 @@
               </template>
 
               <template v-slot:default="{ items }">
-                <app-auto-grid :sizes="{ md: 2, lg: 3, xl: 3 }">
-                  <div v-for="recording in items" :key="recording.id">
-                    <RecordingPreview :recording="recording" class="mb-3"/>
-                  </div>
+                <app-auto-grid :sizes="{ md: 2, lg: 3, xl: 3 }" tag="ol">
+                  <li v-for="recording in items" :key="recording.id">
+                    <RecordingPreview :recording="recording"/>
+                  </li>
                 </app-auto-grid>
               </template>
             </app-paginator>
@@ -56,10 +56,10 @@
           </template>
 
           <template v-slot:default="{ items }">
-            <app-auto-grid :sizes="{ xs: 2, sm: 3, md: 4, lg: 5, xl: 6 }">
-              <div v-for="series in items" :key="series.id">
+            <app-auto-grid :sizes="{ xs: 2, sm: 3, md: 4, lg: 5, xl: 6 }" tag="ol">
+              <li v-for="series in items" :key="series.id">
                 <SeriesPreview :series="series"/>
-              </div>
+              </li>
             </app-auto-grid>
           </template>
         </app-paginator>

src/views/RecordingPage.vue

@@ -42,10 +42,10 @@
               </template>
 
               <template v-slot:default="{ items }">
-                <app-auto-grid>
-                  <div v-for="recording in items" :key="recording.id">
+                <app-auto-grid tag="ol">
+                  <li v-for="recording in items" :key="recording.id">
                     <RecordingPreview :recording="recording" class="mb-3"/>
-                  </div>
+                  </li>
                 </app-auto-grid>
               </template>
             </app-paginator>

src/views/SearchPage.vue

@@ -9,10 +9,10 @@
                        no-loader :min-height="0" :page-size="recordingCollection.count"
                        :filters="recordingFilters" id="recordings">
           <template v-slot:default="{ items, isLoading }">
-            <app-auto-grid :default-size="recordingCollection.columns" v-if="items.length > 0">
-              <div v-for="recording in items" :key="recording.id">
-                <RecordingPreview :recording="recording" class="mb-3"/>
-              </div>
+            <app-auto-grid :default-size="recordingCollection.columns" v-if="items.length > 0" tag="ol">
+              <li v-for="recording in items" :key="recording.id">
+                <RecordingPreview :recording="recording"/>
+              </li>
             </app-auto-grid>
             <div class="content center" style="max-width: 600px; margin: 0 auto;"
                  v-else-if="items.length === 0 && !isLoading">
@@ -23,7 +23,7 @@
           <template v-slot:footer="{ isLoading }">
             <div style="height: 100px; position: relative">
               <app-spinner-area v-if="isLoading"/>
-              <app-paginator-nav class="mt-3"/>
+              <app-paginator-nav class="mt-5"/>
             </div>
           </template>
         </app-paginator>

src/views/SeriesPage.vue

@@ -26,10 +26,10 @@
               </template>
 
               <template v-slot:default="{ items, isLoading }">
-                <app-auto-grid :default-size="recordingCollection.columns" v-if="items.length > 0">
-                  <div v-for="recording in items" :key="recording.id">
-                    <RecordingPreview :recording="recording" class="mb-3"/>
-                  </div>
+                <app-auto-grid :default-size="recordingCollection.columns" v-if="items.length > 0" tag="ol">
+                  <li v-for="recording in items" :key="recording.id">
+                    <RecordingPreview :recording="recording"/>
+                  </li>
                 </app-auto-grid>
                 <div class="content" v-else-if="items.length === 0 && !isLoading">
                   <p>{{ $t('series_page.no_recordings') }}</p>
@@ -53,10 +53,10 @@
               </template>
 
               <template v-slot:default="{ items }">
-                <app-auto-grid :default-size="1">
-                  <div v-for="broadcast in items" :key="broadcast.id">
+                <app-auto-grid :default-size="1" tag="ol">
+                  <li v-for="broadcast in items" :key="broadcast.id">
                     <BroadcastPreview :broadcast="broadcast" :series="series"/>
-                  </div>
+                  </li>
                 </app-auto-grid>
               </template>
             </app-paginator>