Redesigned release page. Added 'single site' marker, linking directly to network page. Fixed Dogfart scraper duration.
This commit is contained in:
@@ -157,7 +157,6 @@ export default {
|
||||
padding: .5rem;
|
||||
margin: 0 .25rem;
|
||||
border: solid 1px transparent;
|
||||
border-radius: .5rem;
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -12,11 +12,10 @@
|
||||
rel="noopener noreferrer"
|
||||
class="title"
|
||||
>
|
||||
<object
|
||||
:data="`/img/logos/${network.slug}/network.png`"
|
||||
type="image/png"
|
||||
<img
|
||||
:src="`/img/logos/${network.slug}/network.png`"
|
||||
class="logo"
|
||||
><h2>{{ network.name }}</h2></object>
|
||||
>
|
||||
|
||||
<Icon
|
||||
icon="new-tab"
|
||||
@@ -27,16 +26,18 @@
|
||||
<p class="description">{{ network.description }}</p>
|
||||
</div>
|
||||
|
||||
<h3 class="heading">Sites</h3>
|
||||
<template v-if="sites.length">
|
||||
<h3 class="heading">Sites</h3>
|
||||
|
||||
<ul class="nolist sites">
|
||||
<li
|
||||
v-for="site in sites"
|
||||
:key="`site-${site.id}`"
|
||||
>
|
||||
<SiteTile :site="site" />
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nolist sites">
|
||||
<li
|
||||
v-for="site in sites"
|
||||
:key="`site-${site.id}`"
|
||||
>
|
||||
<SiteTile :site="site" />
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<h3 class="heading">Latest releases</h3>
|
||||
|
||||
@@ -60,7 +61,9 @@ async function mounted() {
|
||||
[this.network] = await this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug);
|
||||
this.releases = await this.$store.dispatch('fetchNetworkReleases', this.$route.params.networkSlug);
|
||||
|
||||
this.sites = this.network.sites.sort(({ name: nameA }, { name: nameB }) => nameA.localeCompare(nameB));
|
||||
this.sites = this.network.sites
|
||||
.filter(site => !site.independent)
|
||||
.sort(({ name: nameA }, { name: nameB }) => nameA.localeCompare(nameB));
|
||||
|
||||
this.pageTitle = this.network.name;
|
||||
}
|
||||
|
||||
@@ -77,7 +77,6 @@ export default {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
margin: 0 0 1rem 0;
|
||||
scrollbar-width: none;
|
||||
box-shadow: 0 0 3px $shadow;
|
||||
font-size: 0;
|
||||
@@ -97,6 +96,7 @@ export default {
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 100%;
|
||||
max-height: 18rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -5,117 +5,193 @@
|
||||
>
|
||||
<Banner :release="release" />
|
||||
|
||||
<h2 class="row title">{{ release.title }}</h2>
|
||||
|
||||
<ul class="row actors">
|
||||
<Icon icon="star" />
|
||||
|
||||
<li
|
||||
v-for="actor in release.actors"
|
||||
:key="actor.id"
|
||||
class="actor"
|
||||
>
|
||||
<div class="info">
|
||||
<div class="column">
|
||||
<a
|
||||
:href="`/actor/${actor.slug}`"
|
||||
class="actor-link"
|
||||
>{{ actor.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
v-if="release.date"
|
||||
:title="`View scene on ${release.site.name}`"
|
||||
:href="release.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="tidbit date link hideable"
|
||||
>
|
||||
<Icon icon="calendar2" />
|
||||
{{ formatDate(release.date, 'MMMM D, YYYY') }}
|
||||
</a>
|
||||
|
||||
<span
|
||||
v-if="release.date"
|
||||
class="row"
|
||||
>
|
||||
<Icon icon="calendar2" />
|
||||
<a
|
||||
v-if="release.date"
|
||||
:title="`View scene on ${release.site.name}`"
|
||||
:href="release.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="tidbit date link showable"
|
||||
>
|
||||
<Icon icon="calendar2" />
|
||||
{{ formatDate(release.date, 'MMM D, YYYY') }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
:href="release.url"
|
||||
:title="`Released on ${formatDate(release.date, 'MMMM D, YYYY')}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="date date-link"
|
||||
>{{ formatDate(release.date, 'MMMM D, YYYY') }}</a>
|
||||
</span>
|
||||
<span
|
||||
v-if="release.shootId"
|
||||
class="tidbit shoot hideable"
|
||||
>
|
||||
<Icon icon="clapboard-play" />
|
||||
{{ release.shootId }}
|
||||
</span>
|
||||
|
||||
<span class="row site">
|
||||
<Icon icon="clapboard-play" />
|
||||
<span
|
||||
v-if="release.duration"
|
||||
class="tidbit duration hideable"
|
||||
>
|
||||
<Icon icon="stopwatch" />
|
||||
|
||||
<span
|
||||
v-if="release.duration >= 3600"
|
||||
class="duration-segment"
|
||||
>{{ Math.floor(release.duration / 3600) }}:</span>
|
||||
<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
|
||||
<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
|
||||
</span>
|
||||
|
||||
<span class="tidbit site">
|
||||
<a
|
||||
v-if="release.site.independent"
|
||||
:href="`/network/${release.network.slug}`"
|
||||
>
|
||||
<img
|
||||
:src="`/img/logos/${release.network.slug}/network.png`"
|
||||
:title="release.network.name"
|
||||
class="logo logo-site"
|
||||
>
|
||||
</a>
|
||||
|
||||
<template v-else>
|
||||
<a :href="`/network/${release.network.slug}`">
|
||||
<img
|
||||
:src="`/img/logos/${release.network.slug}/network.png`"
|
||||
:title="release.network.name"
|
||||
:alt="release.network.name"
|
||||
class="logo logo-network"
|
||||
>
|
||||
</a>
|
||||
|
||||
<span class="chain">presents</span>
|
||||
|
||||
<a :href="`/site/${release.site.slug}`">
|
||||
<img
|
||||
:src="`/img/logos/${release.network.slug}/${release.site.slug}.png`"
|
||||
:title="release.site.name"
|
||||
class="logo logo-site"
|
||||
>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<h2 class="row title">{{ release.title }}</h2>
|
||||
|
||||
<div class="row">
|
||||
<Icon icon="star" />
|
||||
|
||||
<ul class="actors nolist">
|
||||
<li
|
||||
v-for="actor in release.actors"
|
||||
:key="actor.id"
|
||||
class="actor"
|
||||
>
|
||||
<Actor :actor="actor" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="release.tags.length > 0"
|
||||
class="row"
|
||||
>
|
||||
<Icon icon="price-tags3" />
|
||||
|
||||
<ul class="tags nolist">
|
||||
<li
|
||||
v-for="tag in release.tags"
|
||||
:key="`tag-${tag.slug}`"
|
||||
class="tag"
|
||||
>
|
||||
<a
|
||||
:href="`/tag/${tag.slug}`"
|
||||
class="link"
|
||||
>{{ tag.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="release.description"
|
||||
class="row description"
|
||||
>
|
||||
<Icon icon="info2" />
|
||||
{{ release.description }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="release.studio"
|
||||
class="row"
|
||||
>
|
||||
<Icon icon="video-camera2" />
|
||||
|
||||
<template v-if="release.studio">
|
||||
<a
|
||||
v-if="release.studio"
|
||||
:href="release.studio.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="site-link"
|
||||
>{{ release.studio.name }}</a>,
|
||||
</template>
|
||||
class="link"
|
||||
>{{ release.studio.name }}</a>
|
||||
</div>
|
||||
|
||||
<a
|
||||
:href="`/network/${release.network.slug}`"
|
||||
class="network-link"
|
||||
>{{ release.network.name }}:</a>
|
||||
|
||||
<a
|
||||
:href="`/site/${release.site.slug}`"
|
||||
class="site-link"
|
||||
>{{ release.site.name }}</a>
|
||||
</span>
|
||||
|
||||
<p
|
||||
v-if="release.duration"
|
||||
class="row duration"
|
||||
>
|
||||
<Icon icon="stopwatch" />
|
||||
|
||||
<span
|
||||
v-if="release.duration >= 3600"
|
||||
class="duration-segment"
|
||||
>{{ Math.floor(release.duration / 3600) }}:</span>
|
||||
<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
|
||||
<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
|
||||
</p>
|
||||
|
||||
<p
|
||||
v-if="release.description"
|
||||
class="row description"
|
||||
>
|
||||
<Icon icon="info2" />
|
||||
{{ release.description }}
|
||||
</p>
|
||||
|
||||
<ul
|
||||
v-if="release.tags.length > 0"
|
||||
class="row tags"
|
||||
>
|
||||
<Icon icon="price-tags" />
|
||||
|
||||
<li
|
||||
v-for="tag in release.tags"
|
||||
:key="`tag-${tag.slug}`"
|
||||
class="tag"
|
||||
>
|
||||
<a
|
||||
:href="`/tag/${tag.slug}`"
|
||||
class="tag-link"
|
||||
>{{ tag.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<span class="row">
|
||||
<Icon icon="drawer-in" />
|
||||
|
||||
<a
|
||||
:href="`/added/${formatDate(release.dateAdded, 'YYYY-MM-DD')}`"
|
||||
:title="`Added on ${formatDate(release.dateAdded, 'MMMM D, YYYY')}`"
|
||||
v-if="release.shootId"
|
||||
:href="release.url"
|
||||
:title="`release.shootId`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="date date-link"
|
||||
>{{ formatDate(release.dateAdded, 'MMMM D, YYYY') }}</a>
|
||||
</span>
|
||||
class="row shoot showable"
|
||||
>
|
||||
<Icon icon="clapboard-play" />{{ release.shootId }}
|
||||
</a>
|
||||
|
||||
<div
|
||||
v-if="release.duration"
|
||||
class="row duration showable"
|
||||
>
|
||||
<Icon icon="stopwatch" />
|
||||
|
||||
<span
|
||||
v-if="release.duration >= 3600"
|
||||
class="duration-segment"
|
||||
>{{ Math.floor(release.duration / 3600) }}:</span>
|
||||
<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
|
||||
<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
|
||||
</div>
|
||||
|
||||
<span class="row">
|
||||
<Icon icon="drawer-in" />
|
||||
|
||||
<a
|
||||
:href="`/added/${formatDate(release.dateAdded, 'YYYY-MM-DD')}`"
|
||||
:title="`Added on ${formatDate(release.dateAdded, 'MMMM D, YYYY')}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="link added"
|
||||
>{{ formatDate(release.dateAdded, 'MMMM D, YYYY') }}</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Actor from '../tile/actor.vue';
|
||||
import Banner from './banner.vue';
|
||||
|
||||
function pageTitle() {
|
||||
@@ -128,6 +204,7 @@ async function mounted() {
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Actor,
|
||||
Banner,
|
||||
},
|
||||
data() {
|
||||
@@ -144,33 +221,99 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
.row {
|
||||
display: block;
|
||||
.column {
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
padding: 0 1rem;
|
||||
margin: 0 0 .5rem 0;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 1rem 0;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
fill: $shadow-strong;
|
||||
margin: 0 .5rem 0 0;
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.actors,
|
||||
.tags {
|
||||
list-style: none;
|
||||
.info {
|
||||
background: $background;
|
||||
margin: 0 0 1.5rem 0;
|
||||
box-shadow: 0 0 3px $shadow-weak;
|
||||
cursor: default;
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.actor,
|
||||
.tag {
|
||||
.tidbit {
|
||||
display: inline-block;
|
||||
text-transform: capitalize;
|
||||
height: 100%;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: ',';
|
||||
display: inline-block;
|
||||
width: .6rem;
|
||||
&:not(:last-child) {
|
||||
border-right: solid 1px $shadow-hint;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: $shadow-strong;
|
||||
margin: 0 .25rem 0 0;
|
||||
}
|
||||
|
||||
&.date,
|
||||
&.duration,
|
||||
&.shoot {
|
||||
padding: 1.25rem 1rem 1.25rem 0;
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.site {
|
||||
display: inline-flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: .25rem 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo-site {
|
||||
height: 3rem;
|
||||
max-width: 15rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-network {
|
||||
height: 1.5rem;
|
||||
max-width: 10rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.chain {
|
||||
color: $shadow;
|
||||
padding: 0 .5rem;
|
||||
font-weight: bold;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.duration {
|
||||
@@ -181,16 +324,56 @@ export default {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.date-link,
|
||||
.site-link,
|
||||
.network-link,
|
||||
.actor-link,
|
||||
.tag-link {
|
||||
.link {
|
||||
display: inline-block;
|
||||
color: $link;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
|
||||
.icon {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag .link {
|
||||
background: $background;
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
margin: 0 .25rem .25rem 0;
|
||||
box-shadow: 0 0 2px $shadow-weak;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.showable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint3) {
|
||||
.logo-network,
|
||||
.chain {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.hideable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.showable {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-site {
|
||||
max-width: 10rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,10 @@
|
||||
>
|
||||
<div class="header">
|
||||
<span>
|
||||
<h2 class="title">{{ tag.name }}</h2>
|
||||
<h2 class="title">
|
||||
<Icon icon="price-tag4" />
|
||||
{{ tag.name }}
|
||||
</h2>
|
||||
|
||||
<span class="description">{{ tag.description }}</span>
|
||||
</span>
|
||||
@@ -64,6 +67,11 @@ export default {
|
||||
display: inline-block;
|
||||
margin: 0 .5rem 0 0;
|
||||
text-transform: capitalize;
|
||||
|
||||
.icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
||||
40
assets/components/tile/actor.vue
Normal file
40
assets/components/tile/actor.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="actor"
|
||||
class="actor"
|
||||
>
|
||||
<a
|
||||
:href="`/actor/${actor.slug}`"
|
||||
class="name"
|
||||
>{{ actor.name }}</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
actor: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.actor {
|
||||
background: $background;
|
||||
display: inline-block;
|
||||
margin: 0 .25rem .25rem 0;
|
||||
box-shadow: 0 0 3px $shadow-weak;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $link;
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@@ -3,6 +3,13 @@
|
||||
<span class="banner">
|
||||
<span class="details">
|
||||
<a
|
||||
v-if="release.site.independent"
|
||||
:href="`/network/${release.network.slug}`"
|
||||
class="site site-link"
|
||||
>{{ release.network.name }}</a>
|
||||
|
||||
<a
|
||||
v-else
|
||||
v-tooltip.bottom="`Part of ${release.network.name}`"
|
||||
:title="`Part of ${release.network.name}`"
|
||||
:href="`/site/${release.site.slug}`"
|
||||
@@ -120,9 +127,8 @@ export default {
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0 .5rem 0;
|
||||
border-radius: .25rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, .25);
|
||||
box-shadow: 0 0 3px $shadow-weak;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -151,7 +157,7 @@ export default {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 .5rem;
|
||||
margin: 0 0 .5rem 0;
|
||||
margin: 0 0 .25rem 0;
|
||||
}
|
||||
|
||||
.details {
|
||||
@@ -172,14 +178,9 @@ export default {
|
||||
}
|
||||
|
||||
.site {
|
||||
border-radius: 0 0 .25rem 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.date {
|
||||
border-radius: 0 0 0 .25rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -209,12 +210,12 @@ export default {
|
||||
.actors {
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
max-height: 2.5rem;
|
||||
line-height: 1.25rem;
|
||||
max-height: 2.75rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.tags {
|
||||
max-height: 2.5rem;
|
||||
max-height: 2.85rem;
|
||||
padding: .25rem .5rem 1rem .5rem;
|
||||
line-height: 1.25rem;
|
||||
word-wrap: break-word;
|
||||
@@ -226,7 +227,7 @@ export default {
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin: 0 .25rem .5rem 0;
|
||||
margin: 0 .25rem .25rem 0;
|
||||
}
|
||||
|
||||
.actor:not(:last-of-type)::after {
|
||||
@@ -247,8 +248,8 @@ export default {
|
||||
|
||||
.tag-link {
|
||||
color: $shadow;
|
||||
display: inline-block;
|
||||
padding: .25rem;
|
||||
border-radius: .25rem;
|
||||
box-shadow: 0 0 2px $shadow-weak;
|
||||
font-size: .75rem;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -27,6 +27,7 @@ export default {
|
||||
@import 'theme';
|
||||
|
||||
.tile {
|
||||
background: $background;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user