Preserving aspect ratio on release tiles.

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>

assets/components/tile/actor.vue

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

assets/components/tile/release.vue

@@ -1,10 +1,10 @@
 <template>
     <div
         :id="`${release.type}-${release.id}`"
-        :class="{ [release.type]: true }"
         class="tile"
     >
-        <span class="poster">
+        <div class="scene">
+            <div class="poster">
                 <span class="details">
                     <router-link
                         v-if="release.site && release.site.independent"
@@ -93,7 +93,7 @@
                         class="thumbnail"
                     >No thumbnail available</div>
                 </a>
-        </span>
+            </div>
 
             <div class="info">
                 <a
@@ -146,6 +146,7 @@
                 </ul>
             </div>
         </div>
+    </div>
 </template>
 
 <script>
@@ -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 {

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,
         });
 

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,
             );