Updated tag page layout. Added shoot date property. Showing parent favicon on compact entity page. Re-added 'new' indicator on tile. Added Family Sinner to Mile High Media. Various fixes and improvements.

assets/components/tags/photos.vue

@@ -1,104 +1,105 @@
 <template>
-    <div class="photos">
-        <ul class="nolist photos-inner">
-            <li>
-                <a
-                    v-if="tag.poster"
-                    :href="`/img/${poster.path}`"
-                    :title="poster.comment"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="photo-link"
-                >
-                    <img
-                        :src="`/img/${poster.thumbnail}`"
-                        :alt="tag.poster.comment"
-                        class="poster"
-                    >
-                </a>
-            </li>
+	<div class="photos">
+		<a
+			v-if="tag.poster"
+			:href="`/img/${poster.path}`"
+			:title="poster.comment"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="photo-link"
+		>
+			<img
+				:src="`/img/${poster.thumbnail}`"
+				:alt="tag.poster.comment"
+				class="poster"
+			>
+		</a>
 
-            <li
-                v-for="photo in photos"
-                :key="`photo-${photo.id}`"
-            >
-                <a
-                    :title="photo.comment"
-                    :href="`/img/${photo.path}`"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="photo-link"
-                >
-                    <img
-                        :src="`/img/${photo.thumbnail}`"
-                        :alt="photo.comment"
-                        class="photo"
-                    >
-                </a>
-            </li>
-        </ul>
-    </div>
+		<a
+			v-for="photo in photos"
+			:key="`photo-${photo.id}`"
+			:title="photo.comment"
+			:href="`/img/${photo.path}`"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="photo-link"
+		>
+			<img
+				:src="`/img/${photo.thumbnail}`"
+				:alt="photo.comment"
+				class="photo"
+			>
+		</a>
+	</div>
 </template>
 
 <script>
 function poster() {
-    if (this.$store.state.ui.sfw) {
-        return this.tag.poster.sfw;
-    }
+	if (this.$store.state.ui.sfw) {
+		return this.tag.poster.sfw;
+	}
 
-    return this.tag.poster;
+	return this.tag.poster;
 }
 
 function photos() {
-    if (this.$store.state.ui.sfw) {
-        return this.tag.photos.map(photo => photo.sfw);
-    }
+	if (this.$store.state.ui.sfw) {
+		return this.tag.photos.map(photo => photo.sfw);
+	}
 
-    return this.tag.photos;
+	return this.tag.photos;
 }
 
 export default {
-    props: {
-        tag: {
-            type: Object,
-            default: null,
-        },
-    },
-    computed: {
-        poster,
-        photos,
-    },
+	props: {
+		tag: {
+			type: Object,
+			default: null,
+		},
+	},
+	computed: {
+		poster,
+		photos,
+	},
 };
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
-
 .photos {
-    background: $profile;
-    display: flex;
-    padding: 0 1rem;
-    overflow: hidden;
+	width: 100%;
+	padding: 1rem 1rem 0 1rem;
+	box-sizing: border-box;
+	overflow-x: auto;
+	white-space: nowrap;
+    scrollbar-width: none;
+	scroll-behavior: smooth;
+    font-size: 0;
 
-    &.compact {
+    &::-webkit-scrollbar {
         display: none;
-        padding: 0 1rem 0 1rem;
-        overflow-x: auto;
-
-        .photos-inner {
-            flex-shrink: 0;
-        }
-
-        .photo-link {
-            display: inline-block;
-            margin: 0 .5rem 0 0;
-        }
     }
+
+	&.expanded {
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		padding: 0 1rem;
+
+		.poster,
+		.photo {
+			height: 18rem;
+			margin: 0 .5rem .5rem 0;
+		}
+	}
+}
+
+.photo-link:not(:last-child) {
+	margin: 0 .5rem 0 0;
 }
 
 .poster,
 .photo {
-    width: 100%;
-    margin: 0 0 .5rem 0;
+	height: 15rem;
+	box-shadow: 0 0 3px var(--shadow-weak);
 }
 </style>