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

Always showing actor photos horizontally.

This commit is contained in:
ThePendulum 2020-05-21 04:27:45 +02:00
parent 532a4b679b
commit c3de881a2c
2 changed files with 41 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
assets/components/actors/actor.vue
View File

@ -285,20 +285,12 @@
</div>
<div class="actor-content">
<Releases :releases="actor.releases" />
<div
v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
class="photos-container"
>
<Photos :actor="actor" />
<Photos
v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
:actor="actor"
:class="{ expanded }"
class="compact"
/>
</div>
<Releases :releases="actor.releases" />
</div>
</div>
</div>
@ -429,7 +421,6 @@ export default {
}
.avatar-link {
font-size: 0;
padding: 0 0 1rem 1rem;
flex-shrink: 0;
}
@ -437,6 +428,7 @@ export default {
.avatar {
height: 100%;
flex-shrink: 0;
border: solid 3px var(--lighten-hint);
margin: 0 .5rem 0 0;
}
}
@ -613,7 +605,7 @@ export default {
.actor-content {
display: flex;
flex-grow: 1;
flex-direction: row;
flex-direction: column;
}
.heading {
@ -621,13 +613,6 @@ export default {
margin: 0 0 1rem 0;
}
.photos-container {
box-sizing: border-box;
border-left: solid 1px $shadow-hint;
padding: 1rem 1rem 1rem 1.5rem;
margin: 0 0 0 .5rem;
}
.photos.compact {
display: none;
}
@ -660,20 +645,6 @@ export default {
.actor-content {
flex-direction: column;
}
.photos-container {
border: none;
border-bottom: solid 1px $shadow-hint;
margin: 0 0 .5rem 0;
}
.photos {
display: none;
}
.photos.compact {
display: flex;
}
}
@media(max-width: $breakpoint) {

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

@ -1,7 +1,12 @@
<template>
<div
v-lazy-container
class="photos"
:class="{ wide: actor.photos.length > 2 }"
:class="{
avatar: !!actor.avatar,
empty: actor.photos.length === 0,
wide: actor.photos.length > 2
}"
>
<a
v-if="actor.avatar"
@ -11,7 +16,8 @@
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}`"
class="avatar photo"
>
@ -26,7 +32,8 @@
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}`"
class="photo"
>
@ -56,59 +63,49 @@ export default {
@import 'theme';
.photos {
display: inline-grid;
grid-template-columns: repeat(auto-fit, 12rem);
grid-gap: .5rem;
width: 100%;
display: flex;
box-sizing: border-box;
padding: 1rem;
font-size: 0;
overflow-x: scroll;
scrollbar-width: none;
&.empty {
display: none;
}
.avatar-link {
display: none;
}
&.compact {
.photo {
width: auto;
}
/*
&::-webkit-scrollbar {
display: none;
}
*/
}
.photo-link {
height: 16rem;
flex-shrink: 0;
margin: 0 .5rem 0 0;
}
.photo {
width: 100%;
height: 100%;
object-fit: cover;
box-shadow: 0 0 3px $shadow-weak;
}
@media(min-width: $breakpoint3) {
.photos.wide {
max-width: 30vw;
}
}
@media(max-width: $breakpoint3) {
.photos {
width: 100%;
max-width: 100%;
&.empty.avatar {
display: flex;
overflow-x: scroll;
scrollbar-width: none;
}
.avatar-link {
display: inline-block;
}
&::-webkit-scrollbar {
display: none;
}
}
.photo-link {
height: 15rem;
flex-shrink: 0;
margin: 0 .5rem 0 0;
}
}
</style>