DebaucheryLibrarian/traxxx
2
1
Fork 1
Code Issues 40 Pull Requests 1 Releases Wiki Activity

Improved tag view for mobile.

Browse Source
This commit is contained in:
ThePendulum
2020-01-09 01:59:30 +01:00
parent a0db2677ed
commit 01c98d7008
4 changed files with 299 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
assets/components/tags/photos.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<div class="photos">
<ul class="nolist photos-inner">
<li>
<a
v-if="tag.poster"
:href="`/img/${tag.poster.path}`"
:title="tag.poster.comment"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="`/img/${tag.poster.thumbnail}`"
:alt="tag.poster.comment"
class="poster"
>
</a>
</li>
<li
v-for="photo in tag.photos"
:key="`photo-${photo.id}`"
>
<a
:title="photo.comment"
:href="`/img/${photo.path}`"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="`/img/${photo.thumbnail}`"
:alt="photo.comment"
class="photo"
>
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
tag: {
type: Object,
default: null,
},
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.photos {
background: $profile;
display: flex;
justify-content: center;
padding: 0 1rem;
overflow: hidden;
&.compact {
display: none;
padding: 0 1rem 1rem 1rem;
overflow-x: auto;
.photos-inner {
max-width: 100%;
display: inline-flex;
}
.poster,
.photo {
height: 10rem;
width: auto;
margin: 0 1rem 0 0;
}
}
}
.poster,
.photo {
width: 100%;
margin: 0 0 .5rem 0;
}
</style>