143 lines
2.6 KiB
Vue
143 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<div class="page">
|
||
|
|
<div
|
||
|
|
v-for="(tags, category) in categories"
|
||
|
|
:key="`category-${category}`"
|
||
|
|
>
|
||
|
|
<h3 class="category">{{ category }}</h3>
|
||
|
|
|
||
|
|
<ul class="tags nolist">
|
||
|
|
<li
|
||
|
|
v-for="tag in tags"
|
||
|
|
:key="`tag-${tag.slug}`"
|
||
|
|
class="tag"
|
||
|
|
>
|
||
|
|
<div class="thumb-container">
|
||
|
|
<a
|
||
|
|
:href="`/tag/${tag.slug}`"
|
||
|
|
class="tag nolink"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
v-if="tag.poster"
|
||
|
|
:src="`/${tag.poster.thumbnail}`"
|
||
|
|
:title="tag.poster.comment"
|
||
|
|
class="thumb"
|
||
|
|
loading="lazy"
|
||
|
|
>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a
|
||
|
|
v-if="tag.poster?.entity"
|
||
|
|
:href="`/${tag.poster.entity.type}/${tag.poster.entity.slug}`"
|
||
|
|
class="favicon-link"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
:src="!tag.poster.entity.parent || tag.poster.entity.isIndependent ? `/logos/${tag.poster.entity.slug}/favicon.png` : `/logos/${tag.poster.entity.parent.slug}/favicon.png`"
|
||
|
|
:alt="tag.poster.entity.name"
|
||
|
|
:title="tag.poster.entity.name"
|
||
|
|
class="favicon"
|
||
|
|
>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a
|
||
|
|
:href="`/tag/${tag.slug}`"
|
||
|
|
class="name nolink"
|
||
|
|
>{{ tag.name }}</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { inject } from 'vue';
|
||
|
|
|
||
|
|
const pageContext = inject('pageContext');
|
||
|
|
const categories = pageContext.pageProps.tagShowcase;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.tags {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||
|
|
gap: 1rem .5rem;
|
||
|
|
padding: .75rem 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.category {
|
||
|
|
padding: 1rem 1rem 0 1.5rem;
|
||
|
|
margin: 0;
|
||
|
|
text-transform: capitalize;
|
||
|
|
color: var(--shadow);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
.name {
|
||
|
|
color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.thumb {
|
||
|
|
box-shadow: 0 0 3px var(--shadow-weak-10);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
padding: .25rem .5rem 0 .5rem;
|
||
|
|
text-transform: capitalize;
|
||
|
|
font-size: .9rem;
|
||
|
|
font-weight: bold;
|
||
|
|
color: var(--shadow-strong-10);
|
||
|
|
}
|
||
|
|
|
||
|
|
.thumb-container {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thumb {
|
||
|
|
display: inline-block;
|
||
|
|
width: 100%;
|
||
|
|
aspect-ratio: 5/3;
|
||
|
|
object-fit: cover;
|
||
|
|
border-radius: .25rem;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
box-shadow: 0 0 3px var(--shadow-weak-20);
|
||
|
|
}
|
||
|
|
|
||
|
|
.favicon-link {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
font-size: 0;
|
||
|
|
|
||
|
|
&:hover .favicon {
|
||
|
|
filter: drop-shadow(0 0 2px var(--shadow-weak-20))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.favicon {
|
||
|
|
width: 1rem;
|
||
|
|
height: 1rem;
|
||
|
|
padding: .5rem;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media(--compact) {
|
||
|
|
.tags {
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media(--small-30) {
|
||
|
|
.tags {
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|