Improve mobile view by using horizontal-split mobile layout (#3046)

* set mobile layout to horizontal-split * add prev/next item buttons * make item title scrollable * hide item nav in no-split mode * commit read/next item to store even if element isn't visible * hide nav buttons when not in mobile * remove hideItemNav property of FeedItemDisplay Signed-off-by: Devlin Junker <[email protected]>
nextcloud · Jan 30, 2025 · d3719e8 · d3719e8
1 parent 703d962
commit d3719e8
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,7 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 # Unreleased
 ## [25.x.x]
 ### Changed
-
+- Set mobileLayout to `horizontal-split` and add nav buttons for articles in mobile view
 ### Fixed
 - Show error on folders only if at least one feed has more than eight errors
 

diff --git a/src/components/ContentTemplate.vue b/src/components/ContentTemplate.vue
@@ -1,6 +1,7 @@
 <template>
 	<NcAppContent :layout="layout"
 		:show-details="showDetails"
+		:mobile-layout="'horizontal-split'"
 		:list-max-width="100"
 		@update:showDetails="showItem(false)">
 		<template #list>

diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue
@@ -7,6 +7,24 @@
 		<ShareItem v-if="showShareMenu" :item-id="item.id" @close="closeShareMenu()" />
 
 		<div class="action-bar">
+			<NcActions v-show="!splitModeOff"
+				class="action-bar-nav"
+				:inline="4">
+				<NcActionButton :title="t('news', 'Previous Item')"
+					@click="$root.$emit('prev-item')">
+					{{ t('news', 'Previous') }}
+					<template #icon>
+						<ArrowLeftThickIcon />
+					</template>
+				</NcActionButton>
+				<NcActionButton :title="t('news', 'Next Item')"
+					@click="$root.$emit('next-item')">
+					{{ t('news', 'Next') }}
+					<template #icon>
+						<ArrowRightThickIcon />
+					</template>
+				</NcActionButton>
+			</NcActions>
 			<NcActions :inline="4">
 				<NcActionButton :title="t('news', 'Share within Instance')"
 					@click="showShareMenu = true">
@@ -152,6 +170,8 @@ import { mapState } from 'vuex'
 import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
+import ArrowLeftThickIcon from 'vue-material-design-icons/ArrowLeftThick.vue'
+import ArrowRightThickIcon from 'vue-material-design-icons/ArrowRightThick.vue'
 
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -175,6 +195,8 @@ export default Vue.extend({
 		NcActions,
 		NcActionButton,
 		ShareItem,
+		ArrowLeftThickIcon,
+		ArrowRightThickIcon,
 	},
 	props: {
 		item: {
@@ -286,7 +308,9 @@ export default Vue.extend({
 
 </script>
 
-<style>
+<style lang="scss">
+	$breakpoint-mobile: 1024px;
+
 	.feed-item-display {
 		overflow-y: hidden;
 		display: flex;
@@ -379,7 +403,15 @@ export default Vue.extend({
 		padding: 10px 20px 0px 20px;
 
 		display: flex;
-		justify-content: right
+		justify-content: right;
+	}
+
+	.action-bar-nav {
+		flex-grow: 1;
+
+		@media only screen and (width > $breakpoint-mobile) {
+			display: none !important;
+		}
 	}
 
 	.feed-item-display .action-bar .button-vue,
@@ -390,4 +422,5 @@ export default Vue.extend({
 		min-height: 30px;
 		height: 30px;
 	}
+
 </style>
diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
@@ -225,6 +225,8 @@ export default Vue.extend({
 	mounted() {
 		this.mounted = true
 		this.setupDebouncedClick()
+		this.$root.$on('next-item', this.jumpToNextItem)
+		this.$root.$on('prev-item', this.jumpToPreviousItem)
 	},
 	methods: {
 		async refreshApp() {
@@ -318,12 +320,12 @@ export default Vue.extend({
 			const element = componentInstance ? componentInstance.$el : undefined
 
 			if (element) {
-				this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: item.id })
-				this.$store.dispatch(ACTIONS.MARK_READ, { item })
 				const virtualScroll = this.$refs.virtualScroll
 				virtualScroll.showElement(element)
-
 			}
+
+			this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: item.id })
+			this.$store.dispatch(ACTIONS.MARK_READ, { item })
 		},
 		currentIndex(items: FeedItem[]): number {
 			return this.selectedItem ? items.findIndex((item: FeedItem) => item.id === this.selectedItem.id) || 0 : -1

diff --git a/src/components/feed-display/FeedItemRow.vue b/src/components/feed-display/FeedItemRow.vue
@@ -275,7 +275,10 @@ export default Vue.extend({
 
 	.feed-item-row .title-container.compact {
 		flex: 0 1 auto;
-		overflow: unset;
+		overflow-y: unset;
+		overflow-x: scroll;
+		max-width: 100%;
+		text-overflow: clip;
 	}
 
 	.feed-item-row .intro-container {
@@ -285,7 +288,7 @@ export default Vue.extend({
 	}
 
 	.feed-item-row .intro-container.compact {
-		flex: 1 1 auto;
+		flex: 1 1;
 		height: 26pt !important;
 		align-content: center;
 		text-overflow: ellipsis;