DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

Updating scroll component on image load.

This commit is contained in:
ThePendulum 2020-07-06 02:40:10 +02:00
parent af9c4a36c6
commit 9b1d38d9ff
3 changed files with 37 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
assets/components/releases/media.vue
View File

@ -64,32 +64,38 @@
<img <img
:src="`/media/${cover.thumbnail}`" :src="`/media/${cover.thumbnail}`"
class="item cover" class="item cover"
@load="$parent.$emit('load')"
> >
</a> </a>
</template> </template>
<a <div
v-for="photo in photos" v-for="photo in photos"
:key="`media-${photo.index}`" :key="`media-${photo.index}`"
:href="`/media/${photo.path}`" class="item-container"
:class="{ sfw }"
class="item-link"
target="_blank"
rel="noopener noreferrer"
> >
<img <a
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`" :href="`/media/${photo.path}`"
:alt="`Photo ${photo.index + 1}`" :class="{ sfw }"
class="item" class="item-link"
target="_blank"
rel="noopener noreferrer"
> >
<img
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:alt="`Photo ${photo.index + 1}`"
class="item"
@load="$parent.$emit('load')"
>
<span <span
v-if="sfw" v-if="sfw"
class="warning" class="warning"
> >
<Icon icon="warning2" />NSFW <Icon icon="warning2" />NSFW
</span> </span>
</a> </a>
</div>
</div> </div>
</template> </template>
@ -141,7 +147,6 @@ export default {
@import 'theme'; @import 'theme';
.media { .media {
background: var(--background-dim);
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
@ -154,20 +159,11 @@ export default {
} }
&.expanded { &.expanded {
display: flex; display: grid;
grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
grid-gap: 1rem;
justify-content: center; justify-content: center;
flex-wrap: wrap; margin: 0 0 1rem 0;
.item-link,
.trailer {
margin: 0 0 .5rem 0;
height: 18rem;
flex: 1;
}
.item {
height: 100%;
}
} }
} }
@ -198,12 +194,14 @@ export default {
} }
} }
.item-link, .item-container,
.trailer-container { .trailer-container {
max-width: 100%;
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0;
.warning { .warning {
display: none; display: none;
@ -238,9 +236,8 @@ export default {
} }
.item { .item {
height: 18rem; max-height: 18rem;
vertical-align: middle; max-width: 100%;
object-fit: cover;
box-shadow: 0 0 3px var(--shadow-weak); box-shadow: 0 0 3px var(--shadow-weak);
} }

2
assets/components/releases/tile.vue
View File

@ -150,7 +150,7 @@ export default {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
padding: .15rem .25rem .15rem .3rem; padding: .15rem .25rem .15rem .35rem;
border-radius: 0 0 0 .5rem; border-radius: 0 0 0 .5rem;
color: var(--text-light); color: var(--text-light);
background: var(--primary); background: var(--primary);

9
assets/components/scroll/scroll.vue
View File

@ -70,18 +70,17 @@ function scroll(direction) {
function mounted() { function mounted() {
this.target = this.$slots.default[0].elm; this.target = this.$slots.default[0].elm;
this.target.addEventListener('scroll', () => { this.target.addEventListener('scroll', () => this.updateScroll());
this.updateScroll();
});
window.addEventListener('resize', this.updateScroll); window.addEventListener('resize', this.updateScroll);
// typically triggered by slotted component when an image loads, affecting scrollWidth
this.$on('load', () => this.updateScroll());
this.updateScroll(); this.updateScroll();
setTimeout(() => this.updateScroll(), 150); // allow CSS to calculate
} }
function beforeDestroy() { function beforeDestroy() {
this.target.removeEventListener('scroll', this.updateScroll); this.target.removeEventListener('scroll', this.updateScroll);
window.removeEventListener('resize', this.updateScroll); window.removeEventListener('resize', this.updateScroll);
} }