traxxx/assets/components/releases/details.vue

<template>
	<div class="details">
		<div class="column">
			<div class="tidbits">
				<a
					: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">{{ release.date ? formatDate(release.date, 'MMM D, YYYY', release.datePrecision) : 'Date N/A' }}</span>
					<span class="date-full">{{ release.date ? formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) : 'Date unknown' }}</span>

					<Icon
						v-if="release.url"
						icon="share2"
					/>
				</a>
			</div>

			<div class="site">
				<template v-if="release.entity.type === 'channel' && 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>