boiii
/
traxxx
forked from DebaucheryLibrarian/traxxx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Preserving aspect ratio on release tiles.

This commit is contained in:
ThePendulum 2020-04-27 04:00:16 +02:00
parent f684923a8a
commit 79c7847f1c
5 changed files with 147 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/components/releases/releases.vue
View File

@ -76,7 +76,7 @@ export default {
.tiles { .tiles {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr)); grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
grid-gap: 1rem; grid-gap: 1rem;
} }
@ -85,21 +85,15 @@ export default {
font-weight: bold; font-weight: bold;
} }
@media(max-width: $breakpoint4) {
.tiles {
grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
}
}
@media(max-width: $breakpoint3) { @media(max-width: $breakpoint3) {
.tiles { .tiles {
grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr)); grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
} }
} }
@media(max-width: $breakpoint) { @media(max-width: $breakpoint2) {
.tiles { .tiles {
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
} }
} }
</style> </style>

2
assets/components/tile/actor.vue
View File

@ -113,8 +113,6 @@ export default {
&::before { &::before {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 1px;
height: 0;
padding-bottom: 150%; padding-bottom: 150%;
} }
} }

266
assets/components/tile/release.vue
View File

@ -1,149 +1,150 @@
<template> <template>
<div <div
:id="`${release.type}-${release.id}`" :id="`${release.type}-${release.id}`"
:class="{ [release.type]: true }"
class="tile" class="tile"
> >
<span class="poster"> <div class="scene">
<span class="details"> <div class="poster">
<router-link <span class="details">
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-tooltip.bottom="`Part of ${release.network.name}`" v-if="release.site && release.site.independent"
:title="`Part of ${release.network.name}`"
:to="`/network/${release.network.slug}`" :to="`/network/${release.network.slug}`"
class="site-link" class="site site-link"
><img ><img
:src="`/img/logos/${release.network.slug}/favicon.png`" :src="`/img/logos/${release.network.slug}/favicon.png`"
class="favicon" class="favicon"
></router-link> >{{ release.network.name }}</router-link>
<router-link <span
v-tooltip.bottom="`More from ${release.site.name}`" v-else-if="release.network"
:title="`More from ${release.site.name}`" class="site"
:to="`/site/${release.site.slug}`" >
class="site-link" <router-link
>{{ release.site.name }}</router-link> v-tooltip.bottom="`Part of ${release.network.name}`"
: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
v-if="release.date" :href="`/${release.type || 'scene'}/${release.id}/${release.slug}`"
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" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="date" class="link"
>{{ 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"
:src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
:alt="release.title"
class="thumbnail"
>
<span
v-else-if="release.covers && release.covers.length > 0"
class="covers"
> >
<img <img
v-for="cover in release.covers" v-if="release.poster"
:key="cover.id" :src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
:src="`/${release.batch === 'dummy' ? 'img' : 'media'}/${cover.thumbnail}`"
:alt="release.title" :alt="release.title"
class="thumbnail cover" class="thumbnail"
> >
<span
v-else-if="release.covers && release.covers.length > 0"
class="covers"
>
<img
v-for="cover in release.covers"
:key="cover.id"
:src="`/${release.batch === 'dummy' ? 'img' : 'media'}/${cover.thumbnail}`"
: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>
<div <ul
v-else :title="release.tags.map(tag => tag.name).join(', ')"
:title="release.title" class="tags nolist"
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="actor in release.actors" v-for="tag in release.tags"
:key="actor.id" :key="`tag-${tag.slug}`"
class="actor" class="tag"
> >
<a <router-link
:href="`/actor/${actor.slug}`" :to="`/tag/${tag.slug}`"
class="actor-link" class="tag-link"
>{{ actor.name }}</a> >{{ tag.name }}</router-link>
</li> </li>
</ul> </ul>
</span> </div>
<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>
@ -183,19 +184,34 @@ export default {
@import 'theme'; @import 'theme';
.tile { .tile {
width: 100%;
position: relative;
background: var(--background); 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;
padding: 0 0 .5rem 0; position: absolute;
top: 0;
left: 0;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 3px var(--shadow-weak);
height: 100%;
} }
.poster { .poster {
flex-grow: 1;
height: 0;
position: relative; position: relative;
margin: 0 0 .5rem 0;
} }
.covers { .covers {
@ -209,7 +225,7 @@ export default {
.thumbnail { .thumbnail {
width: 100%; width: 100%;
height: 14rem; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -284,7 +300,7 @@ export default {
.info { .info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; padding: .5rem 0;
} }
.link { .link {

2
assets/js/actors/actions.js
View File

@ -172,7 +172,7 @@ function initActorActions(store, _router) {
limit, limit,
after: store.getters.after, after: store.getters.after,
before: store.getters.before, before: store.getters.before,
orderBy: store.getters.orderBy, orderBy: store.getters.orderBy === 'DATE_DESC' ? 'RELEASE_BY_RELEASE_ID__DATE_DESC' : 'RELEASE_BY_RELEASE_ID__DATE_ASC',
exclude: store.state.ui.filter, exclude: store.state.ui.filter,
}); });

4
src/media.js
View File

@ -356,7 +356,6 @@ async function fetchSource(source, baseMedia) {
if (type === 'image') { if (type === 'image') {
// generate thumbnail // generate thumbnail
/*
metaStream metaStream
.clone() .clone()
.resize({ .resize({
@ -366,7 +365,6 @@ async function fetchSource(source, baseMedia) {
.jpeg({ quality: config.media.thumbnailQuality }) .jpeg({ quality: config.media.thumbnailQuality })
.pipe(tempThumbTarget) .pipe(tempThumbTarget)
.on('error', error => logger.error(error)); .on('error', error => logger.error(error));
*/
} }
// pipeline destroys streams, so attach info event first // pipeline destroys streams, so attach info event first
@ -375,7 +373,7 @@ async function fetchSource(source, baseMedia) {
await pipeline( await pipeline(
res.originalRes, res.originalRes,
// metaStream, metaStream,
hashStream, hashStream,
tempFileTarget, tempFileTarget,
); );