Improved release media layout.

assets/components/actors/actors.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script>
-import Actor from '../tile/actor.vue';
+import Actor from './tile.vue';
 import Gender from './gender.vue';
 import Pagination from '../pagination/pagination.vue';
 
@@ -183,7 +183,7 @@ export default {
 .tiles {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
-    grid-gap: 0 .5rem;
+    grid-gap: .5rem;
     padding: 1rem;
     flex-grow: 1;
 }

assets/components/actors/photos.vue

@@ -73,17 +73,21 @@ export default {
 	scrollbar-width: none;
 
 	&.expanded {
+		flex-wrap: wrap;
+		justify-content: center;
+
+		/*
 		display: grid;
 		grid-gap: .5rem;
 		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+		*/
 
 		.photo-link {
-			margin: 0;
+			margin: 0 .5rem .5rem 0;
 		}
 
 		.photo {
-			width: 100%;
+			height: 18rem;
-			height: 100%;
 		}
 	}
 

assets/components/actors/tile.vue

@@ -0,0 +1,281 @@
+<template>
+	<div
+		v-if="actor"
+		class="actor"
+	>
+		<router-link
+			:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
+			class="link"
+		>
+			<span
+				class="handle"
+			>
+				<span
+					v-tooltip.top="actor.name"
+					class="name"
+				>{{ actor.name }}</span>
+
+				<router-link
+					v-if="actor.network"
+					v-tooltip="actor.network.name"
+					:to="{ name: 'network', params: { networkSlug: actor.network.slug } }"
+					class="favicon"
+				>
+					<img
+						:src="`/img/logos/${actor.network.slug}/favicon.png`"
+						class="favicon-icon"
+					>
+				</router-link>
+
+				<Icon
+					v-if="alias"
+					v-tooltip="`Alias of ${alias.name}`"
+					icon="users3"
+					class="favicon alias"
+				/>
+
+				<Icon
+					v-if="actor.dateOfDeath"
+					v-tooltip="`Died ${formatDate(actor.dateOfDeath, 'MMMM D, YYYY')}`"
+					icon="tombstone"
+					class="favicon died"
+				/>
+			</span>
+
+			<div class="avatar-container">
+				<img
+					v-if="actor.avatar"
+					:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
+					:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
+					class="avatar lazy"
+				>
+
+				<span
+					v-else
+					class="avatar"
+				><img
+					:src="`/img/avatar_${actor.gender || 'female'}.svg`"
+					class="avatar-fallback"
+				></span>
+
+				<span
+					class="details"
+				>
+					<span class="gender-age">
+						<Gender :gender="actor.gender" />
+
+						<span
+							v-if="actor.ageAtDeath"
+							v-tooltip="`Born ${formatDate(actor.dateOfBirth, 'MMMM D, YYYY')}<br>Died ${formatDate(actor.dateOfDeath, 'MMMM D, YYYY')}`"
+							class="age-death"
+						>{{ actor.ageAtDeath }}</span>
+
+						<span
+							v-else-if="actor.age"
+							v-tooltip="`Born on ${formatDate(actor.dateOfBirth, 'MMMM D, YYYY')}`"
+							class="age-now"
+						>{{ actor.age }}</span>
+
+						<span
+							v-if="actor.ageThen && actor.ageThen < actor.age"
+							v-tooltip="`${actor.ageThen} years old on release date`"
+							class="age-then"
+						>{{ actor.ageThen }}</span>
+					</span>
+
+					<span
+						v-if="actor.origin"
+						v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`"
+						class="country"
+					>
+						{{ actor.origin.country.alpha2 }}
+						<img
+							class="flag"
+							:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.svg`"
+						>
+					</span>
+
+					<span
+						v-else
+						class="country"
+					/>
+				</span>
+			</div>
+		</router-link>
+	</div>
+</template>
+
+<script>
+import Gender from './gender.vue';
+
+function sfw() {
+	return this.$store.state.ui.sfw;
+}
+
+export default {
+	components: {
+		Gender,
+	},
+	props: {
+		actor: {
+			type: Object,
+			default: null,
+		},
+		alias: {
+			type: Object,
+			default: null,
+		},
+	},
+	computed: {
+		sfw,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.actor {
+    width: 100%;
+    display: inline-block;
+    position: relative;
+    box-shadow: 0 0 3px var(--darken-weak);
+    background: var(--background);
+	overflow: hidden;
+
+    &::before {
+        content: '';
+        display: inline-block;
+        padding-bottom: 150%;
+    }
+}
+
+.link {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: var(--text);
+    text-decoration: none;
+
+    &:hover {
+        color: var(--primary);
+    }
+}
+
+.handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+	box-shadow: 0 0 3px var(--shadow);
+
+	.name {
+		padding: .5rem;
+	}
+
+	.alias {
+		fill: var(--shadow);
+	}
+}
+
+.favicon {
+	font-size: 0;
+	padding: .5rem .25rem;
+
+	&:last-child {
+		padding: .5rem;
+	}
+
+	&.died {
+		fill: var(--shadow);
+	}
+}
+
+.favicon-icon {
+    width: 1rem;
+    height: 1rem;
+}
+
+.name {
+    flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.avatar-container {
+    display: flex;
+    flex-grow: 1;
+    position: relative;
+	overflow: hidden;
+	background: var(--profile);
+}
+
+.avatar {
+    color: var(--darken-weak);
+    background: var(--darken-hint);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    object-fit: cover;
+    object-position: 50% 0;
+}
+
+.avatar-fallback {
+    max-height: 100%;
+    max-width: 100%;
+    opacity: .1;
+}
+
+.details {
+    background: var(--darken);
+    color: var(--text-light);
+    width: 100%;
+    height: 1.75rem;
+    display: flex;
+    align-items: center;
+	justify-content: space-between;
+    box-sizing: border-box;
+    padding: .5rem;
+    position: absolute;
+    bottom: 0;
+    font-size: .9rem;
+    font-weight: bold;
+}
+
+.gender-age {
+	display: flex;
+	align-items: center;
+}
+
+.gender {
+	margin: .25rem .25rem 0 0;
+}
+
+.country {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.flag {
+    height: .75rem;
+    margin: 0 0 0 .5rem;
+}
+
+.age-now,
+.age-death {
+	margin: 0 .25rem 0 0;
+}
+
+.age-then {
+    color: var(--lighten);
+}
+</style>

assets/components/container/container.vue

@@ -80,6 +80,7 @@ export default {
     flex-direction: column;
     flex-grow: 1;
     overflow-y: auto;
+	overflow-x: hidden;
 }
 
 .content-inner {

assets/components/entities/entity.vue

@@ -51,7 +51,10 @@
 			ref="content"
 			class="content-inner"
 		>
-			<Scroll class="scroll-dark">
+			<Scroll
+				v-if="entity.children.length > 0"
+				class="scroll-dark"
+			>
 				<Children :entity="entity" />
 
 				<template v-slot:expanded>

assets/components/releases/media.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="banner">
+	<div class="media">
-		<div class="trailer">
+		<div class="trailer-container">
 			<video
 				v-if="release.trailer"
 				:src="`/media/${release.trailer.path}`"
@@ -66,7 +66,7 @@
 
 		<a
 			v-for="photo in photos"
-			:key="`banner-${photo.index}`"
+			:key="`media-${photo.index}`"
 			:href="`/media/${photo.path}`"
 			:class="{ sfw }"
 			class="item-link"
@@ -101,9 +101,11 @@ function photos() {
 	}
 
 	if (this.release.poster) {
+		// no trailer, add poster to photos
 		return [this.release.poster].concat(this.release.photos);
 	}
 
+	// no poster available
 	return this.release.photos;
 }
 
@@ -130,19 +132,31 @@ export default {
 <style lang="scss" scoped>
 @import 'theme';
 
-.banner {
+.media {
     background: var(--background-dim);
     flex-shrink: 0;
     white-space: nowrap;
     overflow-x: auto;
     scrollbar-width: none;
 	scroll-behavior: smooth;
+	padding: .5rem;
     font-size: 0;
 
 	&.expanded {
 		display: flex;
 		flex-wrap: wrap;
-		justify-content: center;
+
+		.item-link,
+		.trailer {
+			margin: 0 .5rem .5rem 0;
+			max-width: 100%;
+			height: 18rem;
+			flex: 1;
+		}
+
+		.item {
+			height: 100%;
+		}
 	}
 
     &::-webkit-scrollbar {
@@ -178,12 +192,12 @@ export default {
 }
 
 .item-link,
-.trailer {
+.trailer-container {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-	margin: .5rem;
+	margin: 0 .5rem 0 0;
 	box-shadow: 0 0 3px var(--shadow-weak);
 
     .warning {
@@ -221,14 +235,18 @@ export default {
 .item {
     height: 18rem;
     vertical-align: middle;
+	object-fit: cover;
 }
 
-.trailer {
+.trailer-container {
-    max-width: 100vw;
+	height: 18rem;
+	width: 32rem;
+    max-width: 100%;
 }
 
 .trailer-video {
-    max-width: 100%;
+    width: 100%;
+	height: 100%;
 	object-fit: cover;
 
     &.sfw {
@@ -247,9 +265,10 @@ export default {
     }
 }
 
-@media(max-width: $breakpoint2) {
+@media(max-width: $breakpoint0) {
-    .trailer-video {
+	.media:not(.expanded) .item,
-        object-fit: contain;
+    .trailer-container {
+		height: 56vw; /* 16:9 ratio for full-width video */
     }
 }
 </style>

assets/components/releases/release.vue

@@ -5,68 +5,8 @@
 	>
 		<div class="details">
 			<div class="column">
-				<a
+				<div class="site">
-					v-if="release.date"
-					v-tooltip.bottom="release.url && `View scene on ${release.entity.name}`"
-					:title="release.url && `View scene on ${release.entity.name}`"
-					:href="release.url"
-					:class="{ link: release.url }"
-					target="_blank"
-					rel="noopener noreferrer"
-					class="tidbit date"
-				>
-					<Icon
-						v-if="isAfter(new Date(), release.date)"
-						icon="calendar2"
-					/>
-
-					<Icon
-						v-else
-						v-tooltip.bottom="'To be released'"
-						icon="sun3"
-					/>
-
-					<span class="showable">{{ formatDate(release.date, 'MMM D, YYYY') }}</span>
-					<span class="hideable">{{ formatDate(release.date, 'MMMM D, YYYY') }}</span>
-				</a>
-
-				<span
-					v-if="release.shootId"
-					v-tooltip.bottom="`Shoot #`"
-					class="tidbit shoot hideable"
-				>
-					<Icon icon="clapboard-play" />
-					{{ release.shootId }}
-				</span>
-
-				<span
-					v-if="release.duration"
-					v-tooltip.bottom="`Duration`"
-					class="tidbit duration hideable"
-				>
-					<Icon icon="stopwatch" />
-
-					<span
-						v-if="release.duration >= 3600"
-						class="duration-segment"
-					>{{ Math.floor(release.duration / 3600).toString().padStart(2, '0') }}:</span>
-					<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
-					<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
-				</span>
-
-				<span class="tidbit site">
 					<template v-if="release.entity.parent">
-						<a :href="`/network/${release.entity.parent.slug}`">
-							<img
-								:src="`/img/logos/${release.entity.parent.slug}/thumbs/network.png`"
-								:title="release.entity.parent.name"
-								:alt="release.entity.parent.name"
-								class="logo logo-network"
-							>
-						</a>
-
-						<span class="chain">presents</span>
-
 						<a
 							:href="`/${release.entity.type}/${release.entity.slug}`"
 						>
@@ -76,6 +16,18 @@
 								class="logo logo-site"
 							>
 						</a>
+
+						<span class="chain">by</span>
+
+						<a :href="`/network/${release.entity.parent.slug}`">
+							<img
+								:src="`/img/logos/${release.entity.parent.slug}/thumbs/network.png`"
+								:title="release.entity.parent.name"
+								:alt="release.entity.parent.name"
+								class="logo logo-network"
+							>
+						</a>
+
 					</template>
 
 					<a
@@ -88,15 +40,31 @@
 							class="logo logo-site"
 						>
 					</a>
-				</span>
+				</div>
+
+				<div class="tidbits">
+					<a
+						v-if="release.date"
+						v-tooltip.bottom="release.url && `View scene on ${release.entity.name}`"
+						:title="release.url && `View scene on ${release.entity.name}`"
+						:href="release.url"
+						:class="{ link: release.url }"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="tidbit date"
+					>
+						<span class="showable">{{ formatDate(release.date, 'MMM D, YYYY') }}</span>
+						<span class="hideable">{{ formatDate(release.date, 'MMMM D, YYYY') }}</span>
+					</a>
+				</div>
 			</div>
 		</div>
 
 		<Scroll class="scroll-light">
-			<Banner :release="release" />
+			<Media :release="release" />
 
 			<template v-slot:expanded>
-				<Banner
+				<Media
 					:release="release"
 					class="expanded"
 				/>
@@ -104,9 +72,15 @@
 		</Scroll>
 
 		<div class="info column">
-			<h2 class="row title">{{ release.title }}</h2>
+			<div class="row title-container">
+				<h2 class="title">{{ release.title }}</h2>
+
+				<span
+					v-if="release.shootId"
+					class="title-shoot"
+				>{{ release.shootId }}</span>
+			</div>
 
-			<span class="row-label">Actors</span>
 			<div class="row associations">
 				<ul
 					v-lazy-container="{ selector: '.lazy' }"
@@ -159,12 +133,12 @@
 				</ul>
 			</div>
 
+			<span class="row-label">Duration</span>
+
 			<div
 				v-if="release.duration"
-				class="row duration showable"
+				class="row duration"
 			>
-				<Icon icon="stopwatch" />
-
 				<span
 					v-if="release.duration >= 3600"
 					class="duration-segment"
@@ -199,7 +173,7 @@
 
 			<div
 				v-if="release.shootId"
-				class="row showable"
+				class="row"
 			>
 				<Icon icon="clapboard-play" />
 
@@ -230,8 +204,8 @@
 // import config from 'config';
 // import format from 'template-format';
 
-import Banner from './banner.vue';
+import Media from './media.vue';
-import Actor from '../tile/actor.vue';
+import Actor from '../actors/tile.vue';
 import Release from '../tile/release.vue';
 import Releases from './releases.vue';
 import Scroll from '../scroll/scroll.vue';
@@ -256,7 +230,7 @@ async function mounted() {
 export default {
 	components: {
 		Actor,
-		Banner,
+		Media,
 		Release,
 		Releases,
 		Scroll,
@@ -284,6 +258,82 @@ export default {
     box-sizing: border-box;
 }
 
+.details {
+    background: var(--profile);
+    color: var(--text-light);
+    box-shadow: 0 0 3px var(--shadow-weak);
+    cursor: default;
+
+    .column {
+        display: flex;
+		justify-content: space-between;
+        align-items: center;
+        padding: 0 1rem;
+    }
+
+    .link {
+        color: var(--text-light);
+    }
+}
+
+.tidbits {
+	flex-shrink: 0;
+}
+
+.tidbit {
+    display: inline-flex;
+	align-items: center;
+    height: 100%;
+
+    &:not(:last-child) {
+        border-right: solid 1px var(--lighten-hint);
+    }
+
+    .icon {
+        fill: var(--lighten-weak);
+        margin: 0 .25rem 0 0;
+    }
+
+	&.date {
+        flex-shrink: 0;
+        padding: 0 1rem;
+		font-weight: bold;
+    }
+}
+
+.site {
+    display: inline-flex;
+    align-items: center;
+    padding: .25rem 0;
+    font-size: 0;
+}
+
+.logo {
+    display: inline-block;
+}
+
+.logo-site {
+    height: 3rem;
+	width: 100%;
+    max-width: 15rem;
+    object-fit: contain;
+    object-position: 100% 50%;
+}
+
+.logo-network {
+    height: 1.5rem;
+    max-width: 10rem;
+    object-fit: contain;
+    object-position: 100% 50%;
+}
+
+.chain {
+    color: var(--lighten);
+    padding: 0 .5rem;
+    font-weight: bold;
+    font-size: .8rem;
+}
+
 .info {
     padding: 1rem;
     border-left: solid 1px var(--shadow-hint);
@@ -320,81 +370,20 @@ export default {
 	}
 }
 
-.details {
+.title-container {
-    background: var(--profile);
-    color: var(--text-light);
-    box-shadow: 0 0 3px var(--shadow-weak);
-    cursor: default;
-
-    .column {
 	display: flex;
-        align-items: center;
+	justify-content: space-between;
-        padding: 0 1rem;
-    }
-
-    .link {
-        color: var(--text-light);
-    }
-}
-
-.tidbit {
-    display: inline-block;
-    height: 100%;
-
-    &:not(:last-child) {
-        border-right: solid 1px var(--lighten-hint);
-    }
-
-    .icon {
-        fill: var(--lighten-weak);
-        margin: 0 .25rem 0 0;
-    }
-
-    &.date,
-    &.duration,
-    &.shoot {
-        flex-shrink: 0;
-        padding: 1.25rem 1rem 1.25rem 0;
-        margin: 0 1rem 0 0;
-    }
-}
-
-.site {
-    display: inline-flex;
-    flex-grow: 1;
-    align-items: center;
-    justify-content: flex-end;
-    padding: .25rem 0;
-    font-size: 0;
-}
-
-.logo {
-    display: inline-block;
-}
-
-.logo-site {
-    height: 3rem;
-    max-width: 15rem;
-    object-fit: contain;
-    object-position: 100% 50%;
-}
-
-.logo-network {
-    height: 1.5rem;
-    max-width: 10rem;
-    object-fit: contain;
-    object-position: 100% 50%;
-}
-
-.chain {
-    color: var(--lighten);
-    padding: 0 .5rem;
-    font-weight: bold;
-    font-size: .8rem;
 }
 
 .title {
-    margin: 0 0 1.5rem 0;
+	margin: 0;
+}
+
+.title-shoot {
+	margin: 0 0 0 .5rem;
+	color: var(--shadow);
+	font-size: .9rem;
+	font-weight: bold;
 }
 
 .description {
@@ -409,18 +398,18 @@ export default {
     font-size: 1rem;
 }
 
+.scroll {
+	border-bottom: solid 1px var(--shadow-hint);
+}
+
 .actors {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    grid-gap: 1rem;
+    grid-gap: .5rem;
     flex-grow: 1;
     flex-wrap: wrap;
 }
 
-.actor {
-    margin: 0 1rem .5rem 0;
-}
-
 .filename {
     width: 100%;
     padding: .5rem;
@@ -481,8 +470,7 @@ export default {
         display: inline-block;
     }
 
-    .logo-site {
+	.site {
-        width: 15rem;
 		max-width: 100%;
 	}
 

assets/components/scroll/scroll.vue

@@ -7,6 +7,7 @@
 			@expand="(state) => expanded = state"
 		/>
 
+		<div class="scrollable">
 			<Expand
 				v-if="expanded"
 				:expanded="expanded"
@@ -34,16 +35,17 @@
 				:class="{ 'scroll-end': scrollAtEnd }"
 				@click="scroll('right')"
 			><Icon icon="arrow-right3" /></div>
+		</div>
 
 		<Expand
-			v-if="expandable && scrollable"
+			v-if="expanded || (expandable && scrollable)"
 			:expanded="expanded"
 			class="expand-dark"
 			@expand="(state) => expanded = state"
 		/>
 
 		<Expand
-			v-if="expandable && scrollable"
+			v-if="expanded || (expandable && scrollable)"
 			:expanded="expanded"
 			class="expand-light"
 			@expand="(state) => expanded = state"
@@ -78,6 +80,8 @@ function mounted() {
 	});
 
 	window.addEventListener('resize', this.updateScroll);
+
+	this.updateScroll();
 	setTimeout(() => this.updateScroll(), 500); // allow CSS to calculate
 }
 
@@ -86,6 +90,10 @@ function beforeDestroy() {
 	window.removeEventListener('resize', this.updateScroll);
 }
 
+function updated() {
+	this.updateScroll();
+}
+
 export default {
 	components: {
 		Expand,
@@ -110,6 +118,7 @@ export default {
 		};
 	},
 	mounted,
+	updated,
 	beforeDestroy,
 	methods: {
 		scroll,
@@ -123,8 +132,6 @@ export default {
 
 .scroll {
 	background: var(--profile);
-	position: relative;
-	padding: 0 1rem 0 0;
 
 	&.expanded {
 		padding: 0;
@@ -135,6 +142,10 @@ export default {
 	}
 }
 
+.scrollable {
+	position: relative;
+}
+
 .expand-light {
 	display: none;
 }

assets/components/tags/tile.vue

@@ -1,6 +1,6 @@
 <template>
 	<router-link
-		:to="{ name: 'tag', params: { tagSlug: tag.slug, tags: 'all-tags', range: 'latest' } }"
+		:to="{ name: 'tag', params: { tagSlug: tag.slug, range: 'latest' } }"
 		:title="tag.name"
 		class="tile"
 	>

assets/js/router.js

@@ -113,7 +113,7 @@ const routes = [
 		}),
 	},
 	{
-		path: '/tag/:tagSlug:range',
+		path: '/tag/:tagSlug/:range',
 		component: Tag,
 		name: 'tag',
 	},

docs/associated-tags.sql

@@ -0,0 +1,5 @@
+SELECT tags.name FROM actors
+LEFT JOIN releases_actors ON releases_actors.actor_id = actors.id
+LEFT JOIN releases_tags ON releases_tags.release_id = releases_actors.release_id
+LEFT JOIN tags ON tags.id = releases_tags.tag_id
+WHERE actors.slug = 'vina-sky';