diff options
Diffstat (limited to 'src/components/feed-display/FeedItemDisplayList.vue')
-rw-r--r-- | src/components/feed-display/FeedItemDisplayList.vue | 33 |
1 files changed, 30 insertions, 3 deletions
diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue index 44e4b070a..f49222b51 100644 --- a/src/components/feed-display/FeedItemDisplayList.vue +++ b/src/components/feed-display/FeedItemDisplayList.vue @@ -27,6 +27,7 @@ </div> <div class="feed-item-display-container"> <VirtualScroll :reached-end="reachedEnd" + class="item-list" :fetch-key="fetchKey" @load-more="fetchMore()"> <template v-if="items && items.length > 0"> @@ -181,9 +182,10 @@ export default Vue.extend({ <style scoped> .feed-item-display-list { - height: 100%; display: flex; flex-direction: column; + overflow-y: hidden; + height: 100%; } .virtual-scroll { @@ -194,12 +196,37 @@ export default Vue.extend({ .feed-item-display-container { display: flex; height: 100%; + overflow-y: hidden; + } + + @media only screen and (min-width: 320px) { + .virtual-scroll { + flex: 1 1.2 auto; + } + + .feed-item-display-container { + flex-direction: column; + } + + .feed-item-container { + flex: 1 1 1000px; + max-height: calc(100vh - 200px) + } + } + + @media only screen and (min-width: 768px) { + .feed-item-display-container { + flex-direction: row; + } + + .feed-item-container { + width: 50%; + max-height: unset; + } } .feed-item-container { - max-width: 50%; overflow-y: hidden; - height: calc(100vh - 50px - 50px - 10px) } .header { |