traxxx/assets/components/actors/photos.vue

108 lines
1.7 KiB
Vue

<template>
<div
class="photos"
:class="{ wide: actor.photos.length > 2 }"
>
<a
v-if="actor.avatar"
:href="`/media/${actor.avatar.path}`"
target="_blank"
rel="noopener noreferrer"
class="avatar-link photo-link"
>
<img
:src="`/media/${actor.avatar.thumbnail}`"
:title="actor.avatar.copyright && `© ${actor.avatar.copyright}`"
class="avatar photo"
>
</a>
<a
v-for="photo in actor.photos"
:key="`photo-${photo.id}`"
:href="`/media/${photo.path}`"
target="_blank"
rel="noopener noreferrer"
class="photo-link"
>
<img
:src="`/media/${photo.thumbnail}`"
:title="photo.copyright && `© ${photo.copyright}`"
class="photo"
>
</a>
</div>
</template>
<script>
export default {
props: {
actor: {
type: Object,
default: null,
},
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.photos {
display: inline-grid;
grid-template-columns: repeat(auto-fit, 12rem);
grid-gap: .5rem;
font-size: 0;
.avatar-link {
display: none;
}
&.compact {
.photo {
width: auto;
}
}
}
.photo-link {
}
.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%;
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>