Restored old release tile layout.

assets/components/tile/release.vue

@@ -1,152 +1,151 @@
 <template>
     <div
         :id="`${release.type}-${release.id}`"
+        :class="{ [release.type]: true }"
         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
-                        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}`"
-                        class="site site-link"
+                        class="site-link"
                     ><img
                         :src="`/img/logos/${release.network.slug}/favicon.png`"
                         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 v-else />
+
                 <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"
                     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
-                        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"
-                        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>
 
-                <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
-                        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>
                 </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>
 </template>
@@ -166,15 +165,6 @@ export default {
             type: String,
             default: null,
         },
-        index: {
-            type: Number,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            isUpcoming: this.isAfter(this.release.date, new Date()),
-        };
     },
     computed: {
         sfw,
@@ -186,38 +176,23 @@ export default {
 @import 'theme';
 
 .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;
     flex-direction: column;
     box-sizing: border-box;
-    position: absolute;
+    padding: 0 0 .5rem 0;
-    top: 0;
-    left: 0;
     overflow: hidden;
+    box-shadow: 0 0 3px $shadow-weak;
+    height: 100%;
 }
 
 .poster {
-    flex-grow: 1;
-    height: 0;
     position: relative;
+    margin: 0 0 .5rem 0;
 }
 
 .covers {
-    background: var(--profile);
+    background: $profile;
     display: flex;
 
     .cover {
@@ -227,15 +202,16 @@ export default {
 
 .thumbnail {
     width: 100%;
-    height: 100%;
+    height: 14rem;
     display: flex;
     justify-content: center;
     align-items: center;
     object-fit: cover;
     background-position: center;
     background-size: cover;
-    background-color: var(--darken-hint);
+    background-color: $shadow-hint;
-    color: var(--shadow);
+    color: $shadow;
+    text-shadow: 1px 1px 0 $highlight;
 }
 
 .row {
@@ -262,10 +238,10 @@ export default {
 
 .site,
 .date {
-    color: var(--text-light);
+    color: $text-contrast;
     display: flex;
     align-items: center;
-    background: var(--darken);
+    background: $shadow;
     position: relative;
     font-size: .8rem;
     padding: .25rem;
@@ -275,7 +251,7 @@ export default {
 .date {
     &.upcoming:before {
         content: '';
-        background: var(--primary);
+        background: $primary;
         width: .5rem;
         display: inline-block;
         position: absolute;
@@ -295,14 +271,14 @@ export default {
 
 .site-link {
     display: flex;
-    color: var(--text-light);
+    color: $text-contrast;
     text-decoration: none;
 }
 
 .info {
     display: flex;
     flex-direction: column;
-    padding: .5rem 0;
+    flex-grow: 1;
 }
 
 .link {
@@ -311,7 +287,7 @@ export default {
 
 .title {
     margin: 0 .25rem .25rem 0;
-    color: var(--text);
+    color: $text;
     max-height: 2.75rem;
     font-size: 1rem;
     line-height: 1.5;
@@ -359,26 +335,26 @@ export default {
     text-decoration: none;
 
     &:hover {
-        color: var(--primary);
+        color: $primary;
     }
 }
 
 .actor-link {
-    color: var(--link);
+    color: $link;
 }
 
 .tag-link {
-    color: var(--shadow);
+    color: $shadow;
     display: inline-block;
     padding: .25rem;
     font-size: .75rem;
     font-weight: bold;
     text-decoration: none;
     line-height: 1;
-    border: solid 1px var(--shadow-hint);
+    border: solid 1px $shadow-hint;
 
     &:hover {
-        color: var(--primary);
+        color: $primary;
     }
 }
 </style>