Auto-shrinking pagination. Various Teen Core Club curations.

This commit is contained in:
ThePendulum 2020-07-05 04:10:35 +02:00
parent c47fae3a1b
commit f4ef2d4cc2
109 changed files with 98 additions and 91 deletions

View File

@ -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}`"

View File

@ -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));

View File

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

View File

@ -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')}`"

View File

@ -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,

View File

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

View File

@ -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() {

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -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: {

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 960 KiB

After

Width:  |  Height:  |  Size: 737 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 960 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 79 KiB

Some files were not shown because too many files have changed in this diff Show More