boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Added search to tags.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2021-08-22 03:14:02 +02:00
parent 959b5d9d0e
commit eb1f8f86fd
8 changed files with 311 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
assets/components/tags/tile.vue
View File

@@ -1,55 +1,62 @@
<template>
<div
v-if="tag.poster"
class="tile"
>
<router-link
:to="`/tag/${tag.slug}`"
:title="tag.name"
:class="{ blank: !tag.poster }"
class="poster-link"
>
<img
v-if="!lazy && !sfw"
:src="`/img/${tag.poster.thumbnail}`"
:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
:title="comment"
:alt="tag.name"
class="poster"
>
<template v-if="tag.poster">
<img
v-if="!lazy && !sfw"
:src="`/img/${tag.poster.thumbnail}`"
:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
:title="comment"
:alt="tag.name"
class="poster"
>
<img
v-if="!lazy && sfw"
:src="`/img/${tag.poster.sfw.thumbnail}`"
:style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
:title="tag.poster.sfw.comment"
:alt="tag.name"
class="poster"
>
<img
v-if="!lazy && sfw"
:src="`/img/${tag.poster.sfw.thumbnail}`"
:style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
:title="tag.poster.sfw.comment"
:alt="tag.name"
class="poster"
>
<img
v-if="lazy && !sfw"
:src="`/img/${tag.poster.thumbnail}`"
:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
:title="comment"
:alt="tag.name"
loading="lazy"
class="poster"
>
<img
v-if="lazy && !sfw"
:src="`/img/${tag.poster.thumbnail}`"
:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
:title="comment"
:alt="tag.name"
loading="lazy"
class="poster"
>
<img
v-if="lazy && sfw"
:src="`/img/${tag.poster.sfw.thumbnail}`"
:style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
:title="tag.poster.sfw.comment"
:alt="tag.name"
loading="lazy"
class="poster"
>
<img
v-if="lazy && sfw"
:src="`/img/${tag.poster.sfw.thumbnail}`"
:style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
:title="tag.poster.sfw.comment"
:alt="tag.name"
loading="lazy"
class="poster"
>
<Logo
v-if="!sfw"
:photo="tag.poster"
favicon
<Logo
v-if="!sfw"
:photo="tag.poster"
favicon
/>
</template>
<Icon
v-else
icon="price-tag2"
/>
</router-link>
@@ -59,11 +66,6 @@
:title="tag.name"
>{{ tag.name }}</router-link>
</div>
<span
v-else
class="title"
>{{ tag.name }}</span>
</template>
<script>
@@ -100,13 +102,16 @@ export default {
<style lang="scss" scoped>
.tile {
display: flex;
flex-direction: column;
box-sizing: border-box;
position: relative;
text-decoration: none;
font-size: 0;
&:hover {
.poster {
.poster,
.blank {
box-shadow: 0 0 2px var(--darken);
}
@@ -119,15 +124,30 @@ export default {
.poster {
display: inline-block;
width: 100%;
height: 13.5rem;
object-fit: cover;
background-size: cover;
background-position: center;
box-shadow: 0 0 3px var(--darken-weak);
}
.poster,
.blank {
height: 13.5rem;
}
.poster-link {
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-grow: 1;
background: var(--shadow-hint);
.icon {
width: 2rem;
height: 2rem;
fill: var(--shadow-weak);
}
}
.title {