traxxx/assets/components/releases/tile-details.vue

<template>
	<span
		class="details"
		:class="{ new: release.isNew }"
	>
		<span
			v-if="release.entity.type !== 'network' && !release.entity.independent && release.entity.parent"
			class="site"
		>
			<router-link
				v-tooltip.bottom="`Part of ${release.entity.parent.name}`"
				:title="`Part of ${release.entity.parent.name}`"
				:to="`/${release.entity.parent.type}/${release.entity.parent.slug}`"
				class="site-link"
			>
				<img
					:src="`/img/logos/${release.entity.parent.slug}/favicon_light.png`"
					class="favicon favicon-light"
				>

				<img
					:src="`/img/logos/${release.entity.parent.slug}/favicon_dark.png`"
					class="favicon favicon-dark"
				>
			</router-link>

			<router-link
				v-tooltip.bottom="`More from ${release.entity.name}`"
				:title="`More from ${release.entity.name}`"
				:to="`/${release.entity.type}/${release.entity.slug}`"
				class="site-link"
			>{{ release.entity.name }}</router-link>
		</span>

		<router-link
			v-else
			:to="`/${release.entity.type}/${release.entity.slug}`"
			class="site site-link"
		>
			<img
				:src="`/img/logos/${release.entity.slug}/favicon_light.png`"
				class="favicon favicon-light"
			>

			<img
				:src="`/img/logos/${release.entity.slug}/favicon_dark.png`"
				class="favicon favicon-dark"
			>{{ release.entity.name }}
		</router-link>

		<a
			v-if="release.date"
			v-tooltip.bottom="release.url && `View release on ${release.entity.name}`"
			:title="release.url && `View release on ${release.entity.name}`"
			:href="release.url"
			:class="{ upcoming: isAfter(release.date, new Date()) }"
			target="_blank"
			rel="noopener noreferrer"
			class="date"
		><Icon
			v-if="release.url"
			icon="share2"
		/>{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }}</a>

		<a
			v-else
			:href="release.url"
			title="Scene date N/A, showing date added"
			target="_blank"
			rel="noopener noreferrer"
			class="date"
		>{{ `(${formatDate(release.createdAt, 'MMMM D, YYYY')})` }}</a>
	</span>
</template>

<script>
export default {
	props: {
		release: {
			type: Object,
			default: null,
		},
	},
};
</script>

<style lang="scss" scoped>
@import 'breakpoints';

.details {
    width: 100%;
    display: flex;
    justify-content: space-between;
	white-space: nowrap;
    background: var(--profile);
    font-size: 0;
	font-weight: bold;
	box-shadow: 0 0 3px var(--darken);

    .favicon {
		width: 2rem;
		box-sizing: border-box;
		padding: .5rem;
    }

	/*
	&.new .date::before {
		content: '';
		width: .5rem;
		height: .5rem;
		border-radius: 50%;
		margin: 0 .25rem 0 0;
		background: var(--primary);
	}
	*/
}

.site,
.date {
    display: flex;
    align-items: center;
    position: relative;
    font-size: .8rem;
    padding: .5rem;
    color: var(--text-light);
    text-decoration: none;

	.icon {
		fill: var(--lighten-weak);
		margin: 0 .25rem 0 0;
	}

	&:hover .icon {
		fill: var(--text-light);
	}
}

.site {
	padding: 0 .5rem 0 0;
}

.site-link {
    display: flex;
    color: var(--text-light);
    text-decoration: none;
}

.favicon-dark {
	display: none;
}

@media(max-width: $breakpoint-kilo) {
	/* light details bar
	.details {
		background: var(--background);
		box-shadow: none;

		.favicon-dark {
			display: inline-block;
		}

		.favicon-light {
			display: none;
		}
	}

	.site-link,
	.date {
		color: var(--text);
	}
	*/

	.details .favicon {
		width: 1.75rem;
		padding: .25rem .5rem .25rem .25rem;
	}

	.date,
	.site {
		font-size: .75rem;
	}

	.date {
		padding: .25rem .5rem;
	}

	.site {
		padding: 0 .5rem 0 0;
	}
}
</style>