Switched to tabs. Adding missing actor entries when scraping actors, with batch ID.
This commit is contained in:
@@ -1,248 +1,248 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="actor"
|
||||
class="content actor"
|
||||
>
|
||||
<FilterBar :fetch-releases="fetchActor" />
|
||||
<div
|
||||
v-if="actor"
|
||||
class="content actor"
|
||||
>
|
||||
<FilterBar :fetch-releases="fetchActor" />
|
||||
|
||||
<div class="actor-header">
|
||||
<h2 class="header-name">
|
||||
<span v-if="actor.network">{{ actor.name }} ({{ actor.network.name }})</span>
|
||||
<span v-else="">{{ actor.name }}</span>
|
||||
<div class="actor-header">
|
||||
<h2 class="header-name">
|
||||
<span v-if="actor.network">{{ actor.name }} ({{ actor.network.name }})</span>
|
||||
<span v-else="">{{ actor.name }}</span>
|
||||
|
||||
<Gender
|
||||
:gender="actor.gender"
|
||||
class="header-gender"
|
||||
/>
|
||||
</h2>
|
||||
<Gender
|
||||
:gender="actor.gender"
|
||||
class="header-gender"
|
||||
/>
|
||||
</h2>
|
||||
|
||||
<li
|
||||
v-if="actor.aliases.length"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label">Also known as</dfn>
|
||||
<span>{{ actor.aliases.join(', ') }}</span>
|
||||
</li>
|
||||
<li
|
||||
v-if="actor.aliases.length"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label">Also known as</dfn>
|
||||
<span>{{ actor.aliases.join(', ') }}</span>
|
||||
</li>
|
||||
|
||||
<Social
|
||||
v-if="actor.social && actor.social.length > 0"
|
||||
:actor="actor"
|
||||
class="header-social"
|
||||
/>
|
||||
</div>
|
||||
<Social
|
||||
v-if="actor.social && actor.social.length > 0"
|
||||
:actor="actor"
|
||||
class="header-social"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="actor-inner">
|
||||
<div
|
||||
class="profile"
|
||||
:class="{ expanded, 'with-avatar': !!actor.avatar }"
|
||||
>
|
||||
<a
|
||||
v-if="actor.avatar"
|
||||
:href="`/media/${actor.avatar.path}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="avatar-link"
|
||||
>
|
||||
<img
|
||||
:src="`/media/${actor.avatar.thumbnail}`"
|
||||
:title="actor.avatar.copyright && `© ${actor.avatar.copyright}`"
|
||||
class="avatar"
|
||||
>
|
||||
</a>
|
||||
<div class="actor-inner">
|
||||
<div
|
||||
class="profile"
|
||||
:class="{ expanded, 'with-avatar': !!actor.avatar }"
|
||||
>
|
||||
<a
|
||||
v-if="actor.avatar"
|
||||
:href="`/media/${actor.avatar.path}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="avatar-link"
|
||||
>
|
||||
<img
|
||||
:src="`/media/${actor.avatar.thumbnail}`"
|
||||
:title="actor.avatar.copyright && `© ${actor.avatar.copyright}`"
|
||||
class="avatar"
|
||||
>
|
||||
</a>
|
||||
|
||||
<span
|
||||
v-show="expanded"
|
||||
class="expand collapse-header noselect"
|
||||
@click="expanded = false"
|
||||
><Icon icon="arrow-up3" /></span>
|
||||
<span
|
||||
v-show="expanded"
|
||||
class="expand collapse-header noselect"
|
||||
@click="expanded = false"
|
||||
><Icon icon="arrow-up3" /></span>
|
||||
|
||||
<ul class="bio nolist">
|
||||
<li
|
||||
v-if="actor.birthdate"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="cake" />Birthdate</dfn>
|
||||
<ul class="bio nolist">
|
||||
<li
|
||||
v-if="actor.birthdate"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="cake" />Birthdate</dfn>
|
||||
|
||||
<span
|
||||
v-if="actor.birthdate"
|
||||
class="birthdate"
|
||||
>{{ formatDate(actor.birthdate, 'MMMM D, YYYY') }}<span class="age">{{ actor.age }}</span></span>
|
||||
</li>
|
||||
<span
|
||||
v-if="actor.birthdate"
|
||||
class="birthdate"
|
||||
>{{ formatDate(actor.birthdate, 'MMMM D, YYYY') }}<span class="age">{{ actor.age }}</span></span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.origin"
|
||||
class="bio-item birth"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="home2" />Born in</dfn>
|
||||
<li
|
||||
v-if="actor.origin"
|
||||
class="bio-item birth"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="home2" />Born in</dfn>
|
||||
|
||||
<span>
|
||||
<span
|
||||
v-if="actor.origin.city"
|
||||
class="city hideable"
|
||||
>{{ actor.origin.city }}</span><span
|
||||
v-if="actor.origin.state && (!actor.origin.city || (actor.origin.country && actor.origin.country.alpha2 === 'US'))"
|
||||
class="state hideable"
|
||||
>{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span>
|
||||
<span>
|
||||
<span
|
||||
v-if="actor.origin.city"
|
||||
class="city hideable"
|
||||
>{{ actor.origin.city }}</span><span
|
||||
v-if="actor.origin.state && (!actor.origin.city || (actor.origin.country && actor.origin.country.alpha2 === 'US'))"
|
||||
class="state hideable"
|
||||
>{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span>
|
||||
|
||||
<span
|
||||
v-if="actor.origin.country"
|
||||
class="country birthcountry"
|
||||
>
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/svg-simple/${actor.origin.country.alpha2.toLowerCase()}.svg`"
|
||||
>{{ actor.origin.country.alias || actor.origin.country.name }}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<span
|
||||
v-if="actor.origin.country"
|
||||
class="country birthcountry"
|
||||
>
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/svg-simple/${actor.origin.country.alpha2.toLowerCase()}.svg`"
|
||||
>{{ actor.origin.country.alias || actor.origin.country.name }}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.residence"
|
||||
class="bio-item residence"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="location" />Lives in</dfn>
|
||||
<li
|
||||
v-if="actor.residence"
|
||||
class="bio-item residence"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="location" />Lives in</dfn>
|
||||
|
||||
<span>
|
||||
<span
|
||||
v-if="actor.residence.city"
|
||||
class="city hideable"
|
||||
>{{ actor.residence.city }}</span><span
|
||||
v-if="actor.residence.state && actor.residence.country && actor.residence.country.alpha2 === 'US'"
|
||||
class="state hideable"
|
||||
>{{ actor.residence.city ? `, ${actor.residence.state}` : actor.residence.state }}</span>
|
||||
<span>
|
||||
<span
|
||||
v-if="actor.residence.city"
|
||||
class="city hideable"
|
||||
>{{ actor.residence.city }}</span><span
|
||||
v-if="actor.residence.state && actor.residence.country && actor.residence.country.alpha2 === 'US'"
|
||||
class="state hideable"
|
||||
>{{ actor.residence.city ? `, ${actor.residence.state}` : actor.residence.state }}</span>
|
||||
|
||||
<span
|
||||
v-if="actor.residence.country"
|
||||
class="country"
|
||||
>
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/${actor.residence.country.alpha2.toLowerCase()}.png`"
|
||||
>{{ actor.residence.country.alias || actor.residence.country.name }}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<span
|
||||
v-if="actor.residence.country"
|
||||
class="country"
|
||||
>
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/${actor.residence.country.alpha2.toLowerCase()}.png`"
|
||||
>{{ actor.residence.country.alias || actor.residence.country.name }}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.ethnicity"
|
||||
class="bio-item ethnicity hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="earth2" />Ethnicity</dfn>
|
||||
<span>{{ actor.ethnicity }}</span>
|
||||
</li>
|
||||
<li
|
||||
v-if="actor.ethnicity"
|
||||
class="bio-item ethnicity hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="earth2" />Ethnicity</dfn>
|
||||
<span>{{ actor.ethnicity }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.bust || actor.waist || actor.hip"
|
||||
title="bust-waist-hip"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="ruler" />Figure</dfn>
|
||||
<span>
|
||||
<Icon
|
||||
v-if="actor.naturalBoobs === false"
|
||||
v-tooltip="'Boobs enhanced'"
|
||||
icon="magic-wand"
|
||||
class="enhanced"
|
||||
/>{{ actor.bust || '??' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }}
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
v-if="actor.bust || actor.waist || actor.hip"
|
||||
title="bust-waist-hip"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="ruler" />Figure</dfn>
|
||||
<span>
|
||||
<Icon
|
||||
v-if="actor.naturalBoobs === false"
|
||||
v-tooltip="'Boobs enhanced'"
|
||||
icon="magic-wand"
|
||||
class="enhanced"
|
||||
/>{{ actor.bust || '??' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.height"
|
||||
class="bio-item height"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="height" />Height</dfn>
|
||||
<span>
|
||||
<span class="height-metric">{{ actor.height.metric }} cm</span>
|
||||
<span class="height-imperial">{{ actor.height.imperial }}</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
v-if="actor.height"
|
||||
class="bio-item height"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="height" />Height</dfn>
|
||||
<span>
|
||||
<span class="height-metric">{{ actor.height.metric }} cm</span>
|
||||
<span class="height-imperial">{{ actor.height.imperial }}</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.weight"
|
||||
class="bio-item weight hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="scale" />Weight</dfn>
|
||||
<li
|
||||
v-if="actor.weight"
|
||||
class="bio-item weight hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="scale" />Weight</dfn>
|
||||
|
||||
<span>
|
||||
<span class="weight-metric">{{ actor.weight.metric }} kg</span>
|
||||
<span class="weight-imperial">{{ actor.weight.imperial }} lbs</span>
|
||||
</span>
|
||||
</li>
|
||||
<span>
|
||||
<span class="weight-metric">{{ actor.weight.metric }} kg</span>
|
||||
<span class="weight-imperial">{{ actor.weight.imperial }} lbs</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.hasTattoos"
|
||||
class="bio-item tattoos hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="flower" />Tattoos</dfn>
|
||||
<li
|
||||
v-if="actor.hasTattoos"
|
||||
class="bio-item tattoos hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="flower" />Tattoos</dfn>
|
||||
|
||||
<span
|
||||
v-if="actor.tattoos"
|
||||
v-tooltip="actor.tattoos"
|
||||
class="bio-value"
|
||||
>{{ actor.tattoos }}</span>
|
||||
<span v-else>Yes</span>
|
||||
</li>
|
||||
<span
|
||||
v-if="actor.tattoos"
|
||||
v-tooltip="actor.tattoos"
|
||||
class="bio-value"
|
||||
>{{ actor.tattoos }}</span>
|
||||
<span v-else>Yes</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.hasPiercings"
|
||||
class="bio-item piercings hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="trophy4" />Piercings</dfn>
|
||||
<li
|
||||
v-if="actor.hasPiercings"
|
||||
class="bio-item piercings hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="trophy4" />Piercings</dfn>
|
||||
|
||||
<span
|
||||
v-if="actor.piercings"
|
||||
v-tooltip="actor.piercings"
|
||||
class="bio-value"
|
||||
>{{ actor.piercings }}</span>
|
||||
<span v-else>Yes</span>
|
||||
</li>
|
||||
<span
|
||||
v-if="actor.piercings"
|
||||
v-tooltip="actor.piercings"
|
||||
class="bio-value"
|
||||
>{{ actor.piercings }}</span>
|
||||
<span v-else>Yes</span>
|
||||
</li>
|
||||
|
||||
<li class="bio-item scraped hideable">Updated {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}, ID: {{ actor.id }}</li>
|
||||
</ul>
|
||||
<li class="bio-item scraped hideable">Updated {{ formatDate(actor.updatedAt, 'YYYY-MM-DD HH:mm') }}, ID: {{ actor.id }}</li>
|
||||
</ul>
|
||||
|
||||
<span
|
||||
v-show="!expanded"
|
||||
class="expand expand-header collapse-header noselect"
|
||||
@click="expanded = true"
|
||||
><Icon icon="arrow-down3" /></span>
|
||||
<span
|
||||
v-show="!expanded"
|
||||
class="expand expand-header collapse-header noselect"
|
||||
@click="expanded = true"
|
||||
><Icon icon="arrow-down3" /></span>
|
||||
|
||||
<p
|
||||
v-if="actor.description"
|
||||
class="description"
|
||||
>{{ actor.description }}</p>
|
||||
<p
|
||||
v-if="actor.description"
|
||||
class="description"
|
||||
>{{ actor.description }}</p>
|
||||
|
||||
<Social
|
||||
v-if="actor.social && actor.social.length > 0"
|
||||
:actor="actor"
|
||||
class="profile-social"
|
||||
/>
|
||||
<Social
|
||||
v-if="actor.social && actor.social.length > 0"
|
||||
:actor="actor"
|
||||
class="profile-social"
|
||||
/>
|
||||
|
||||
<span
|
||||
v-show="expanded"
|
||||
class="expand expand-header collapse-header noselect"
|
||||
@click="expanded = false"
|
||||
><Icon icon="arrow-up3" /></span>
|
||||
</div>
|
||||
<span
|
||||
v-show="expanded"
|
||||
class="expand expand-header collapse-header noselect"
|
||||
@click="expanded = false"
|
||||
><Icon icon="arrow-up3" /></span>
|
||||
</div>
|
||||
|
||||
<div class="actor-content">
|
||||
<div
|
||||
v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
|
||||
class="photos-container"
|
||||
>
|
||||
<Photos :actor="actor" />
|
||||
<div class="actor-content">
|
||||
<div
|
||||
v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
|
||||
class="photos-container"
|
||||
>
|
||||
<Photos :actor="actor" />
|
||||
|
||||
<Photos
|
||||
:actor="actor"
|
||||
:class="{ expanded }"
|
||||
class="compact"
|
||||
/>
|
||||
</div>
|
||||
<Photos
|
||||
:actor="actor"
|
||||
:class="{ expanded }"
|
||||
class="compact"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Releases :releases="actor.releases" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Releases :releases="actor.releases" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -253,52 +253,52 @@ import Gender from './gender.vue';
|
||||
import Social from './social.vue';
|
||||
|
||||
async function fetchActor() {
|
||||
this.actor = await this.$store.dispatch('fetchActorBySlug', {
|
||||
actorSlug: this.$route.params.actorSlug,
|
||||
range: this.$route.params.range,
|
||||
});
|
||||
this.actor = await this.$store.dispatch('fetchActorBySlug', {
|
||||
actorSlug: this.$route.params.actorSlug,
|
||||
range: this.$route.params.range,
|
||||
});
|
||||
}
|
||||
|
||||
async function route() {
|
||||
await this.fetchActor();
|
||||
await this.fetchActor();
|
||||
}
|
||||
|
||||
function scrollPhotos(event) {
|
||||
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
|
||||
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
await this.fetchActor();
|
||||
await this.fetchActor();
|
||||
|
||||
if (this.actor) {
|
||||
this.pageTitle = this.actor.name;
|
||||
}
|
||||
if (this.actor) {
|
||||
this.pageTitle = this.actor.name;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FilterBar,
|
||||
Photos,
|
||||
Releases,
|
||||
Gender,
|
||||
Social,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actor: null,
|
||||
releases: null,
|
||||
pageTitle: null,
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: route,
|
||||
},
|
||||
mounted,
|
||||
methods: {
|
||||
fetchActor,
|
||||
scrollPhotos,
|
||||
},
|
||||
components: {
|
||||
FilterBar,
|
||||
Photos,
|
||||
Releases,
|
||||
Gender,
|
||||
Social,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actor: null,
|
||||
releases: null,
|
||||
pageTitle: null,
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: route,
|
||||
},
|
||||
mounted,
|
||||
methods: {
|
||||
fetchActor,
|
||||
scrollPhotos,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -426,7 +426,7 @@ export default {
|
||||
}
|
||||
|
||||
.bio-value {
|
||||
margin: 0 0 0 2rem;
|
||||
margin: 0 0 0 2rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,124 +1,124 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="network"
|
||||
class="content"
|
||||
>
|
||||
<FilterBar :fetch-releases="fetchNetwork" />
|
||||
<div
|
||||
v-if="network"
|
||||
class="content"
|
||||
>
|
||||
<FilterBar :fetch-releases="fetchNetwork" />
|
||||
|
||||
<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}/network.png`"
|
||||
class="logo"
|
||||
>
|
||||
</a>
|
||||
<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>
|
||||
<p
|
||||
v-if="network.description"
|
||||
class="description"
|
||||
>{{ network.description }}</p>
|
||||
|
||||
<Sites
|
||||
v-if="sites.length"
|
||||
:sites="sites"
|
||||
:class="{ expanded }"
|
||||
/>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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}/network.png`"
|
||||
class="logo"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
<div class="content-inner">
|
||||
<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"
|
||||
/>
|
||||
<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 = true"
|
||||
><Icon icon="arrow-down3" /></span>
|
||||
|
||||
<span
|
||||
v-show="expanded"
|
||||
class="expand expand-header noselect"
|
||||
@click="expanded = false"
|
||||
><Icon icon="arrow-up3" /></span>
|
||||
</template>
|
||||
<span
|
||||
v-show="expanded"
|
||||
class="expand expand-header noselect"
|
||||
@click="expanded = false"
|
||||
><Icon icon="arrow-up3" /></span>
|
||||
</template>
|
||||
|
||||
<Releases :releases="releases" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Releases :releases="releases" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -128,59 +128,59 @@ import Sites from '../sites/sites.vue';
|
||||
import Network from '../tile/network.vue';
|
||||
|
||||
async function fetchNetwork() {
|
||||
this.network = await this.$store.dispatch('fetchNetworkBySlug', {
|
||||
networkSlug: this.$route.params.networkSlug,
|
||||
range: this.$route.params.range,
|
||||
});
|
||||
this.network = await this.$store.dispatch('fetchNetworkBySlug', {
|
||||
networkSlug: this.$route.params.networkSlug,
|
||||
range: this.$route.params.range,
|
||||
});
|
||||
|
||||
if (this.network.studios) {
|
||||
this.studios = this.network.studios.map(studio => ({
|
||||
...studio,
|
||||
network: this.network,
|
||||
}));
|
||||
}
|
||||
if (this.network.studios) {
|
||||
this.studios = this.network.studios.map(studio => ({
|
||||
...studio,
|
||||
network: this.network,
|
||||
}));
|
||||
}
|
||||
|
||||
this.networks = this.network.networks;
|
||||
this.sites = this.network.sites
|
||||
.filter(site => !site.independent);
|
||||
this.networks = this.network.networks;
|
||||
this.sites = this.network.sites
|
||||
.filter(site => !site.independent);
|
||||
|
||||
this.releases = this.network.releases;
|
||||
this.releases = this.network.releases;
|
||||
}
|
||||
|
||||
async function route() {
|
||||
await this.fetchNetwork();
|
||||
await this.fetchNetwork();
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
await this.fetchNetwork();
|
||||
this.pageTitle = this.network.name;
|
||||
await this.fetchNetwork();
|
||||
this.pageTitle = this.network.name;
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FilterBar,
|
||||
Releases,
|
||||
Sites,
|
||||
Network,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
network: null,
|
||||
sites: [],
|
||||
networks: [],
|
||||
studios: [],
|
||||
releases: [],
|
||||
pageTitle: null,
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: route,
|
||||
},
|
||||
mounted,
|
||||
methods: {
|
||||
fetchNetwork,
|
||||
},
|
||||
components: {
|
||||
FilterBar,
|
||||
Releases,
|
||||
Sites,
|
||||
Network,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
network: null,
|
||||
sites: [],
|
||||
networks: [],
|
||||
studios: [],
|
||||
releases: [],
|
||||
pageTitle: null,
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: route,
|
||||
},
|
||||
mounted,
|
||||
methods: {
|
||||
fetchNetwork,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
<template>
|
||||
<a
|
||||
:href="`/site/${site.slug}`"
|
||||
:title="site.name"
|
||||
class="tile"
|
||||
>
|
||||
<img
|
||||
:src="`/img/logos/${site.network.slug}/${site.slug}.png`"
|
||||
:alt="site.name"
|
||||
class="logo"
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
:href="`/site/${site.slug}`"
|
||||
:title="site.name"
|
||||
class="tile"
|
||||
>
|
||||
<img
|
||||
:src="`/img/logos/${site.network.slug}/thumbs/${site.slug}.png`"
|
||||
:alt="site.name"
|
||||
class="logo"
|
||||
>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
site: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
props: {
|
||||
site: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user