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

191 lines
3.5 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_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 {
padding: .25rem .5rem;
}
.date,
.site {
font-size: .75rem;
}
.date {
padding: .25rem .5rem;
}
.site {
padding: 0 .5rem 0 0;
}
}
</style>