diff options
| author | Devlin Junker <devlin.junker@gmail.com> | 2023-10-04 19:59:21 -0700 |
|---|---|---|
| committer | Devlin Junker <devlin.junker@gmail.com> | 2023-10-05 08:02:27 -0700 |
| commit | 06e373bb49a0059278f706b2bc4183f66023e45c (patch) | |
| tree | 162dca95de1bdd5d659058f6503bb9ce005006c3 /src | |
| parent | b6a42935399bb14afd06201034b3828a888e1d79 (diff) | |
start on mobile view
Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/feed-display/FeedItemDisplay.vue | 4 | ||||
| -rw-r--r-- | src/components/feed-display/FeedItemDisplayList.vue | 33 |
2 files changed, 34 insertions, 3 deletions
diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue index d1dde278e..efe14a3b4 100644 --- a/src/components/feed-display/FeedItemDisplay.vue +++ b/src/components/feed-display/FeedItemDisplay.vue @@ -282,6 +282,10 @@ export default Vue.extend({ font-size: 17px; } + .article table { + white-space: unset; + } + .action-bar { padding: 0px 20px 0px 20px; 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 { |