From 79c7847f1c954eb4d347e764fb98373dd9ebabef Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Mon, 27 Apr 2020 04:00:16 +0200
Subject: [PATCH] Preserving aspect ratio on release tiles.

---
 assets/components/releases/releases.vue |  14 +-
 assets/components/tile/actor.vue        |   2 -
 assets/components/tile/release.vue      | 266 +++++++++++++-----------
 assets/js/actors/actions.js             |   2 +-
 src/media.js                            |   4 +-
 5 files changed, 147 insertions(+), 141 deletions(-)

diff --git a/assets/components/releases/releases.vue b/assets/components/releases/releases.vue
index 81bb4f19..ffbb23b0 100644
--- a/assets/components/releases/releases.vue
+++ b/assets/components/releases/releases.vue
@@ -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>
diff --git a/assets/components/tile/actor.vue b/assets/components/tile/actor.vue
index 0bdd0f65..5b014a5f 100644
--- a/assets/components/tile/actor.vue
+++ b/assets/components/tile/actor.vue
@@ -113,8 +113,6 @@ export default {
     &::before {
         content: '';
         display: inline-block;
-        width: 1px;
-        height: 0;
         padding-bottom: 150%;
     }
 }
diff --git a/assets/components/tile/release.vue b/assets/components/tile/release.vue
index 62cdf8fa..0f3b8daa 100644
--- a/assets/components/tile/release.vue
+++ b/assets/components/tile/release.vue
@@ -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 {
diff --git a/assets/js/actors/actions.js b/assets/js/actors/actions.js
index f1ae840b..863a413d 100644
--- a/assets/js/actors/actions.js
+++ b/assets/js/actors/actions.js
@@ -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,
         });
 
diff --git a/src/media.js b/src/media.js
index 410ceb45..e5782d86 100644
--- a/src/media.js
+++ b/src/media.js
@@ -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,
             );