blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Media UI] Set overflow: auto on the innermost grid div only.

Browse source 
If a parent object of the `grid` DOM element has `overflow: auto` as
well, then it will intercept the `@scroll` events, so `Results` won't be
able to render an infinite scroll.
This commit is contained in:
Fabio Manganiello 2024-01-07 15:29:14 +01:00
parent 9f6ac4acd1
commit f59a276e09
Signed by: blacklight
GPG key ID: D90FBA7F76362774
5 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue
View file

@ -140,7 +140,6 @@ export default {
.body { .body {
height: calc(100% - $media-nav-height - 2px); height: calc(100% - $media-nav-height - 2px);
margin-top: 2px; margin-top: 2px;
overflow: auto;
} }
} }
</style> </style>

1
platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue
View file

@ -68,6 +68,5 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.media-youtube-feed { .media-youtube-feed {
height: 100%; height: 100%;
overflow: auto;
} }
</style> </style>

1
platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
View file

@ -75,6 +75,5 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.media-youtube-playlist { .media-youtube-playlist {
height: 100%; height: 100%;
overflow: auto;
} }
</style> </style>

5
platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue
View file

@ -90,7 +90,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.media-youtube-playlists { .media-youtube-playlists {
height: 100%; height: 100%;
overflow: auto;
.playlist-body {
height: 100%;
}
:deep(.playlist.item) { :deep(.playlist.item) {
cursor: pointer; cursor: pointer;

10
platypush/backend/http/webapp/src/components/panels/Media/Results.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="media-results" @scroll="onScroll"> <div class="media-results">
<Loading v-if="loading" /> <Loading v-if="loading" />
<div class="grid" ref="grid" v-if="results?.length"> <div class="grid" ref="grid" v-if="results?.length" @scroll="onScroll">
<Item v-for="(item, i) in visibleResults" <Item v-for="(item, i) in visibleResults"
:key="i" :key="i"
:item="item" :item="item"
@ -114,7 +114,11 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: $background-color; background: $background-color;
overflow: auto;
.grid {
height: 100%;
overflow: auto;
}
.info-container { .info-container {
width: 100%; width: 100%;