Hiding scroll buttons on small screens. Fixed channel count on overview.

This commit is contained in:
ThePendulum 2020-06-28 03:58:16 +02:00
parent 4bf4183a2a
commit 087d349cec
5 changed files with 58 additions and 20 deletions

View File

@ -52,6 +52,22 @@
v-if="entity.children.length > 0"
class="children-container"
>
<div
v-if="expanded"
class="expand noselect"
@click="expanded = !expanded"
>
<Icon
v-show="expanded"
icon="arrow-up3"
/>
<Icon
v-show="!expanded"
icon="arrow-down3"
/>
</div>
<div
class="scroll-container"
:class="{ expanded }"
@ -83,7 +99,7 @@
</div>
<div
v-if="(scrollable && entity.children.length > 1) || expanded"
v-if="scrollable || expanded"
class="expand noselect"
@click="expanded = !expanded"
>
@ -195,6 +211,8 @@ export default {
</script>
<style lang="scss" scoped>
@import 'theme';
.info {
height: 2.5rem;
display: flex;
@ -202,6 +220,7 @@ export default {
padding: 1rem;
background: var(--profile);
border-bottom: solid 1px var(--lighten-hint);
box-shadow: inset 0 0 3px var(--darken);
.link {
display: flex;
@ -337,4 +356,10 @@ export default {
padding: 1rem 1rem 1rem 2rem;
background: linear-gradient(to left, var(--profile) 50%, transparent);
}
@media(max-width: $breakpoint) {
.scroll {
display: none;
}
}
</style>

View File

@ -6,7 +6,7 @@
>
<input
v-model="query"
:placeholder="`Find ${siteCount} sites in ${networks.length} networks`"
:placeholder="`Find ${channelCount} channels in ${entities.length} networks`"
class="query"
@input="searchEntities"
>
@ -35,9 +35,9 @@
class="entity-tiles"
>
<Entity
v-for="network in networks"
:key="`network-tile-${network.slug}`"
:entity="network"
v-for="entity in entities"
:key="`entity-tile-${entity.slug}`"
:entity="entity"
/>
</div>
</div>
@ -54,7 +54,7 @@ async function searchEntities() {
}
async function mounted() {
this.networks = await this.$store.dispatch('fetchEntities', {
this.entities = await this.$store.dispatch('fetchEntities', {
type: 'network',
entitySlugs: [
'bamvisions',
@ -62,11 +62,12 @@ async function mounted() {
'legalporno',
],
});
this.pageTitle = 'Networks';
}
function siteCount() {
return this.networks.map(network => network.children).flat().length;
function channelCount() {
return this.entities.reduce((acc, entity) => acc + entity.childrenTotal, 0);
}
export default {
@ -77,12 +78,12 @@ export default {
return {
query: '',
pageTitle: null,
networks: [],
entities: [],
searchResults: [],
};
},
computed: {
siteCount,
channelCount,
},
mounted,
methods: {

View File

@ -146,7 +146,7 @@ export default {
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, .33fr));
grid-template-columns: repeat(auto-fill, minmax(23rem, .33fr));
grid-gap: 1rem;
margin: 0 0 1.5rem 0;
}

View File

@ -122,8 +122,15 @@ function curateEntity(entity, parent, releases) {
children: [],
};
if (entity.children) {
if (entity.children.nodes) {
curatedEntity.children = entity.children.nodes.map(childEntity => curateEntity(childEntity, curatedEntity));
}
curatedEntity.childrenTotal = entity.children.totalCount;
}
if (entity.parent || parent) curatedEntity.parent = curateEntity(entity.parent || parent);
if (entity.children) curatedEntity.children = entity.children.map(childEntity => curateEntity(childEntity, curatedEntity));
if (releases) curatedEntity.releases = releases.map(release => curateRelease(release));
return curatedEntity;

View File

@ -33,9 +33,10 @@ function initEntitiesActions(store, _router) {
slug
url
hasLogo
children: childEntities(
children: childEntitiesConnection(
orderBy: [PRIORITY_DESC, NAME_ASC],
) {
nodes {
id
name
slug
@ -44,6 +45,7 @@ function initEntitiesActions(store, _router) {
priority
hasLogo
}
}
parent {
id
name
@ -147,6 +149,9 @@ function initEntitiesActions(store, _router) {
type
url
hasLogo
children: childEntitiesConnection {
totalCount
}
}
}
`, {