Restored old release tile layout.

This commit is contained in:
ThePendulum 2020-05-09 02:17:10 +02:00
parent f31aef6f5d
commit 70594156fd
1 changed files with 142 additions and 166 deletions

View File

@ -1,152 +1,151 @@
<template> <template>
<div <div
:id="`${release.type}-${release.id}`" :id="`${release.type}-${release.id}`"
:class="{ [release.type]: true }"
class="tile" class="tile"
> >
<div class="scene"> <span class="poster">
<div class="poster"> <span class="details">
<span class="details"> <router-link
v-if="release.site && release.site.independent"
:to="`/network/${release.network.slug}`"
class="site site-link"
><img
:src="`/img/logos/${release.network.slug}/favicon.png`"
class="favicon"
>{{ release.network.name }}</router-link>
<span
v-else-if="release.network"
class="site"
>
<router-link <router-link
v-if="release.site && release.site.independent" v-tooltip.bottom="`Part of ${release.network.name}`"
:title="`Part of ${release.network.name}`"
:to="`/network/${release.network.slug}`" :to="`/network/${release.network.slug}`"
class="site site-link" class="site-link"
><img ><img
:src="`/img/logos/${release.network.slug}/favicon.png`" :src="`/img/logos/${release.network.slug}/favicon.png`"
class="favicon" class="favicon"
>{{ release.network.name }}</router-link> ></router-link>
<span <router-link
v-else-if="release.network" v-tooltip.bottom="`More from ${release.site.name}`"
class="site" :title="`More from ${release.site.name}`"
> :to="`/site/${release.site.slug}`"
<router-link class="site-link"
v-tooltip.bottom="`Part of ${release.network.name}`" >{{ release.site.name }}</router-link>
:title="`Part of ${release.network.name}`"
:to="`/network/${release.network.slug}`"
class="site-link"
><img
:src="`/img/logos/${release.network.slug}/favicon.png`"
class="favicon"
></router-link>
<router-link
v-tooltip.bottom="`More from ${release.site.name}`"
:title="`More from ${release.site.name}`"
:to="`/site/${release.site.slug}`"
class="site-link"
>{{ release.site.name }}</router-link>
</span>
<span v-else />
<a
v-if="release.date"
v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
:title="release.url && `View scene on ${release.site.name}`"
:href="release.url"
:class="{ upcoming: isUpcoming, new: release.isNew }"
target="_blank"
rel="noopener noreferrer"
class="date"
>{{ formatDate(release.date, 'MMM D, YYYY') }}</a>
<a
v-else
:href="release.url"
:class="{ upcoming: isAfter(release.date, new Date()), new: release.isNew }"
title="Scene date N/A, showing date added"
target="_blank"
rel="noopener noreferrer"
class="date"
>{{ `(${formatDate(release.dateAdded, 'MMM D, YYYY')})` }}</a>
</span> </span>
<span v-else />
<a <a
:href="`/${release.type || 'scene'}/${release.id}/${release.slug}`" v-if="release.date"
v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
:title="release.url && `View scene on ${release.site.name}`"
:href="release.url"
:class="{ upcoming: isAfter(release.date, new Date()), new: release.isNew }"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="link" class="date"
>{{ formatDate(release.date, 'MMM D, YYYY') }}</a>
<a
v-else
:href="release.url"
:class="{ upcoming: isAfter(release.date, new Date()), new: release.isNew }"
title="Scene date N/A, showing date added"
target="_blank"
rel="noopener noreferrer"
class="date"
>{{ `(${formatDate(release.dateAdded, 'MMM D, YYYY')})` }}</a>
</span>
<a
:href="`/${release.type || 'scene'}/${release.id}/${release.slug}`"
target="_blank"
rel="noopener noreferrer"
class="link"
>
<img
v-if="release.poster"
:data-src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
:data-loading="sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}`"
:alt="release.title"
class="thumbnail"
>
<span
v-else-if="release.covers && release.covers.length > 0"
class="covers"
> >
<img <img
v-if="release.poster" v-for="cover in release.covers"
:data-src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`" :key="cover.id"
:data-loading="sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}`" :data-src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
:data-loading="sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}`"
:alt="release.title" :alt="release.title"
class="thumbnail" class="thumbnail cover"
> >
<span
v-else-if="release.covers && release.covers.length > 0"
class="covers"
>
<img
v-for="cover in release.covers"
:key="cover.id"
:data-src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
:data-loading="sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}`"
:alt="release.title"
class="thumbnail cover"
>
</span>
<div
v-else
:title="release.title"
class="thumbnail"
>No thumbnail available</div>
</a>
</div>
<div class="info">
<a
:href="`/${release.type || 'scene'}/${release.id}/${release.slug}`"
target="_blank"
rel="noopener noreferrer"
class="row link"
>
<h3
v-tooltip.top="release.title"
:title="release.title"
class="title"
>
<Icon
v-if="release.type === 'movie'"
icon="film"
/>{{ release.title }}
</h3>
</a>
<span class="row">
<ul class="actors nolist">
<li
v-for="actor in release.actors"
:key="actor.id"
class="actor"
>
<a
:href="`/actor/${actor.slug}`"
class="actor-link"
>{{ actor.name }}</a>
</li>
</ul>
</span> </span>
<ul <div
:title="release.tags.map(tag => tag.name).join(', ')" v-else
class="tags nolist" :title="release.title"
class="thumbnail"
>No thumbnail available</div>
</a>
</span>
<div class="info">
<a
:href="`/${release.type || 'scene'}/${release.id}/${release.slug}`"
target="_blank"
rel="noopener noreferrer"
class="row link"
>
<h3
v-tooltip.top="release.title"
:title="release.title"
class="title"
> >
<Icon
v-if="release.type === 'movie'"
icon="film"
/>{{ release.title }}
</h3>
</a>
<span class="row">
<ul class="actors nolist">
<li <li
v-for="tag in release.tags" v-for="actor in release.actors"
:key="`tag-${tag.slug}`" :key="actor.id"
class="tag" class="actor"
> >
<router-link <a
:to="`/tag/${tag.slug}`" :href="`/actor/${actor.slug}`"
class="tag-link" class="actor-link"
>{{ tag.name }}</router-link> >{{ actor.name }}</a>
</li> </li>
</ul> </ul>
</div> </span>
<ul
:title="release.tags.map(tag => tag.name).join(', ')"
class="tags nolist"
>
<li
v-for="tag in release.tags"
:key="`tag-${tag.slug}`"
class="tag"
>
<router-link
:to="`/tag/${tag.slug}`"
class="tag-link"
>{{ tag.name }}</router-link>
</li>
</ul>
</div> </div>
</div> </div>
</template> </template>
@ -166,15 +165,6 @@ export default {
type: String, type: String,
default: null, default: null,
}, },
index: {
type: Number,
default: null,
},
},
data() {
return {
isUpcoming: this.isAfter(this.release.date, new Date()),
};
}, },
computed: { computed: {
sfw, sfw,
@ -186,38 +176,23 @@ export default {
@import 'theme'; @import 'theme';
.tile { .tile {
width: 100%; background: $background;
position: relative;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak);
&::before {
content: '';
display: inline-block;
padding: 45%;
}
}
.scene {
width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
position: absolute; padding: 0 0 .5rem 0;
top: 0;
left: 0;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 3px $shadow-weak;
height: 100%;
} }
.poster { .poster {
flex-grow: 1;
height: 0;
position: relative; position: relative;
margin: 0 0 .5rem 0;
} }
.covers { .covers {
background: var(--profile); background: $profile;
display: flex; display: flex;
.cover { .cover {
@ -227,15 +202,16 @@ export default {
.thumbnail { .thumbnail {
width: 100%; width: 100%;
height: 100%; height: 14rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
object-fit: cover; object-fit: cover;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-color: var(--darken-hint); background-color: $shadow-hint;
color: var(--shadow); color: $shadow;
text-shadow: 1px 1px 0 $highlight;
} }
.row { .row {
@ -262,10 +238,10 @@ export default {
.site, .site,
.date { .date {
color: var(--text-light); color: $text-contrast;
display: flex; display: flex;
align-items: center; align-items: center;
background: var(--darken); background: $shadow;
position: relative; position: relative;
font-size: .8rem; font-size: .8rem;
padding: .25rem; padding: .25rem;
@ -275,7 +251,7 @@ export default {
.date { .date {
&.upcoming:before { &.upcoming:before {
content: ''; content: '';
background: var(--primary); background: $primary;
width: .5rem; width: .5rem;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -295,14 +271,14 @@ export default {
.site-link { .site-link {
display: flex; display: flex;
color: var(--text-light); color: $text-contrast;
text-decoration: none; text-decoration: none;
} }
.info { .info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: .5rem 0; flex-grow: 1;
} }
.link { .link {
@ -311,7 +287,7 @@ export default {
.title { .title {
margin: 0 .25rem .25rem 0; margin: 0 .25rem .25rem 0;
color: var(--text); color: $text;
max-height: 2.75rem; max-height: 2.75rem;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
@ -359,26 +335,26 @@ export default {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: var(--primary); color: $primary;
} }
} }
.actor-link { .actor-link {
color: var(--link); color: $link;
} }
.tag-link { .tag-link {
color: var(--shadow); color: $shadow;
display: inline-block; display: inline-block;
padding: .25rem; padding: .25rem;
font-size: .75rem; font-size: .75rem;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
line-height: 1; line-height: 1;
border: solid 1px var(--shadow-hint); border: solid 1px $shadow-hint;
&:hover { &:hover {
color: var(--primary); color: $primary;
} }
} }
</style> </style>