Title-wrap

src/components/ContentTemplate.vue

@@ -3,26 +3,28 @@
 		@update:showDetails="unselectItem()">
 		<template #list>
 			<NcAppContentList>
-				<div class="header">
-					<slot name="header" />
-				</div>
-
 				<FeedItemDisplayList :items="items"
 					:fetch-key="fetchKey"
 					:config="config"
-					@load-more="emit('load-more')" />
+					@load-more="emit('load-more')">
+					<template #header>
+						<slot name="header" />
+					</template>
+				</FeedItemDisplayList>
 			</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>
@@ -47,7 +49,7 @@
 
 import { FeedItem } from '../types/FeedItem'
 
-import FeedItemDisplayList from './feed-display/FeedItemDisplayList.vue'
+import FeedItemDisplayList, { Config } from './feed-display/FeedItemDisplayList.vue'
 import FeedItemDisplay from './feed-display/FeedItemDisplay.vue'
 
 defineProps({
@@ -59,22 +61,25 @@
 		type: String,
 		required: true,
 	},
 	config: {
-		type: Object,
+		type: Object as PropType<Config>,
 	},
 })
 
 const emit = defineEmits<{(event: 'load-more'): void}>()
 
 const showDetails = ref(false)
 
+const contentElement = ref()
+
 const selectedFeedItem = computed(() => {
 	return itemStore.getters.selected(itemStore.state)
 })
 
 watch(selectedFeedItem, (newSelectedFeedItem) => {
 	if (newSelectedFeedItem) {
 		showDetails.value = true
+		contentElement.value?.scrollTo(0, 0)
 	} else {
 		showDetails.value = false
 	}
@@ -93,13 +98,14 @@
 
 </script>
 
-<style scoped>
-
-.header {
-	padding-left: 50px;
-	position: absolute;
-	top: 1em;
-	font-weight: 700;
+<style>
+.feed-item-content {
+	overflow:hidden;
+	height: 100%
 }
 
+.feed-item-content-wrapper {
+	height: 100%;
+	overflow-y: scroll;
+}
 </style>

src/components/feed-display/FeedItemDisplay.vue

@@ -34,8 +34,7 @@
 					{{ t('news', 'by') }} {{ item.author }}
 				</span>
 				<span v-if="!item.sharedBy" class="source">{{ t('news', 'from') }}
-					<!-- TODO: Fix link to feed -->
-					<a :href="`#/items/feeds/${item.feedId}/`">
+					<a :href="`#/feed/${item.feedId}/`">
 						{{ getFeed(item.feedId).title }}
 						<img v-if="getFeed(item.feedId).faviconLink"
 							:src="getFeed(item.feedId).faviconLink"
@@ -200,15 +199,13 @@ export default Vue.extend({
 
 <style>
 	.feed-item-display {
-		max-height: 100%;
 		overflow-y: hidden;
 		display: flex;
 		flex-direction: column;
 	}
 
 	.article {
 		padding: 0 50px 50px 50px;
-		overflow-y: scroll;
 		height: 100%;
 		max-width: 1024px;
 		margin-left: auto;

src/components/feed-display/FeedItemDisplayList.vue

@@ -1,6 +1,10 @@
 <template>
 	<div class="feed-item-display-list">
 		<div class="header">
+			<div class="header-content">
+				<slot name="header" />
+			</div>
+
 			<NcActions class="filter-container" :force-menu="true">
 				<template #icon>
 					<FilterIcon />
@@ -40,7 +44,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { type PropType } from 'vue'
 import _ from 'lodash'
 
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
@@ -62,6 +66,11 @@ const DEFAULT_DISPLAY_LIST_CONFIG = {
 	unreadFilter: true,
 }
 
+export type Config = {
+	unreadFilter: boolean;
+	starFlter: boolean;
+}
+
 export default Vue.extend({
 	components: {
 		VirtualScroll,
@@ -84,7 +93,7 @@ export default Vue.extend({
 			required: true,
 		},
 		config: {
-			type: Object,
+			type: Object as PropType<Config>,
 			default: () => {
 				return DEFAULT_DISPLAY_LIST_CONFIG
 			},
@@ -132,7 +141,7 @@ export default Vue.extend({
 		unreadFilter(item: FeedItem): boolean {
 			return item.unread
 		},
-		toggleFilter(filter: () => boolean) {
+		toggleFilter(filter: (item: FeedItem) => boolean) {
 			if (this.filter === filter) {
 				this.filter = this.noFilter
 				if (filter === this.unreadFilter) {
@@ -206,8 +215,15 @@ export default Vue.extend({
 	}
 
 	.header {
-		justify-content: right;
 		display: flex;
+		align-items: center;
+		justify-content: right;
+	}
+
+	.header-content {
+		flex-grow: 1;
+		padding-left: 50px;
+		font-weight: 700;
 	}
 
 	.filter-container {

src/components/feed-display/FeedItemRow.vue

@@ -189,15 +189,16 @@ export default Vue.extend({
 
 	.feed-item-row .main-container {
 		min-width: 0;
+		flex-grow: 1;
 	}
 
 	.feed-item-row .title-container {
 		color: var(--color-text-lighter);
 
 		flex-grow: 1;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
+		overflow: visible;
+		overflow-wrap: break-word;
+		white-space: normal;
 	}
 
 	.feed-item-row .title-container.unread {