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.png`"
				class="favicon"
			></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.png`"
			class="favicon"
		>{{ release.entity.name }}</router-link>

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

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

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

<style lang="scss" scoped>
.details {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: var(--profile);
    font-size: 0;
	font-weight: bold;
	box-shadow: 0 0 3px var(--darken);

    .favicon {
		width: 1rem;
        margin: 0 .25rem 0 0;
    }

	/*
	&.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;
}

/*
.date {
    &.new:before {
        content: '';
        background: var(--primary);
        width: .5rem;
        display: inline-block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: -.5rem;
    }
}
*/

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