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"
-	>
-		<div
-			class="tag"
-			:class="{ nomedia: !hasMedia }"
+		class="tag content"
 	>
 		<div class="header">
 			<h2 class="title">
 				<Icon icon="price-tag4" />
 				{{ tag.name }}
 			</h2>
+		</div>
 
+		<div class="content-inner">
 			<div
 				v-if="description"
 				class="description header-description"
 				v-html="description"
 			/>
-			</div>
 
 			<Scroll
 				v-if="hasMedia"
@@ -32,12 +29,10 @@
 				/>
 			</Scroll>
 
-			<div class="content-inner">
 			<FilterBar :fetch-releases="fetchReleases" />
 			<Releases :releases="tag.releases" />
 		</div>
 	</div>
-	</div>
 </template>
 
 <script>
@@ -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>

assets/js/curate.js

@@ -80,47 +80,14 @@ function curateRelease(release) {
 	return curatedRelease;
 }
 
-function curateSite(site, network) {
-	const curatedSite = {
-		id: site.id,
-		name: site.name,
-		slug: site.slug,
-		url: site.url,
-		independent: site.independent,
-	};
-
-	if (site.releases) curatedSite.releases = site.releases.map(release => curateRelease(release));
-	if (site.network || network) curatedSite.network = site.network || network;
-	if (site.tags) curatedSite.tags = site.tags.map(({ tag }) => tag);
-
-	return curatedSite;
-}
-
-function curateNetwork(network, releases) {
-	const curatedNetwork = {
-		...network,
-		id: network.id,
-		name: network.name,
-		slug: network.slug,
-		url: network.url,
-		networks: [],
-	};
-
-	if (network.parent) curatedNetwork.parent = curateNetwork(network.parent);
-	if (network.sites) curatedNetwork.sites = network.sites.map(site => curateSite(site, curatedNetwork));
-	if (network.networks) curatedNetwork.networks = network.networks.map(subNetwork => curateNetwork(subNetwork));
-	if (network.studios) curatedNetwork.studios = network.studios;
-	if (releases) curatedNetwork.releases = releases.map(release => curateRelease(release));
-
-	return curatedNetwork;
-}
-
 function curateEntity(entity, parent, releases) {
 	const curatedEntity = {
 		...entity,
 		children: [],
 	};
 
+	if (entity.tags) curatedEntity.tags = entity.tags.map(({ tag }) => tag);
+
 	if (entity.children) {
 		if (entity.children.nodes) {
 			curatedEntity.children = entity.children.nodes.map(childEntity => curateEntity(childEntity, curatedEntity));
@@ -151,7 +118,5 @@ export {
 	curateActor,
 	curateEntity,
 	curateRelease,
-	curateSite,
-	curateNetwork,
 	curateTag,
 };

assets/js/entities/actions.js

@@ -34,6 +34,13 @@ function initEntitiesActions(store, _router) {
                     url
 					independent
 					hasLogo
+					tags: entitiesTags {
+						tag {
+							id
+							name
+							slug
+						}
+					}
 					children: childEntitiesConnection(
                         orderBy: [PRIORITY_DESC, NAME_ASC],
 						filter: {

assets/js/store.js

@@ -5,8 +5,8 @@ import initUiStore from './ui/ui';
 import initAuthStore from './auth/auth';
 import initReleasesStore from './releases/releases';
 import initEntitiesStore from './entities/entities';
-import initSitesStore from './sites/sites';
-import initNetworksStore from './networks/networks';
+// import initSitesStore from './sites/sites';
+// import initNetworksStore from './networks/networks';
 import initActorsStore from './actors/actors';
 import initTagsStore from './tags/tags';
 
@@ -20,8 +20,8 @@ function initStore(router) {
 	store.registerModule('releases', initReleasesStore(store, router));
 	store.registerModule('actors', initActorsStore(store, router));
 	store.registerModule('entities', initEntitiesStore(store, router));
-	store.registerModule('sites', initSitesStore(store, router));
-	store.registerModule('networks', initNetworksStore(store, router));
+	// store.registerModule('sites', initSitesStore(store, router));
+	// store.registerModule('networks', initNetworksStore(store, router));
 	store.registerModule('tags', initTagsStore(store, router));
 
 	return store;