Fixed card pagination.

Refs #156
The4thLaw · Mar 18, 2024 · 093ee38 · 093ee38
1 parent f67471d
commit 093ee38
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/source/demyo-vue-frontend/src/components/ItemCardPagination.vue b/source/demyo-vue-frontend/src/components/ItemCardPagination.vue
@@ -1,10 +1,10 @@
 <template>
 	<v-list-item v-if="pageCount > 1" class="c-ItemCardPagination">
 		<!-- Custom pagination because vuetify doesn't provide no-count pagination -->
-		<v-btn :disabled="!hasPreviousPage" text icon @click.stop="$emit('prev-page')">
+		<v-btn :disabled="!hasPreviousPage" variant="text" icon @click.stop="$emit('prev-page')">
 			<v-icon>mdi-chevron-left</v-icon>
 		</v-btn>
-		<v-btn :disabled="!hasNextPage" text icon @click.stop="$emit('next-page')">
+		<v-btn :disabled="!hasNextPage" variant="text" icon @click.stop="$emit('next-page')">
 			<v-icon>mdi-chevron-right</v-icon>
 		</v-btn>
 	</v-list-item>
@@ -34,12 +34,15 @@ export default {
 </script>
 
 <style lang="less">
-// Align the pagination buttons
+// Align the pagination buttons: have the pagination take the full width,
+// its content as well, and the buttons spaced evenly
 .c-ItemCardPagination {
-	justify-content: space-around;
+	display: flex;
 
-	&.v-list-item::after {
-		display: none;
+	.v-list-item__content {
+		flex: 1;
+		display: flex;
+		justify-content: space-around;
 	}
 }
 </style>