From 1a0445681cb7ad004c9b9a931a6451ae951d6d5e Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Sun, 5 Jan 2025 18:48:18 -0800
Subject: [PATCH 1/8] set mobile layout to horizontal-split

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/ContentTemplate.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ContentTemplate.vue b/src/components/ContentTemplate.vue
index 9abd80c6b..70f2859fa 100644
--- 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>

From a49f30fcb5c2cad1f01bb15472f30ad7103fd446 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Sun, 5 Jan 2025 19:48:49 -0800
Subject: [PATCH 2/8] add prev/next item buttons

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 .../feed-display/FeedItemDisplay.vue          | 20 +++++++++++++++++++
 .../feed-display/FeedItemDisplayList.vue      |  2 ++
 2 files changed, 22 insertions(+)

diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue
index 439177300..5d9a8724a 100644
--- a/src/components/feed-display/FeedItemDisplay.vue
+++ b/src/components/feed-display/FeedItemDisplay.vue
@@ -7,6 +7,22 @@
 		<ShareItem v-if="showShareMenu" :item-id="item.id" @close="closeShareMenu()" />
 
 		<div class="action-bar">
+			<NcActions :inline="4" style="flex-grow: 1;">
+				<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 +168,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 +193,8 @@ export default Vue.extend({
 		NcActions,
 		NcActionButton,
 		ShareItem,
+		ArrowLeftThickIcon,
+		ArrowRightThickIcon
 	},
 	props: {
 		item: {
diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index b8373a5bc..b33be4da9 100644
--- 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() {

From d86e6359c670228286c11a81a3d8de7d91cb8ef9 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Sun, 5 Jan 2025 19:49:06 -0800
Subject: [PATCH 3/8] make item title scrollable

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/feed-display/FeedItemRow.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/feed-display/FeedItemRow.vue b/src/components/feed-display/FeedItemRow.vue
index 6acfc235a..5f1ea5db5 100644
--- 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;

From c2a7e09714b79dcf6873caa5502bdfb1c8f2ea1f Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Sun, 5 Jan 2025 20:25:30 -0800
Subject: [PATCH 4/8] hide item nav in no-split mode

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/ContentTemplate.vue              | 1 +
 src/components/feed-display/FeedItemDisplay.vue | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ContentTemplate.vue b/src/components/ContentTemplate.vue
index 70f2859fa..9ea22f5a7 100644
--- a/src/components/ContentTemplate.vue
+++ b/src/components/ContentTemplate.vue
@@ -26,6 +26,7 @@
 			<div ref="contentElement" class="feed-item-content-wrapper">
 				<FeedItemDisplay v-if="selectedFeedItem"
 					:item="selectedFeedItem"
+					:hide-item-nav="layout === 'no-split'"
 					@show-details="showItem(false)" />
 				<NcEmptyContent v-else
 					style="margin-top: 20vh"
diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue
index 5d9a8724a..1f0c4d9a4 100644
--- a/src/components/feed-display/FeedItemDisplay.vue
+++ b/src/components/feed-display/FeedItemDisplay.vue
@@ -7,7 +7,7 @@
 		<ShareItem v-if="showShareMenu" :item-id="item.id" @close="closeShareMenu()" />
 
 		<div class="action-bar">
-			<NcActions :inline="4" style="flex-grow: 1;">
+			<NcActions :inline="4" style="flex-grow: 1;" v-show="!hideItemNav">
 				<NcActionButton :title="t('news', 'Previous Item')"
 					@click="$root.$emit('prev-item')">
 					{{ t('news', 'Previous') }}
@@ -211,6 +211,10 @@ export default Vue.extend({
 			required: false,
 			default: null,
 		},
+		hideItemNav: {
+			type: Boolean,
+			default: false
+		}
 	},
 	data: () => {
 		return {

From 49c07c9d7ed564af75183cf935ae0fd80702cc01 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Fri, 10 Jan 2025 18:03:05 -0800
Subject: [PATCH 5/8] commit read/next item to store even if element isn't
 visible

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/feed-display/FeedItemDisplayList.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index b33be4da9..96f1df8f2 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/src/components/feed-display/FeedItemDisplayList.vue
@@ -320,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

From 6f3c1678541aa24036b6e3dcc1ba33e9b112dd03 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Sat, 11 Jan 2025 06:23:28 -0800
Subject: [PATCH 6/8] hide nav buttons when not in mobile

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/feed-display/FeedItemDisplay.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue
index 1f0c4d9a4..54623d5ba 100644
--- a/src/components/feed-display/FeedItemDisplay.vue
+++ b/src/components/feed-display/FeedItemDisplay.vue
@@ -7,7 +7,7 @@
 		<ShareItem v-if="showShareMenu" :item-id="item.id" @close="closeShareMenu()" />
 
 		<div class="action-bar">
-			<NcActions :inline="4" style="flex-grow: 1;" v-show="!hideItemNav">
+			<NcActions class='action-bar-nav' :inline="4" style="flex-grow: 1;" v-show="!hideItemNav">
 				<NcActionButton :title="t('news', 'Previous Item')"
 					@click="$root.$emit('prev-item')">
 					{{ t('news', 'Previous') }}
@@ -310,7 +310,9 @@ export default Vue.extend({
 
 </script>
 
-<style>
+<style lang="scss">
+	$breakpoint-mobile: 1024px;
+
 	.feed-item-display {
 		overflow-y: hidden;
 		display: flex;
@@ -403,7 +405,13 @@ export default Vue.extend({
 		padding: 10px 20px 0px 20px;
 
 		display: flex;
-		justify-content: right
+		justify-content: right;
+	}
+
+	.action-bar-nav {
+		@media only screen and (width > $breakpoint-mobile) {
+			display: none !important;
+		}
 	}
 
 	.feed-item-display .action-bar .button-vue,
@@ -414,4 +422,5 @@ export default Vue.extend({
 		min-height: 30px;
 		height: 30px;
 	}
+
 </style>

From 628da8836bcc21d5ffe060f4f9895d17936fc179 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Sat, 11 Jan 2025 06:25:45 -0800
Subject: [PATCH 7/8] update changelog

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1bb21dc32..3284c3475 100644
--- 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
 
 

From 18bd3fb9a8e421bd562f8fede1fb8a2795c62b17 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Sat, 11 Jan 2025 10:52:11 -0800
Subject: [PATCH 8/8] fix linting

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/feed-display/FeedItemDisplay.vue     | 12 ++++++++----
 src/components/feed-display/FeedItemDisplayList.vue |  4 ++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue
index 54623d5ba..d5ff9a3ee 100644
--- a/src/components/feed-display/FeedItemDisplay.vue
+++ b/src/components/feed-display/FeedItemDisplay.vue
@@ -7,7 +7,9 @@
 		<ShareItem v-if="showShareMenu" :item-id="item.id" @close="closeShareMenu()" />
 
 		<div class="action-bar">
-			<NcActions class='action-bar-nav' :inline="4" style="flex-grow: 1;" v-show="!hideItemNav">
+			<NcActions v-show="!hideItemNav"
+				class="action-bar-nav"
+				:inline="4">
 				<NcActionButton :title="t('news', 'Previous Item')"
 					@click="$root.$emit('prev-item')">
 					{{ t('news', 'Previous') }}
@@ -194,7 +196,7 @@ export default Vue.extend({
 		NcActionButton,
 		ShareItem,
 		ArrowLeftThickIcon,
-		ArrowRightThickIcon
+		ArrowRightThickIcon,
 	},
 	props: {
 		item: {
@@ -213,8 +215,8 @@ export default Vue.extend({
 		},
 		hideItemNav: {
 			type: Boolean,
-			default: false
-		}
+			default: false,
+		},
 	},
 	data: () => {
 		return {
@@ -409,6 +411,8 @@ export default Vue.extend({
 	}
 
 	.action-bar-nav {
+		flex-grow: 1;
+
 		@media only screen and (width > $breakpoint-mobile) {
 			display: none !important;
 		}
diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index 96f1df8f2..ad49902e3 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/src/components/feed-display/FeedItemDisplayList.vue
@@ -225,8 +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)
+		this.$root.$on('next-item', this.jumpToNextItem)
+		this.$root.$on('prev-item', this.jumpToPreviousItem)
 	},
 	methods: {
 		async refreshApp() {