Fixed date display on serie page.

pages/series/@serieId/+Page.vue

@@ -103,9 +103,22 @@
 				</div>
 
 				<time
-					:datetime="serie.date.toISOString()"
+					:datetime="serie.effectiveDate.toISOString()"
-					class="date ellipsis"
+					class="date ellipsis compact-hide"
-				>{{ formatDate(serie.date, 'MMMM d, y') }}</time>
+					:class="{ nodate: !serie.date }"
+				>{{ formatDate(serie.effectiveDate, {
+					month: 'MMMM y',
+					year: 'y',
+				}[serie.datePrecision] || 'MMMM d, y') }}</time>
+
+				<time
+					:datetime="serie.effectiveDate.toISOString()"
+					class="date ellipsis compact-show"
+					:class="{ nodate: !serie.date }"
+				>{{ formatDate(serie.effectiveDate, {
+					month: 'MMM y',
+					year: 'y',
+				}[serie.datePrecision] || 'MMM d, y') }}</time>
 			</div>
 
 			<div class="header">
@@ -408,6 +421,11 @@ const scenes = pageContext.pageProps.scenes;
 	font-weight: bold;
 }
 
+.nodate {
+	color: var(--highlight);
+	font-weight: normal;
+}
+
 .info,
 .header {
 	border-top: none;
@@ -537,6 +555,10 @@ const scenes = pageContext.pageProps.scenes;
 	margin-bottom: 1rem;
 }
 
+.compact-show {
+	display: none;
+}
+
 @media(--small) {
 	.content {
 		margin: 0;
@@ -621,5 +643,13 @@ const scenes = pageContext.pageProps.scenes;
 	.actors {
 		grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
 	}
+
+	.compact-show {
+		display: flex;
+	}
+
+	.compact-hide {
+		display: none;
+	}
 }
 </style>