Auto-shrinking pagination. Various Teen Core Club curations.

assets/components/pagination/pagination.vue

@@ -26,14 +26,28 @@
 			<span class="pagination-button cursor disabled"><Icon icon="arrow-left" /></span>
 		</span>
 
-		<span class="pages">
+		<span class="pages pages-before">
 			<router-link
-				v-for="pageX in pageCount"
+				v-for="pageX in pageNumber - 1"
 				:key="`page-${pageX}`"
-				:to="{ params: { pageNumber: pageX } }"
-				:class="{ active: pageX === pageNumber }"
+				:to="{ params: { pageNumber: pageNumber - pageX } }"
 				class="pagination-button page"
-			> {{ pageX }} </router-link>
+			> {{ pageNumber - pageX }} </router-link>
+		</span>
+
+		<router-link
+			:key="`page-${pageNumber}`"
+			:to="{ params: { pageNumber } }"
+			class="pagination-button page active"
+		> {{ pageNumber }} </router-link>
+
+		<span class="pages pages-after">
+			<router-link
+				v-for="pageX in (pageCount - pageNumber)"
+				:key="`page-${pageX + pageNumber}`"
+				:to="{ params: { pageNumber: pageX + pageNumber } }"
+				class="pagination-button page"
+			> {{ pageX + pageNumber }} </router-link>
 		</span>
 
 		<span
@@ -98,6 +112,8 @@ export default {
 .pagination {
 	display: flex;
 	justify-content: center;
+	overflow: hidden;
+	height: 3rem;
 }
 
 .pagination-top {
@@ -115,6 +131,7 @@ export default {
 	flex-shrink: 0;
 	align-items: center;
 	justify-content: center;
+	margin: .1rem 0 2rem 0;
 	background: var(--background);
 	color: var(--shadow);
 	font-size: 1rem;
@@ -150,7 +167,16 @@ export default {
 	}
 }
 
-.pages,
+.pages {
+	max-width: 10rem;
+	display: inline-flex;
+	flex-wrap: wrap;
+}
+
+.pages-before {
+	flex-direction: row-reverse;
+}
+
 .cursors {
 	flex-shrink: 0;
 }