forked from DebaucheryLibrarian/traxxx
Updated tag page layout. Added shoot date property. Showing parent favicon on compact entity page. Re-added 'new' indicator on tile. Added Family Sinner to Mile High Media. Various fixes and improvements.
This commit is contained in:
@@ -1,331 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="network"
|
||||
class="content"
|
||||
>
|
||||
<div
|
||||
class="network"
|
||||
:class="{ nosites: sites.length === 0 && networks.length === 0 }"
|
||||
>
|
||||
<div
|
||||
v-show="sites.length > 0 || networks.length > 0"
|
||||
class="sidebar"
|
||||
:class="{ expanded }"
|
||||
>
|
||||
<a
|
||||
v-tooltip.bottom="`Go to ${network.url}`"
|
||||
:href="network.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="title"
|
||||
>
|
||||
<img
|
||||
:src="`/img/logos/${network.slug}/thumbs/network.png`"
|
||||
class="logo"
|
||||
>
|
||||
</a>
|
||||
|
||||
<p
|
||||
v-if="network.description"
|
||||
class="description"
|
||||
>{{ network.description }}</p>
|
||||
|
||||
<Sites
|
||||
v-if="sites.length"
|
||||
:sites="sites"
|
||||
:class="{ expanded }"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="networks.length > 0"
|
||||
class="networks"
|
||||
>
|
||||
<Network
|
||||
v-for="childNetwork in networks"
|
||||
:key="`network-${childNetwork.id}`"
|
||||
:network="childNetwork"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Network
|
||||
v-if="network.parent"
|
||||
:network="network.parent"
|
||||
class="parent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template v-if="sites.length > 0 || networks.length > 0">
|
||||
<span
|
||||
v-show="!expanded"
|
||||
class="expand expand-sidebar noselect"
|
||||
@click="expanded = true"
|
||||
><Icon icon="arrow-right3" /></span>
|
||||
|
||||
<span
|
||||
v-show="expanded"
|
||||
class="expand expand-sidebar noselect"
|
||||
@click="expanded = false"
|
||||
><Icon icon="arrow-left3" /></span>
|
||||
</template>
|
||||
|
||||
<div
|
||||
class="header"
|
||||
:class="{ hideable: sites.length > 0 || networks.length > 0 }"
|
||||
>
|
||||
<a
|
||||
v-tooltip.bottom="`Go to ${network.url}`"
|
||||
:href="network.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="title"
|
||||
>
|
||||
<img
|
||||
:src="`/img/logos/${network.slug}/thumbs/network.png`"
|
||||
class="logo"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="content-inner">
|
||||
<FilterBar
|
||||
:fetch-releases="fetchNetwork"
|
||||
:items-total="totalCount"
|
||||
:items-per-page="10"
|
||||
/>
|
||||
|
||||
<template v-if="sites.length > 0 || networks.length > 0">
|
||||
<span
|
||||
v-show="expanded"
|
||||
class="expand collapse-header noselect"
|
||||
@click="expanded = false"
|
||||
><Icon icon="arrow-up3" /></span>
|
||||
|
||||
<Sites
|
||||
:sites="sites"
|
||||
:class="{ expanded }"
|
||||
class="compact"
|
||||
/>
|
||||
|
||||
<span
|
||||
v-show="!expanded"
|
||||
class="expand expand-header noselect"
|
||||
@click="expanded = true"
|
||||
><Icon icon="arrow-down3" /></span>
|
||||
|
||||
<span
|
||||
v-show="expanded"
|
||||
class="expand expand-header noselect"
|
||||
@click="expanded = false"
|
||||
><Icon icon="arrow-up3" /></span>
|
||||
</template>
|
||||
|
||||
<Releases :releases="releases" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FilterBar from '../header/filter-bar.vue';
|
||||
import Releases from '../releases/releases.vue';
|
||||
import Sites from '../sites/sites.vue';
|
||||
import Network from '../tile/network.vue';
|
||||
|
||||
async function fetchNetwork() {
|
||||
const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
|
||||
entitySlug: this.$route.params.networkSlug,
|
||||
entityType: 'network',
|
||||
limit: this.limit,
|
||||
range: this.$route.params.range,
|
||||
pageNumber: Number(this.$route.params.pageNumber),
|
||||
});
|
||||
|
||||
this.network = entity;
|
||||
this.networks = this.network.children;
|
||||
this.releases = this.network.releases;
|
||||
|
||||
this.totalCount = totalCount;
|
||||
}
|
||||
|
||||
async function route() {
|
||||
await this.fetchNetwork();
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
await this.fetchNetwork();
|
||||
this.pageTitle = this.network.name;
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FilterBar,
|
||||
Releases,
|
||||
Sites,
|
||||
Network,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
network: null,
|
||||
sites: [],
|
||||
networks: [],
|
||||
studios: [],
|
||||
releases: [],
|
||||
totalCount: null,
|
||||
limit: 10,
|
||||
pageTitle: null,
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: route,
|
||||
},
|
||||
mounted,
|
||||
methods: {
|
||||
fetchNetwork,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.network {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
justify-content: stretch;
|
||||
overflow-y: auto;
|
||||
|
||||
&.nosites {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.content-inner {
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.releases {
|
||||
padding: 1rem 1rem 1rem .5rem;
|
||||
border-top: solid 1px var(--crease);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: var(--profile);
|
||||
height: 100%;
|
||||
width: 18rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
color: var(--text-light);
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-bottom: solid 1px var(--highlight-hint);
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
width: calc(100% - 25rem);
|
||||
|
||||
.logo {
|
||||
max-width: 18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.networks {
|
||||
display: grid;
|
||||
grid-gap: 0 1rem;
|
||||
flex-grow: 1;
|
||||
padding: 1rem;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(auto-fit, 6rem);
|
||||
overflow-y: auto;
|
||||
scrollbar-color: var(--highlight-weak) var(--profile);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
max-height: 8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
object-fit: contain;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
filter: var(--logo-highlight);
|
||||
}
|
||||
|
||||
.parent {
|
||||
display: inline-block;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
background: var(--profile);
|
||||
|
||||
&.hideable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 20rem;
|
||||
max-height: 3rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sites.compact {
|
||||
display: none;
|
||||
background: var(--profile);
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.collapse-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint3) {
|
||||
.header,
|
||||
.header.hideable {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sites.compact {
|
||||
display: flex;
|
||||
|
||||
&.expanded {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
.expand-header,
|
||||
.collapse-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.expand-sidebar,
|
||||
.collapse-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.network {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -144,8 +144,8 @@ export default {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.networks {
|
||||
@media(max-width: $breakpoint0) {
|
||||
.entity-tiles {
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user