Auto-shrinking pagination. Various Teen Core Club curations.

assets/components/entities/entity.vue

@@ -38,6 +38,13 @@
 				<Icon icon="share2" />
 			</a>
 
+			<ul class="tags">
+				<li
+					v-for="tag in entity.tags"
+					:key="`tag-${tag.slug}`"
+				>{{ tag.name }}</li>
+			</ul>
+
 			<router-link
 				v-if="entity.parent"
 				:to="`/${entity.parent.type}/${entity.parent.slug}`"

assets/components/networks/networks.vue

@@ -144,6 +144,12 @@ export default {
     padding: 1rem 0;
 }
 
+@media(max-width: $breakpoint2) {
+    .entity-tiles {
+        grid-gap: .5rem;
+    }
+}
+
 @media(max-width: $breakpoint0) {
     .entity-tiles {
         grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));

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;
 }

assets/components/releases/release.vue

@@ -219,7 +219,7 @@
 			</div>
 
 			<div class="row">
-				<span class="row-label">Indexed</span>
+				<span class="row-label">Added</span>
 
 				<router-link
 					:to="`/added/${formatDate(release.createdAt, 'YYYY/MM/DD')}`"

assets/components/releases/tile-details.vue

@@ -83,9 +83,16 @@ export default {
         margin: 0 .25rem 0 0;
     }
 
-	&.new {
-		border-right: solid 5px var(--primary);
+	/*
+	&.new .date::before {
+		content: '';
+		width: .5rem;
+		height: .5rem;
+		border-radius: 50%;
+		margin: 0 .25rem 0 0;
+		background: var(--primary);
 	}
+	*/
 }
 
 .site,

assets/components/releases/tile.vue

@@ -150,7 +150,8 @@ export default {
 		position: absolute;
 		top: 0;
 		right: 0;
-		padding: .15rem .25rem;
+		padding: .15rem .25rem .15rem .3rem;
+		border-radius: 0 0 0 .5rem;
 		color: var(--text-light);
 		background: var(--primary);
 		font-size: .8rem;

assets/components/scroll/scroll.vue

@@ -77,7 +77,7 @@ function mounted() {
 	window.addEventListener('resize', this.updateScroll);
 
 	this.updateScroll();
-	setTimeout(() => this.updateScroll(), 50); // allow CSS to calculate
+	setTimeout(() => this.updateScroll(), 150); // allow CSS to calculate
 }
 
 function beforeDestroy() {

assets/components/tags/tag.vue

@@ -1,24 +1,21 @@
 <template>
 	<div
 		v-if="tag"
-		class="content"
+		class="tag content"
 	>
-		<div
-			class="tag"
-			:class="{ nomedia: !hasMedia }"
-		>
-			<div class="header">
-				<h2 class="title">
-					<Icon icon="price-tag4" />
-					{{ tag.name }}
-				</h2>
+		<div class="header">
+			<h2 class="title">
+				<Icon icon="price-tag4" />
+				{{ tag.name }}
+			</h2>
+		</div>
 
-				<div
-					v-if="description"
-					class="description header-description"
-					v-html="description"
-				/>
-			</div>
+		<div class="content-inner">
+			<div
+				v-if="description"
+				class="description header-description"
+				v-html="description"
+			/>
 
 			<Scroll
 				v-if="hasMedia"
@@ -32,10 +29,8 @@
 				/>
 			</Scroll>
 
-			<div class="content-inner">
-				<FilterBar :fetch-releases="fetchReleases" />
-				<Releases :releases="tag.releases" />
-			</div>
+			<FilterBar :fetch-releases="fetchReleases" />
+			<Releases :releases="tag.releases" />
 		</div>
 	</div>
 </template>
@@ -111,8 +106,8 @@ export default {
     }
 }
 
-.header .description,
-.header .description p {
+.description,
+.description p {
     padding: 0;
     margin: 0;
 }
@@ -128,7 +123,7 @@ export default {
 }
 
 .title {
-    padding: 1rem;
+    padding: .75rem 1rem;
     margin: 0;
     flex-shrink: 0;
     text-transform: capitalize;
@@ -141,7 +136,9 @@ export default {
 }
 
 .description {
-	padding: 0 1rem 1rem 1rem;
+	padding: 0 1rem .5rem 1rem;
     line-height: 1.5;
+	color: var(--text-light);
+	background: var(--profile);
 }
 </style>

assets/components/tags/tags.vue

@@ -147,7 +147,7 @@ export default {
 .tiles {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(23rem, .33fr));
-    grid-gap: .5rem;
+    grid-gap: 1rem;
     margin: 0 0 1.5rem 0;
 }
 
@@ -165,12 +165,13 @@ export default {
 @media(max-width: $breakpoint) {
     .tiles {
         grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+		grid-gap: .5rem;
     }
 }
 
 @media(max-width: $breakpoint0) {
     .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
     }
 }
 </style>