diff options
| author | Paul Tirk <paultirk@paultirk.com> | 2024-03-22 12:04:15 +0100 |
|---|---|---|
| committer | Benjamin Brahmer <info@b-brahmer.de> | 2024-05-07 13:52:59 +0200 |
| commit | a4911e2b74cef818d2fc2d5abf44f516177d4c44 (patch) | |
| tree | 6c059816b2112d2942c4e5b7ae8e3969b80b4d03 | |
| parent | 9c3f3e3dca24a4c37623f14c270b1c2a9ed232fb (diff) | |
reset content scroll position when changing feed item
Signed-off-by: Paul Tirk <paultirk@paultirk.com>
| -rw-r--r-- | src/components/ContentTemplate.vue | 35 | ||||
| -rw-r--r-- | src/components/feed-display/FeedItemDisplay.vue | 2 |
2 files changed, 26 insertions, 11 deletions
diff --git a/src/components/ContentTemplate.vue b/src/components/ContentTemplate.vue index ddfe200de..25d1c1f43 100644 --- a/src/components/ContentTemplate.vue +++ b/src/components/ContentTemplate.vue @@ -14,15 +14,17 @@ </NcAppContentList> </template> - <NcAppContentDetails> - <FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" /> - <NcEmptyContent v-else - :title="t('news', 'No article selected')" - :description="t('news', 'Please select an article from the list...')"> - <template #icon> - <TextIcon /> - </template> - </NcEmptyContent> + <NcAppContentDetails class="feed-item-content"> + <div ref="contentElement" class="feed-item-content-wrapper"> + <FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" /> + <NcEmptyContent v-else + :title="t('news', 'No article selected')" + :description="t('news', 'Please select an article from the list...')"> + <template #icon> + <TextIcon /> + </template> + </NcEmptyContent> + </div> </NcAppContentDetails> </NcAppContent> </template> @@ -68,6 +70,8 @@ const emit = defineEmits<{(event: 'load-more'): void}>() const showDetails = ref(false) +const contentElement = ref() + const selectedFeedItem = computed(() => { return itemStore.getters.selected(itemStore.state) }) @@ -75,6 +79,7 @@ const selectedFeedItem = computed(() => { watch(selectedFeedItem, (newSelectedFeedItem) => { if (newSelectedFeedItem) { showDetails.value = true + contentElement.value?.scrollTo(0, 0) } else { showDetails.value = false } @@ -92,3 +97,15 @@ function unselectItem() { } </script> + +<style> +.feed-item-content { + overflow:hidden; + height: 100% +} + +.feed-item-content-wrapper { + height: 100%; + overflow-y: scroll; +} +</style> diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue index cb9becdbc..1126a0577 100644 --- a/src/components/feed-display/FeedItemDisplay.vue +++ b/src/components/feed-display/FeedItemDisplay.vue @@ -200,7 +200,6 @@ export default Vue.extend({ <style> .feed-item-display { - max-height: 100%; overflow-y: hidden; display: flex; flex-direction: column; @@ -208,7 +207,6 @@ export default Vue.extend({ .article { padding: 0 50px 50px 50px; - overflow-y: scroll; height: 100%; max-width: 1024px; margin-left: auto; |