From 9b1d38d9ff0b78df74cb608747525a50ca7c490e Mon Sep 17 00:00:00 2001 From: Niels Simenon Date: Mon, 6 Jul 2020 02:40:10 +0200 Subject: [PATCH] Updating scroll component on image load. --- assets/components/releases/media.vue | 67 +++++++++++++--------------- assets/components/releases/tile.vue | 2 +- assets/components/scroll/scroll.vue | 9 ++-- 3 files changed, 37 insertions(+), 41 deletions(-) diff --git a/assets/components/releases/media.vue b/assets/components/releases/media.vue index a4239966..03919f12 100644 --- a/assets/components/releases/media.vue +++ b/assets/components/releases/media.vue @@ -64,32 +64,38 @@ - - + - - NSFW - - + + NSFW + + + @@ -141,7 +147,6 @@ export default { @import 'theme'; .media { - background: var(--background-dim); flex-shrink: 0; white-space: nowrap; overflow-x: auto; @@ -154,20 +159,11 @@ export default { } &.expanded { - display: flex; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr)); + grid-gap: 1rem; justify-content: center; - flex-wrap: wrap; - - .item-link, - .trailer { - margin: 0 0 .5rem 0; - height: 18rem; - flex: 1; - } - - .item { - height: 100%; - } + margin: 0 0 1rem 0; } } @@ -198,12 +194,14 @@ export default { } } -.item-link, +.item-container, .trailer-container { + max-width: 100%; position: relative; display: inline-flex; align-items: center; justify-content: center; + flex-shrink: 0; .warning { display: none; @@ -238,9 +236,8 @@ export default { } .item { - height: 18rem; - vertical-align: middle; - object-fit: cover; + max-height: 18rem; + max-width: 100%; box-shadow: 0 0 3px var(--shadow-weak); } diff --git a/assets/components/releases/tile.vue b/assets/components/releases/tile.vue index b149c92a..3f518544 100644 --- a/assets/components/releases/tile.vue +++ b/assets/components/releases/tile.vue @@ -150,7 +150,7 @@ export default { position: absolute; top: 0; right: 0; - padding: .15rem .25rem .15rem .3rem; + padding: .15rem .25rem .15rem .35rem; border-radius: 0 0 0 .5rem; color: var(--text-light); background: var(--primary); diff --git a/assets/components/scroll/scroll.vue b/assets/components/scroll/scroll.vue index ff5cb296..73611138 100644 --- a/assets/components/scroll/scroll.vue +++ b/assets/components/scroll/scroll.vue @@ -70,18 +70,17 @@ function scroll(direction) { function mounted() { this.target = this.$slots.default[0].elm; - this.target.addEventListener('scroll', () => { - this.updateScroll(); - }); - + this.target.addEventListener('scroll', () => 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(); - setTimeout(() => this.updateScroll(), 150); // allow CSS to calculate } function beforeDestroy() { this.target.removeEventListener('scroll', this.updateScroll); + window.removeEventListener('resize', this.updateScroll); }