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

Using query instead of parameters for tag filter URI. Added generic scrolling component, using for actor photos and entity children. Removed pagination from filter bar.

Browse Source
This commit is contained in:
ThePendulum
2020-06-29 03:55:10 +02:00
parent 98c19b560f
commit 8f9eb91b13
13 changed files with 536 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
assets/components/actors/photos.vue
View File

@@ -5,17 +5,17 @@
:class="{
avatar: !!actor.avatar,
empty: actor.photos.length === 0,
wide: actor.photos.length > 2
}"
>
<a
v-if="actor.avatar"
v-show="actor.avatar"
:href="`/media/${actor.avatar.path}`"
target="_blank"
rel="noopener noreferrer"
class="avatar-link photo-link"
>
<img
:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
:title="actor.avatar.copyright && `© ${actor.avatar.copyright}`"
@@ -32,9 +32,10 @@
class="photo-link"
>
<img
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
:title="photo.copyright && `© ${photo.copyright}`"
:title="`© ${photo.copyright || photo.entity.name}`"
class="photo"
>
</a>
@@ -63,15 +64,29 @@ export default {
@import 'theme';
.photos {
width: 100%;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-bottom: solid 1px var(--darken-hint);
padding: .5rem 1rem;
font-size: 0;
overflow-x: scroll;
scroll-behavior: smooth;
scrollbar-width: none;
&.expanded {
display: grid;
grid-gap: .5rem;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
.photo-link {
margin: 0;
}
.photo {
width: 100%;
height: 100%;
}
}
&.empty {
display: none;
}
@@ -86,14 +101,18 @@ export default {
}
.photo-link {
height: 16rem;
flex-shrink: 0;
margin: 0 .5rem 0 0;
}
.photo {
height: 100%;
width: 10rem;
height: 15rem;
box-shadow: 0 0 3px $shadow-weak;
object-fit: cover;
}
.expand {
border-bottom: solid 1px var(--darken-hint);
}
@media(max-width: $breakpoint3) {
@@ -105,6 +124,16 @@ export default {
.avatar-link {
display: inline-block;
}
&.expanded {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
}
}
@media(max-width: $breakpoint0) {
.photos.expanded {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
}
</style>