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

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

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

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

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

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

@ -172,7 +172,7 @@ function initActorActions(store, _router) {
limit,
after: store.getters.after,
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,
});

4
src/media.js
View File

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