Using query instead of parameters for tag filter URI. Added generic scrolling component, using for actor photos and entity children. Removed pagination from filter bar.
This commit is contained in:
parent
98c19b560f
commit
8f9eb91b13
|
|
@ -283,10 +283,19 @@
|
|||
</div>
|
||||
|
||||
<div class="actor-content">
|
||||
<Photos
|
||||
<Scroll
|
||||
v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
|
||||
class="scroll-light"
|
||||
>
|
||||
<Photos :actor="actor" />
|
||||
|
||||
<template v-slot:expanded>
|
||||
<Photos
|
||||
class="expanded"
|
||||
:actor="actor"
|
||||
/>
|
||||
</template>
|
||||
</Scroll>
|
||||
|
||||
<FilterBar
|
||||
:fetch-releases="fetchActor"
|
||||
|
|
@ -307,10 +316,11 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Photos from './photos.vue';
|
||||
import Pagination from '../pagination/pagination.vue';
|
||||
import FilterBar from '../header/filter-bar.vue';
|
||||
import Releases from '../releases/releases.vue';
|
||||
import Photos from './photos.vue';
|
||||
import Scroll from '../scroll/scroll.vue';
|
||||
import Gender from './gender.vue';
|
||||
import Social from './social.vue';
|
||||
|
||||
|
|
@ -348,6 +358,7 @@ export default {
|
|||
FilterBar,
|
||||
Pagination,
|
||||
Photos,
|
||||
Scroll,
|
||||
Releases,
|
||||
Gender,
|
||||
Social,
|
||||
|
|
@ -637,9 +648,62 @@ export default {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.expand,
|
||||
.expand {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: .5rem .25rem;
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
fill: $shadow;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $shadow-hint;
|
||||
|
||||
.icon {
|
||||
fill: $shadow-strong;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expand-sidebar:hover {
|
||||
background: $shadow-hint;
|
||||
}
|
||||
|
||||
.expand-header {
|
||||
display: none;
|
||||
|
||||
&:hover {
|
||||
background: $shadow-hint;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-header {
|
||||
display: none;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
background: $profile;
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
fill: $highlight;
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
&:hover .icon {
|
||||
background: $highlight-hint;
|
||||
fill: $text-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint4) {
|
||||
|
|
|
|||
|
|
@ -5,17 +5,17 @@
|
|||
:class="{
|
||||
avatar: !!actor.avatar,
|
||||
empty: actor.photos.length === 0,
|
||||
wide: actor.photos.length > 2
|
||||
}"
|
||||
>
|
||||
<a
|
||||
v-if="actor.avatar"
|
||||
v-show="actor.avatar"
|
||||
:href="`/media/${actor.avatar.path}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="avatar-link photo-link"
|
||||
>
|
||||
<img
|
||||
:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
|
||||
:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
|
||||
:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
|
||||
:title="actor.avatar.copyright && `© ${actor.avatar.copyright}`"
|
||||
|
|
@ -32,9 +32,10 @@
|
|||
class="photo-link"
|
||||
>
|
||||
<img
|
||||
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
|
||||
:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
|
||||
:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
|
||||
:title="photo.copyright && `© ${photo.copyright}`"
|
||||
:title="`© ${photo.copyright || photo.entity.name}`"
|
||||
class="photo"
|
||||
>
|
||||
</a>
|
||||
|
|
@ -63,15 +64,29 @@ export default {
|
|||
@import 'theme';
|
||||
|
||||
.photos {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
border-bottom: solid 1px var(--darken-hint);
|
||||
padding: .5rem 1rem;
|
||||
font-size: 0;
|
||||
overflow-x: scroll;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
|
||||
&.expanded {
|
||||
display: grid;
|
||||
grid-gap: .5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
|
||||
|
||||
.photo-link {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.photo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.empty {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -86,14 +101,18 @@ export default {
|
|||
}
|
||||
|
||||
.photo-link {
|
||||
height: 16rem;
|
||||
flex-shrink: 0;
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
|
||||
.photo {
|
||||
height: 100%;
|
||||
width: 10rem;
|
||||
height: 15rem;
|
||||
box-shadow: 0 0 3px $shadow-weak;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.expand {
|
||||
border-bottom: solid 1px var(--darken-hint);
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint3) {
|
||||
|
|
@ -105,6 +124,16 @@ export default {
|
|||
.avatar-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint0) {
|
||||
.photos.expanded {
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div class="children">
|
||||
<EntityTile
|
||||
v-for="child in entity.children"
|
||||
:key="`child-${child.id}`"
|
||||
:entity="child"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EntityTile from './tile.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EntityTile,
|
||||
},
|
||||
props: {
|
||||
entity: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.children {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
border-bottom: solid 1px var(--darken-hint);
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
|
||||
.tile {
|
||||
width: 15rem;
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
|
||||
grid-gap: 1rem;
|
||||
|
||||
.tile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -47,73 +47,20 @@
|
|||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="content-inner">
|
||||
<div
|
||||
v-if="entity.children.length > 0"
|
||||
class="children-container"
|
||||
ref="content"
|
||||
class="content-inner"
|
||||
>
|
||||
<div
|
||||
v-if="expanded"
|
||||
class="expand noselect"
|
||||
@click="expanded = !expanded"
|
||||
>
|
||||
<Icon
|
||||
v-show="expanded"
|
||||
icon="arrow-up3"
|
||||
<Scroll class="scroll-dark">
|
||||
<Children :entity="entity" />
|
||||
|
||||
<template v-slot:expanded>
|
||||
<Children
|
||||
class="expanded"
|
||||
:entity="entity"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-show="!expanded"
|
||||
icon="arrow-down3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="scroll-container"
|
||||
:class="{ expanded }"
|
||||
>
|
||||
<div
|
||||
class="scroll scroll-left noselect"
|
||||
:class="{ 'scroll-start': scrollAtStart }"
|
||||
@click="scroll('left')"
|
||||
><Icon icon="arrow-left3" /></div>
|
||||
|
||||
<div
|
||||
ref="children"
|
||||
class="children"
|
||||
:class="{ expanded }"
|
||||
@scroll="updateScroll"
|
||||
>
|
||||
<EntityTile
|
||||
v-for="child in entity.children"
|
||||
:key="`child-${child.id}`"
|
||||
:entity="child"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="scroll scroll-right noselect"
|
||||
:class="{ 'scroll-end': scrollAtEnd }"
|
||||
@click="scroll('right')"
|
||||
><Icon icon="arrow-right3" /></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scrollable || expanded"
|
||||
class="expand noselect"
|
||||
@click="expanded = !expanded"
|
||||
>
|
||||
<Icon
|
||||
v-show="expanded"
|
||||
icon="arrow-up3"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-show="!expanded"
|
||||
icon="arrow-down3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Scroll>
|
||||
|
||||
<FilterBar
|
||||
:fetch-releases="fetchEntity"
|
||||
|
|
@ -123,15 +70,25 @@
|
|||
|
||||
<div class="releases">
|
||||
<Releases :releases="entity.releases" />
|
||||
|
||||
<Pagination
|
||||
:items-total="totalCount"
|
||||
:items-per-page="limit"
|
||||
class="pagination-top"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EntityTile from './tile.vue';
|
||||
import Vue from 'vue';
|
||||
|
||||
import FilterBar from '../header/filter-bar.vue';
|
||||
import Pagination from '../pagination/pagination.vue';
|
||||
import Releases from '../releases/releases.vue';
|
||||
import Children from './children.vue';
|
||||
import Scroll from '../scroll/scroll.vue';
|
||||
|
||||
async function fetchEntity() {
|
||||
const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
|
||||
|
|
@ -146,68 +103,41 @@ async function fetchEntity() {
|
|||
this.totalCount = totalCount;
|
||||
|
||||
this.pageTitle = entity.name;
|
||||
}
|
||||
|
||||
function updateScroll() {
|
||||
this.scrollable = this.$refs.children.scrollWidth > this.$refs.children.clientWidth;
|
||||
this.scrollAtStart = this.$refs.children.scrollLeft === 0;
|
||||
this.scrollAtEnd = this.$refs.children.scrollWidth - this.$refs.children.clientWidth === this.$refs.children.scrollLeft;
|
||||
}
|
||||
|
||||
function scroll(direction) {
|
||||
if (direction === 'right') {
|
||||
this.$refs.children.scrollLeft = this.$refs.children.scrollLeft + this.$refs.children.clientWidth - 100;
|
||||
}
|
||||
|
||||
if (direction === 'left') {
|
||||
this.$refs.children.scrollLeft = this.$refs.children.scrollLeft - this.$refs.children.clientWidth + 100;
|
||||
}
|
||||
Vue.nextTick(() => {
|
||||
this.$refs.content.scrollTop = 0;
|
||||
});
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
await this.fetchEntity();
|
||||
|
||||
this.updateScroll();
|
||||
window.addEventListener('resize', this.updateScroll);
|
||||
}
|
||||
|
||||
function beforeDestroy() {
|
||||
window.removeEventListener('resize', this.updateScroll);
|
||||
}
|
||||
|
||||
async function route() {
|
||||
await this.fetchEntity();
|
||||
|
||||
this.expanded = false;
|
||||
this.updateScroll();
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EntityTile,
|
||||
FilterBar,
|
||||
Pagination,
|
||||
Children,
|
||||
Releases,
|
||||
Scroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
entity: null,
|
||||
totalCount: null,
|
||||
limit: 10,
|
||||
expanded: false,
|
||||
scrollable: true,
|
||||
scrollAtStart: true,
|
||||
scrollAtEnd: false,
|
||||
limit: 20,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: route,
|
||||
},
|
||||
mounted,
|
||||
beforeDestroy,
|
||||
methods: {
|
||||
fetchEntity,
|
||||
updateScroll,
|
||||
scroll,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -250,117 +180,4 @@ export default {
|
|||
.logo-parent {
|
||||
object-position: 100% 50%;
|
||||
}
|
||||
|
||||
.children-container {
|
||||
background: var(--profile);
|
||||
}
|
||||
|
||||
.children {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
border-bottom: solid 1px var(--darken-hint);
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
|
||||
.tile {
|
||||
width: 15rem;
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
|
||||
grid-gap: 1rem;
|
||||
|
||||
.tile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.expand {
|
||||
.icon {
|
||||
fill: var(--lighten);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--lighten-hint);
|
||||
|
||||
.icon {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
position: relative;
|
||||
padding: 0 1rem 0 0;
|
||||
|
||||
&.expanded {
|
||||
padding: 0;
|
||||
|
||||
.scroll {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.scroll-start ,
|
||||
&.scroll-end {
|
||||
/* use over v-show so button stays visible while still hovered */
|
||||
display: none;
|
||||
|
||||
.icon {
|
||||
fill: var(--lighten-weak);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--lighten);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(.scroll-start):not(.scroll-end) {
|
||||
.icon {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-left {
|
||||
left: 0;
|
||||
padding: 1rem 2rem 1rem 1rem;
|
||||
background: linear-gradient(to right, var(--profile) 50%, transparent);
|
||||
}
|
||||
|
||||
.scroll-right {
|
||||
right: 0;
|
||||
padding: 1rem 1rem 1rem 2rem;
|
||||
background: linear-gradient(to left, var(--profile) 50%, transparent);
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.scroll {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-show="expanded"
|
||||
class="expand expanded"
|
||||
@click="$emit('expand', false)"
|
||||
><Icon icon="arrow-up3" /></div>
|
||||
|
||||
<div
|
||||
v-show="!expanded"
|
||||
class="expand"
|
||||
@click="$emit('expand', true)"
|
||||
><Icon icon="arrow-down3" /></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
expanded: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.expand {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: .5rem;
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: var(--shadow-hint);
|
||||
|
||||
.icon {
|
||||
fill: var(--text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expand-dark {
|
||||
.icon {
|
||||
fill: var(--lighten);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--lighten-hint);
|
||||
|
||||
.icon {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -20,11 +20,6 @@
|
|||
>New</router-link>
|
||||
</span>
|
||||
|
||||
<Pagination
|
||||
:items-total="itemsTotal"
|
||||
:items-per-page="itemsPerPage"
|
||||
/>
|
||||
|
||||
<span class="tags">
|
||||
<Filters
|
||||
class="filters-block"
|
||||
|
|
@ -50,7 +45,6 @@
|
|||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import Filters from './filters.vue';
|
||||
import Pagination from '../pagination/pagination.vue';
|
||||
|
||||
function filter(state) {
|
||||
return state.ui.filter;
|
||||
|
|
@ -85,7 +79,6 @@ async function setBatch(newBatch) {
|
|||
export default {
|
||||
components: {
|
||||
Filters,
|
||||
Pagination,
|
||||
},
|
||||
props: {
|
||||
fetchReleases: {
|
||||
|
|
@ -141,7 +134,6 @@ export default {
|
|||
.sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 -1px 0;
|
||||
}
|
||||
|
||||
.filters-block {
|
||||
|
|
@ -160,6 +152,7 @@ export default {
|
|||
display: inline-block;
|
||||
padding: .75rem 1rem 1rem 1rem;
|
||||
border: none;
|
||||
position: relative;
|
||||
font-size: .8rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
|
@ -175,6 +168,17 @@ export default {
|
|||
color: var(--primary);
|
||||
background: var(--background-soft);
|
||||
border-color: var(--crease);
|
||||
|
||||
&::after {
|
||||
/* hide grey border for tab effect, negative margin shows grey crease on mobile */
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--background-soft);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<v-popover class="filters-container">
|
||||
<div class="filters">
|
||||
<Icon icon="filter" />
|
||||
|
||||
<div
|
||||
v-if="selectedTags.length > 0"
|
||||
class="applied"
|
||||
>{{ selectedTags.join(', ') }}</div>
|
||||
>{{ selectedTags.length }} selected</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="applied empty"
|
||||
>Filter by tags</div>
|
||||
|
||||
<Icon icon="filter" />
|
||||
</div>
|
||||
|
||||
<div slot="popover">
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
class="tag"
|
||||
:class="{ selected: selectedTags.includes(tag) }"
|
||||
>
|
||||
<router-link :to="{ params: { tags: getNewRange(tag) } }">
|
||||
<router-link :to="{ query: { ...getNewRange(tag) } }">
|
||||
<Icon
|
||||
icon="checkmark"
|
||||
class="include"
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
</router-link>
|
||||
|
||||
<router-link
|
||||
:to="{ params: { tags: selectedTags.length === 1 && selectedTags.includes(tag) ? 'all' : tag } }"
|
||||
:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag) ? null : { tags: tag }) } }"
|
||||
class="name"
|
||||
>{{ tag }}</router-link>
|
||||
</li>
|
||||
|
|
@ -55,18 +55,18 @@ const tags = [
|
|||
|
||||
function getNewRange(tag) {
|
||||
if (this.selectedTags.includes(tag)) {
|
||||
if (this.selectedTags.length === 1) {
|
||||
return 'all';
|
||||
if (this.selectedTags.length > 1) {
|
||||
return { tags: this.selectedTags.filter(selectedTag => selectedTag !== tag).join(',') };
|
||||
}
|
||||
|
||||
return this.selectedTags.filter(selectedTag => selectedTag !== tag).join('+');
|
||||
return {};
|
||||
}
|
||||
|
||||
return this.selectedTags.concat(tag).join('+');
|
||||
return { tags: this.selectedTags.concat(tag).join(',') };
|
||||
}
|
||||
|
||||
function selectedTags() {
|
||||
return this.$route.params.tags.split('+').filter(selectedTag => selectedTag !== 'all');
|
||||
return this.$route.query.tags ? this.$route.query.tags.split(',') : [];
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
@ -108,14 +108,13 @@ export default {
|
|||
}
|
||||
|
||||
.applied {
|
||||
width: 12rem;
|
||||
background: var(--background);
|
||||
padding: .5rem;
|
||||
border: solid 1px var(--shadow-hint);
|
||||
flex-grow: 1;
|
||||
padding: .75rem .5rem;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: right;
|
||||
|
||||
&.empty {
|
||||
color: var(--shadow);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-inner">
|
||||
<div
|
||||
ref="content"
|
||||
class="content-inner"
|
||||
>
|
||||
<FilterBar
|
||||
:fetch-releases="fetchReleases"
|
||||
:is-home="true"
|
||||
:items-total="totalCount"
|
||||
:items-per-page="limit"
|
||||
:content="$refs.content"
|
||||
/>
|
||||
|
||||
<Releases :releases="releases" />
|
||||
|
|
@ -34,6 +38,8 @@ async function fetchReleases() {
|
|||
|
||||
this.totalCount = totalCount;
|
||||
this.releases = releases;
|
||||
|
||||
this.$refs.content.scrollTop = 0;
|
||||
}
|
||||
|
||||
async function route() {
|
||||
|
|
@ -57,7 +63,7 @@ export default {
|
|||
releases: [],
|
||||
networks: [],
|
||||
pageTitle: null,
|
||||
limit: 15,
|
||||
limit: 20,
|
||||
totalCount: 0,
|
||||
from: null,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -89,7 +89,6 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.pagination {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -99,7 +98,7 @@ export default {
|
|||
}
|
||||
|
||||
.pagination-bottom {
|
||||
margin: 1rem 0 0 0;
|
||||
margin: .5rem 0 1rem 0;
|
||||
}
|
||||
|
||||
.pagination-button {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,236 @@
|
|||
<template>
|
||||
<div class="scroll">
|
||||
<Expand
|
||||
v-if="expanded"
|
||||
:expanded="expanded"
|
||||
class="expand-dark"
|
||||
@expand="(state) => expanded = state"
|
||||
/>
|
||||
|
||||
<Expand
|
||||
v-if="expanded"
|
||||
:expanded="expanded"
|
||||
class="expand-light"
|
||||
@expand="(state) => expanded = state"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-show="enabled && !expanded"
|
||||
class="scroll-button scroll-left noselect"
|
||||
:class="{ 'scroll-start': scrollAtStart }"
|
||||
@click="scroll('left')"
|
||||
><Icon icon="arrow-left3" /></div>
|
||||
|
||||
<slot v-if="!expanded" />
|
||||
|
||||
<slot
|
||||
v-if="expanded"
|
||||
name="expanded"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-show="enabled && !expanded"
|
||||
class="scroll-button scroll-right noselect"
|
||||
:class="{ 'scroll-end': scrollAtEnd }"
|
||||
@click="scroll('right')"
|
||||
><Icon icon="arrow-right3" /></div>
|
||||
|
||||
<Expand
|
||||
v-if="expandable && scrollable"
|
||||
:expanded="expanded"
|
||||
class="expand-dark"
|
||||
@expand="(state) => expanded = state"
|
||||
/>
|
||||
|
||||
<Expand
|
||||
v-if="expandable && scrollable"
|
||||
:expanded="expanded"
|
||||
class="expand-light"
|
||||
@expand="(state) => expanded = state"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Expand from '../expand/expand.vue';
|
||||
|
||||
function updateScroll() {
|
||||
this.scrollable = this.target.scrollWidth > this.target.clientWidth;
|
||||
this.scrollAtStart = this.target.scrollLeft === 0;
|
||||
this.scrollAtEnd = this.target.scrollWidth - this.target.clientWidth === this.target.scrollLeft;
|
||||
}
|
||||
|
||||
function scroll(direction) {
|
||||
if (direction === 'right') {
|
||||
this.target.scrollLeft = this.target.scrollLeft + this.target.clientWidth - 100;
|
||||
}
|
||||
|
||||
if (direction === 'left') {
|
||||
this.target.scrollLeft = this.target.scrollLeft - this.target.clientWidth + 100;
|
||||
}
|
||||
}
|
||||
|
||||
function mounted() {
|
||||
this.target = this.$slots.default[0].elm;
|
||||
|
||||
this.target.addEventListener('scroll', () => {
|
||||
this.updateScroll();
|
||||
});
|
||||
|
||||
window.addEventListener('resize', this.updateScroll);
|
||||
this.updateScroll();
|
||||
}
|
||||
|
||||
function beforeDestroy() {
|
||||
this.target.removeEventListener('scroll', this.updateScroll);
|
||||
window.removeEventListener('resize', this.updateScroll);
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Expand,
|
||||
},
|
||||
props: {
|
||||
enabled: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
expandable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
target: null,
|
||||
scrollable: true,
|
||||
scrollAtStart: true,
|
||||
scrollAtEnd: false,
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
mounted,
|
||||
beforeDestroy,
|
||||
methods: {
|
||||
scroll,
|
||||
updateScroll,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.scroll {
|
||||
background: var(--profile);
|
||||
position: relative;
|
||||
padding: 0 1rem 0 0;
|
||||
|
||||
&.expanded {
|
||||
padding: 0;
|
||||
|
||||
.scroll {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-light {
|
||||
background: var(--background-dim);
|
||||
|
||||
.scroll-button {
|
||||
.icon {
|
||||
fill: var(--darken);
|
||||
}
|
||||
|
||||
&.scroll-start .icon,
|
||||
&.scroll-end .icon {
|
||||
fill: var(--darken-weak);
|
||||
}
|
||||
|
||||
&:hover:not(.scroll-start):not(.scroll-end) .icon {
|
||||
fill: var(--text-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-left {
|
||||
background: linear-gradient(to right, var(--background-dim) 50%, transparent);
|
||||
}
|
||||
|
||||
.scroll-right {
|
||||
background: linear-gradient(to left, var(--background-dim) 50%, transparent);
|
||||
}
|
||||
|
||||
.expand-dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-dark {
|
||||
background: var(--profile);
|
||||
|
||||
.scroll-button {
|
||||
.icon {
|
||||
fill: var(--lighten);
|
||||
}
|
||||
|
||||
&.scroll-start .icon,
|
||||
&.scroll-end .icon {
|
||||
fill: var(--darken-weak);
|
||||
}
|
||||
|
||||
&:hover:not(.scroll-start):not(.scroll-end) .icon {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-left {
|
||||
background: linear-gradient(to right, var(--profile) 50%, transparent);
|
||||
}
|
||||
|
||||
.scroll-right {
|
||||
background: linear-gradient(to left, var(--profile) 50%, transparent);
|
||||
}
|
||||
|
||||
.expand-light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-button {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.scroll-start,
|
||||
&.scroll-end {
|
||||
/* use over v-show so button stays visible while still hovered */
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-left {
|
||||
left: 0;
|
||||
padding: 1rem 2rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.scroll-right {
|
||||
right: 0;
|
||||
padding: 1rem 1rem 1rem 2rem;
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.scroll-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -37,56 +37,3 @@ body {
|
|||
fill: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.expand {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: .5rem .25rem;
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
fill: $shadow;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $shadow-hint;
|
||||
|
||||
.icon {
|
||||
fill: $shadow-strong;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expand-sidebar:hover {
|
||||
background: $shadow-hint;
|
||||
}
|
||||
|
||||
.expand-header {
|
||||
display: none;
|
||||
|
||||
&:hover {
|
||||
background: $shadow-hint;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-header {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
background: $profile;
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
fill: $highlight;
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
&:hover .icon {
|
||||
background: $highlight-hint;
|
||||
fill: $text-contrast;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@ function curateActor(actor, release) {
|
|||
|
||||
if (actor.profiles && actor.profiles.length > 0) {
|
||||
const photos = actor.profiles
|
||||
.map(profile => profile.avatar)
|
||||
.filter(avatar => avatar && (!curatedActor.avatar || avatar.hash !== curatedActor.avatar.hash));
|
||||
.map(profile => ({ entity: profile.entity, ...profile.avatar }))
|
||||
.filter(avatar => avatar.id && (!curatedActor.avatar || avatar.hash !== curatedActor.avatar.hash));
|
||||
|
||||
const descriptions = actor.profiles.reduce((acc, profile) => ({
|
||||
...acc,
|
||||
|
|
|
|||
|
|
@ -33,13 +33,12 @@ const routes = [
|
|||
name: 'updates',
|
||||
params: {
|
||||
range: 'latest',
|
||||
tags: 'all',
|
||||
pageNumber: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/updates/:tags/:range/:pageNumber',
|
||||
path: '/updates/:range/:pageNumber',
|
||||
component: Home,
|
||||
name: 'updates',
|
||||
},
|
||||
|
|
@ -61,13 +60,12 @@ const routes = [
|
|||
params: {
|
||||
...from.params,
|
||||
range: 'latest',
|
||||
tags: 'all',
|
||||
pageNumber: 1,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: '/actor/:actorId/:actorSlug/:tags/:range/:pageNumber',
|
||||
path: '/actor/:actorId/:actorSlug/:range/:pageNumber',
|
||||
component: Actor,
|
||||
name: 'actorRange',
|
||||
},
|
||||
|
|
@ -79,13 +77,12 @@ const routes = [
|
|||
params: {
|
||||
...from.params,
|
||||
range: 'latest',
|
||||
tags: 'all',
|
||||
pageNumber: 1,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: '/channel/:entitySlug/:tags/:range/:pageNumber',
|
||||
path: '/channel/:entitySlug/:range/:pageNumber',
|
||||
component: Entity,
|
||||
name: 'channel',
|
||||
},
|
||||
|
|
@ -96,13 +93,12 @@ const routes = [
|
|||
params: {
|
||||
...from.params,
|
||||
range: 'latest',
|
||||
tags: 'all',
|
||||
pageNumber: 1,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: '/network/:entitySlug/:tags/:range/:pageNumber',
|
||||
path: '/network/:entitySlug/:range/:pageNumber',
|
||||
component: Entity,
|
||||
name: 'network',
|
||||
},
|
||||
|
|
@ -113,12 +109,11 @@ const routes = [
|
|||
params: {
|
||||
...from.params,
|
||||
range: 'latest',
|
||||
tags: 'all',
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: '/tag/:tagSlug/:tags/:range',
|
||||
path: '/tag/:tagSlug:range',
|
||||
component: Tag,
|
||||
name: 'tag',
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue