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

View File

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

View File

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