Improved scene page layout, increased watch button size.

pages/scene/+Page.vue

@@ -134,17 +134,19 @@
 					/>
 
 					<div class="view">
+						<!--
 						<button
 							v-if="scene.photos.length > 0"
 							class="button view nolink"
 						>View photos</button>
+						-->
 
 						<Link
 							v-if="scene.url"
 							:href="scene.url"
 							target="_blank"
 							class="button button-primary watch nolink"
-						>Watch scene</Link>
+						>Watch full video</Link>
 					</div>
 				</div>
 			</div>
@@ -245,18 +247,23 @@
 						class="detail"
 					>
 						<h3 class="heading">Quality</h3>
-						{{ scene.qualities.map((quality) => `${quality}p`).join(', ') }}
+
+						<template v-if="qualities[scene.qualities[0]]">{{ qualities[scene.qualities[0]] }} ({{ scene.qualities[0] }}p)</template>
+						<template v-else>{{ scene.qualities[0] }}p</template>
 					</div>
 				</div>
 
 				<div class="section details">
 					<div class="detail">
 						<h3 class="heading">Added</h3>
-						<span class="added-date">{{ formatDate(scene.createdAt, 'yyyy-MM-dd') }}</span>
-						<span
-							:title="`Batch ${scene.createdBatchId}`"
-							class="added-batch"
-						>#{{ scene.createdBatchId }}</span>
+
+						<span>
+							<span class="added-date">{{ formatDate(scene.createdAt, 'yyyy-MM-dd') }}</span>
+							<span
+								:title="`Batch ${scene.createdBatchId}`"
+								class="added-batch"
+							>#{{ scene.createdBatchId }}</span>
+						</span>
 					</div>
 
 					<div
@@ -314,6 +321,17 @@ const { scene } = pageProps;
 const playing = ref(false);
 const paused = ref(false);
 
+const qualities = {
+	2160: '4K',
+	1440: 'Quad HD',
+	1080: 'Full HD',
+	720: 'HD',
+	576: 'PAL VHS',
+	540: 'qHD',
+	480: 'VGA',
+	360: 'nHD',
+};
+
 const poster = computed(() => {
 	if (scene.poster) {
 		return getPath(scene.poster, 'thumbnail');
@@ -560,13 +578,13 @@ function copySummary() {
 
 .header {
 	display: flex;
-	align-items: flex-start;
+	align-items: center;
 	justify-content: space-between;
-	padding: 1rem .5rem .5rem .5rem;
+	padding: 1rem .5rem 1rem .5rem;
 }
 
 .title {
-	margin: 0 .5rem 1rem 0;
+	margin: .25rem .5rem .5rem 0;
 	line-height: 1.25;
 	display: -webkit-box;
 	-webkit-box-orient: vertical;
@@ -602,12 +620,11 @@ function copySummary() {
 	display: flex;
 }
 
-/*
-.watch {
-	background: var(--primary);
-	color: var(--text-light);
+.watch.button {
+	padding: .75rem 2rem;
+	margin-left: .25rem;
+	font-size: 1rem;
 }
-*/
 
 .actors,
 .tags {
@@ -663,6 +680,12 @@ function copySummary() {
 .details {
 	display: flex;
 	gap: 1rem 1.5rem;
+	flex-wrap: wrap;
+}
+
+.detail {
+	display: flex;
+	flex-direction: column;
 }
 
 .description {
@@ -728,7 +751,7 @@ function copySummary() {
 	.actions {
 		width: 100%;
 		justify-content: space-between;
-		margin-bottom: 1.5rem;
+		margin-bottom: 1.25rem;
 	}
 
 	.title {
@@ -771,7 +794,11 @@ function copySummary() {
 	}
 
 	.header {
-		padding: 1rem .5rem 1.5rem .5rem;
+		padding: 1rem .5rem .5rem .5rem;
+	}
+
+	.title {
+		margin-left: 1.5rem;
 	}
 
 	.info {