traxxx/assets/components/album/album.vue

155 lines
2.4 KiB
Vue
Raw Normal View History

<template>
<teleport to="body">
<div class="album">
<div class="album-header">
<h3 class="album-title">{{ title }}</h3>
<Icon
icon="cross2"
class="close"
@click.native="$emit('close')"
/>
</div>
<div class="album-items">
<div
v-for="item in items"
:key="item.id"
class="item-container"
>
<a
:href="`/media/${item.path}`"
class="item-link"
target="_blank"
>
<img
:src="`/media/${item.thumbnail}`"
loading="lazy"
class="item image"
>
</a>
</div>
</div>
</div>
</teleport>
</template>
<script>
export default {
props: {
items: {
type: Array,
default: () => [],
},
title: {
type: String,
default: null,
},
},
emits: ['close'],
};
</script>
<style lang="scss" scoped>
@import 'breakpoints';
.album {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
background: var(--shadow-extreme);
z-index: 10;
}
.album-header {
display: flex;
justify-content: space-between;
flex-shrink: 0;
}
.album-title {
2021-01-23 22:50:15 +00:00
display: block;
flex-grow: 1;
align-items: center;
2021-01-23 22:50:15 +00:00
padding: 1rem;
margin: 0;
color: var(--text-light);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2021-01-23 22:50:15 +00:00
text-align: center;
}
.close {
width: 1.5rem;
height: 1.5rem;
padding: 1rem;
fill: var(--lighten);
&:hover {
cursor: pointer;
fill: var(--text-light);
}
}
.album-items {
display: grid;
align-items: center;
justify-content: center;
2021-01-29 14:36:54 +00:00
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 0 1rem;
padding: 1rem;
2021-01-23 22:09:05 +00:00
margin: auto 0;
overflow-y: auto;
}
.item-container {
display: flex;
align-items: center;
justify-content: center;
}
.item-link {
height: 100%;
margin: 0 0 1rem 0;
}
.item {
width: 100%;
}
2021-01-29 14:36:54 +00:00
@media(max-width: $breakpoint-kilo) {
.album-items {
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
}
@media(max-width: $breakpoint) {
.album-items {
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
}
@media(max-width: $breakpoint-small) {
.album-items.portrait {
grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}
}
@media(max-width: $breakpoint-micro) {
.album-items {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
}
@media(max-width: $breakpoint-pico) {
.album-items {
grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}
}
</style>