Showing quality on scene page.

pages/scene/+Page.vue

@@ -93,8 +93,10 @@
 
 				<Link
 					:href="scene.url"
+					:title="scene.date ? formatDate(scene.date.toISOString(), 'y-MM-dd hh:mm') : `Release date unknown, added ${formatDate(scene.createdAt, 'y-MM-dd')}`"
 					target="_blank"
 					class="date nolink"
+					:class="{ nodate: !scene.date }"
 				>
 					<time
 						:datetime="scene.effectiveDate.toISOString()"
@@ -211,17 +213,9 @@
 				</div>
 
 				<div
-					v-if="scene.duration || scene.directors.length > 0 || scene.shootId"
+					v-if="scene.duration || scene.directors.length > 0 || scene.shootId || scene.qualities.length > 0"
 					class="section details"
 				>
-					<div
-						v-if="scene.duration"
-						class="detail"
-					>
-						<h3 class="heading">Duration</h3>
-						{{ formatDuration(scene.duration) }}
-					</div>
-
 					<div
 						v-if="scene.directors.length > 0"
 						class="detail"
@@ -230,6 +224,14 @@
 						{{ scene.directors.map((director) => director.name).join(', ') }}
 					</div>
 
+					<div
+						v-if="scene.duration"
+						class="detail"
+					>
+						<h3 class="heading">Duration</h3>
+						{{ formatDuration(scene.duration) }}
+					</div>
+
 					<div
 						v-if="scene.shootId"
 						class="detail"
@@ -237,6 +239,14 @@
 						<h3 class="heading">Shoot</h3>
 						{{ scene.shootId }}
 					</div>
+
+					<div
+						v-if="scene.qualities.length > 0"
+						class="detail"
+					>
+						<h3 class="heading">Quality</h3>
+						{{ scene.qualities.map((quality) => `${quality}p`).join(', ') }}
+					</div>
 				</div>
 
 				<div class="section details">
@@ -533,6 +543,11 @@ function copySummary() {
 	font-weight: bold;
 }
 
+.nodate {
+	color: var(--highlight);
+	font-weight: normal;
+}
+
 .info,
 .header {
 	border-top: none;
@@ -647,7 +662,7 @@ function copySummary() {
 
 .details {
 	display: flex;
-	gap: 1rem;
+	gap: 1rem 1.5rem;
 }
 
 .description {