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/tag.vue

@@ -13,41 +13,26 @@
 					{{ tag.name }}
 				</h2>
 
-				<p
+				<div
 					v-if="description"
 					class="description header-description"
 					v-html="description"
 				/>
 			</div>
 
-			<div class="sidebar">
-				<h2 class="title">
-					<Icon icon="price-tag4" />
-					{{ tag.name }}
-				</h2>
-
-				<div class="sidebar-content">
-					<p
-						v-if="description"
-						class="description"
-						v-html="description"
-					/>
-
-					<Photos
-						v-if="hasMedia"
-						:tag="tag"
-					/>
-				</div>
-			</div>
-
+			<Scroll
+				v-if="hasMedia"
+				:expanded="expanded"
+				class="scroll-light"
+				@expand="(state) => expanded = state"
+			>
+				<Photos
+					:tag="tag"
+					:class="{ expanded }"
+				/>
+			</Scroll>
 
 			<div class="content-inner">
-				<Photos
-					v-if="hasMedia"
-					:tag="tag"
-					class="compact"
-				/>
-
 				<FilterBar :fetch-releases="fetchReleases" />
 				<Releases :releases="tag.releases" />
 			</div>
@@ -64,6 +49,7 @@ import escapeHtml from '../../../src/utils/escape-html';
 import FilterBar from '../header/filter-bar.vue';
 import Photos from './photos.vue';
 import Releases from '../releases/releases.vue';
+import Scroll from '../scroll/scroll.vue';
 
 const converter = new Converter();
 
@@ -89,8 +75,9 @@ async function mounted() {
 export default {
 	components: {
 		FilterBar,
-		Photos,
 		Releases,
+		Photos,
+		Scroll,
 	},
 	data() {
 		return {
@@ -99,6 +86,7 @@ export default {
 			releases: null,
 			pageTitle: null,
 			hasMedia: false,
+			expanded: false,
 		};
 	},
 	watch: {
@@ -133,71 +121,14 @@ export default {
 <style lang="scss" scoped>
 @import 'theme';
 
-.tag {
-    display: flex;
-    flex-grow: 1;
-    overflow: hidden;
-
-    &.nomedia {
-        flex-direction: column;
-
-        .sidebar {
-            display: none;
-        }
-
-        .header {
-            display: flex;
-        }
-    }
-}
-
-.content-inner {
-    padding: 0;
-	overflow-y: auto;
-}
-
 .header {
     background: var(--profile);
     color: var(--text-light);
-    display: none;
     justify-content: space-between;
-    padding: .5rem 1rem;
-
-    .title {
-        margin: 0 2rem 0 0;
-    }
-}
-
-.sidebar {
-    background: var(--profile);
-    color: var(--text-light);
-    display: flex;
-    flex-direction: column;
-	flex-shrink: 0;
-    width: 25rem;
-    box-sizing: border-box;
-    overflow: hidden;
-
-    .title {
-        padding: 1rem;
-    }
-
-    .description {
-        padding: 0 1rem;
-        margin: -1rem 0 0 0;
-    }
-
-    &.empty {
-        display: none;
-    }
-}
-
-.sidebar-content {
-    overflow-y: auto;
 }
 
 .title {
-    padding: 0;
+    padding: 1rem;
     margin: 0;
     flex-shrink: 0;
     text-transform: capitalize;
@@ -210,33 +141,11 @@ export default {
 }
 
 .description {
-    margin: 0;
+	padding: 0 1rem 1rem 1rem;
     line-height: 1.5;
 }
 
-.releases {
-    padding: 1rem;
-}
-
 .dark .sidebar {
     border-right: solid 1px var(--shadow-hint);
 }
-
-@media(max-width: $breakpoint3) {
-    .tag {
-        flex-direction: column;
-    }
-
-    .sidebar {
-        display: none;
-    }
-
-    .header {
-        display: flex;
-    }
-
-    .photos.compact {
-        display: flex;
-    }
-}
 </style>