Modularized release component between movie and scene. Added Kink Classics channel.

2020-08-12 03:30:20 +02:00
parent 40aed1086f
commit 5cabeed19d
136 changed files with 610 additions and 361 deletions
--- a/assets/components/releases/details.vue
+++ b/assets/components/releases/details.vue
@@ -0,0 +1,223 @@
+<template>
+	<div class="details">
+		<div class="column">
+			<div class="tidbits">
+				<a
+					v-if="release.date"
+					:title="release.url && `View scene on ${release.entity.name}`"
+					:href="release.url"
+					:class="{ link: release.url }"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="tidbit date nolink"
+				>
+					<span class="date-compact">{{ formatDate(release.date, 'MMM D, YYYY', release.datePrecision) }}</span>
+					<span class="date-full">{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }}</span>
+
+					<Icon
+						v-if="release.url"
+						icon="share2"
+					/>
+				</a>
+			</div>
+
+			<div class="site">
+				<template v-if="release.entity.parent && !release.entity.independent">
+					<a
+						v-if="release.entity.parent.hasLogo"
+						:href="`/network/${release.entity.parent.slug}`"
+						class="logo-link"
+					>
+						<img
+							:src="`/img/logos/${release.entity.parent.slug}/thumbs/network.png`"
+							:title="release.entity.parent.name"
+							:alt="release.entity.parent.name"
+							class="logo logo-parent"
+						>
+					</a>
+
+					<a
+						v-else
+						:href="`/network/${release.entity.parent.slug}`"
+						class="logo-link logo-name"
+					>{{ release.entity.parent.name }}</a>
+
+					<span class="chain">presents</span>
+
+					<a
+						v-if="release.entity.hasLogo"
+						:href="`/${release.entity.type}/${release.entity.slug}`"
+						class="logo-link"
+					>
+						<img
+							v-if="release.entity.type === 'network'"
+							:src="`/img/logos/${release.entity.slug}/thumbs/network.png`"
+							:title="release.entity.name"
+							class="logo logo-site"
+						>
+
+						<img
+							v-else
+							:src="`/img/logos/${release.entity.parent.slug}/thumbs/${release.entity.slug}.png`"
+							:title="release.entity.name"
+							class="logo logo-site"
+						>
+					</a>
+
+					<a
+						v-else
+						:href="`/${release.entity.type}/${release.entity.slug}`"
+						class="logo-link logo-name"
+					>{{ release.entity.name }}</a>
+				</template>
+
+				<a
+					v-else
+					:href="`/${release.entity.type}/${release.entity.slug}`"
+				>
+					<img
+						:src="`/img/logos/${release.entity.slug}/thumbs/network.png`"
+						:title="release.entity.name"
+						class="logo logo-site"
+					>
+				</a>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		release: {
+			type: Object,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.details {
+    background: var(--profile);
+    color: var(--text-light);
+    box-shadow: 0 0 3px var(--shadow-weak);
+    cursor: default;
+
+    .column {
+		height: 100%;
+        display: flex;
+		justify-content: space-between;
+        align-items: center;
+        padding: 0 1rem;
+    }
+
+    .link {
+        color: var(--text-light);
+
+		.icon {
+			fill: var(--lighten);
+		}
+
+		&:hover {
+			color: var(--text-light);
+
+			.icon {
+				fill: var(--text-light);
+			}
+		}
+    }
+}
+
+.tidbits {
+	flex-shrink: 0;
+	height: 100%;
+}
+
+.tidbit {
+    display: inline-flex;
+	align-items: center;
+    height: 100%;
+
+	&.date {
+        flex-shrink: 0;
+		font-weight: bold;
+
+		.icon {
+			fill: var(--lighten);
+			margin: -.2rem 0 0 .75rem;
+		}
+    }
+}
+
+.site {
+    display: inline-flex;
+    align-items: center;
+    padding: .25rem 0;
+    font-size: 0;
+}
+
+.logo {
+    display: inline-block;
+}
+
+.logo-link {
+	text-decoration: none;
+}
+
+.logo-site {
+    height: 2.5rem;
+    max-width: 15rem;
+	margin: .25rem 0;
+    object-fit: contain;
+    object-position: 100% 50%;
+}
+
+.logo-parent {
+    height: 1.5rem;
+    max-width: 10rem;
+    object-fit: contain;
+    object-position: 100% 50%;
+}
+
+.logo-name {
+	padding: .5rem 0;
+	color: var(--text-light);
+	font-size: 1.25rem;
+	font-weight: bold;
+}
+
+.chain {
+    color: var(--lighten);
+    padding: 0 .5rem;
+    font-weight: bold;
+    font-size: .8rem;
+}
+
+.date-compact {
+	display: none;
+}
+
+@media(max-width: $breakpoint-mega) {
+    .logo-parent,
+    .chain {
+        display: none;
+    }
+
+	.logo-site {
+		width: 100%;
+	}
+}
+
+@media(max-width: $breakpoint) {
+	.date-full {
+		display: none;
+	}
+
+	.date-compact {
+		display: inline-block;
+	}
+}
+</style>