traxxx/assets/components/releases/details.vue

223 lines
4.0 KiB
Vue
Raw Normal View History

<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.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>