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

125 lines
2.7 KiB
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 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 icon="share2" />{{ 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;
white-space: nowrap;
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;
.icon {
fill: var(--lighten-weak);
margin: 0 .25rem 0 0;
}
&:hover .icon {
fill: var(--text-light);
}
}
.site-link {
display: flex;
color: var(--text-light);
text-decoration: none;
}
</style>