mathias/rss-reader
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

card view, minor css bugfixes

Browse Source
This commit is contained in:
mathias
2026-06-08 14:22:04 +02:00
parent 3c42ebb972
commit a98a8ba9e6
6 changed files with 275 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vue/src/components/AppNav.vue
+9 -1
View File
@@ -4,7 +4,7 @@ import { RouterLink, useRouter } from 'vue-router'
import { useFeeds } from '@/composables/useFeeds'
const router = useRouter()
const { sync, showModal, viewMode, toggleViewMode, markAllRead } = useFeeds()
const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead } = useFeeds()
const menuOpen = ref(false)
@@ -42,6 +42,11 @@ function handleToggleViewMode() {
toggleViewMode()
closeMenu()
}
function handleToggleLayout() {
toggleLayout()
closeMenu()
}
</script>
<template>
@@ -74,6 +79,9 @@ function handleToggleViewMode() {
<button class="app-nav__menu-item" type="button" @click="handleToggleViewMode">
{{ viewMode === 'list' ? 'Article view' : 'List view' }}
</button>
<button v-if="viewMode === 'list'" class="app-nav__menu-item" type="button" @click="handleToggleLayout">
{{ layout === 'list' ? 'Card layout' : 'List layout' }}
</button>
<button class="app-nav__menu-item" type="button" @click="handleSync">Sync</button>
<button class="app-nav__menu-item" type="button" @click="handleMarkAllRead">Mark all as read</button>
<button class="app-nav__menu-item" type="button" @click="openAddModal">Add RSS</button>
vue/src/components/RssFeeds.vue
+45 -3
View File
@@ -10,6 +10,8 @@ const {
showModal,
viewMode,
currentIndex,
leaveArticleView,
layout,
nextArticle,
prevArticle,
fetchData,
@@ -38,7 +40,7 @@ onMounted(async () => {
<div>
<div v-if="showMessage" class="message">{{ message }}</div>
<div v-if="viewMode === 'list'" id='article' class='article'>
<div v-if="viewMode === 'list'" id='article' class='article' :class="{ 'article--cards': layout === 'cards' }">
<p v-if="feeds.length == 0">No unread articles.</p>
<template v-for="( feed, index ) in feeds ">
<div v-bind:id="index" class="observe">
@@ -48,13 +50,13 @@ onMounted(async () => {
<p v-if="!feed.readable" class="feed-original-link">
<a :href="feed.url" target="_blank" rel="noopener noreferrer">Read original article &#8599;</a>
</p>
<p class="feed-content" v-html='feed.content'></p>
<p class="feed-content" :class="{ 'feed-content--clamped': layout === 'cards' && !feed.readable }" v-html='feed.content'></p>
</div>
</template>
</div>
<div v-else class="article-single">
<button type="button" class="article-single__back" @click="viewMode = 'list'">&larr; Back to list</button>
<button type="button" class="article-single__back" @click="leaveArticleView">&larr; Back to list</button>
<p v-if="feeds.length == 0">No unread articles.</p>
<template v-else>
<p class="feed-source">{{ feeds[currentIndex].feedTitle }}</p>
@@ -87,6 +89,46 @@ onMounted(async () => {
</template>
<style scoped>
.article--cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
align-items: start;
gap: 1rem;
}
.article--cards .observe {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: 8px;
overflow: hidden;
background: var(--color-background-soft);
}
.article--cards .feed-title {
border-bottom: none;
}
.article--cards h3 {
margin: 0;
padding: 0 1em 0.5em;
}
.article--cards .feed-content {
flex: 1;
}
.article--cards .feed-content--clamped {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.article--cards .feed-content img {
display: none;
}
.feed-original-link a {
display: inline-flex;
align-items: center;
vue/src/components/__tests__/AppNav.spec.js
+22 -1
View File
@@ -15,13 +15,14 @@ describe('AppNav', () => {
localStorage.setItem('user-id', '7')
vi.clearAllMocks()
const { feeds, showMessage, message, showModal, viewMode, currentIndex } = useFeeds()
const { feeds, showMessage, message, showModal, viewMode, currentIndex, layout } = useFeeds()
feeds.value = []
showMessage.value = false
message.value = ''
showModal.value = false
viewMode.value = 'list'
currentIndex.value = 0
layout.value = 'list'
router = createRouter({
history: createWebHistory(),
@@ -104,6 +105,26 @@ describe('AppNav', () => {
expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
})
it('switches the list layout from the menu and closes it', async () => {
const wrapper = await mountWithMenuOpen()
const { layout } = useFeeds()
const layoutButton = wrapper.findAll('.app-nav__menu-item').find(el => el.text() === 'Card layout')
await layoutButton.trigger('click')
expect(layout.value).toBe('cards')
expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
})
it('hides the layout toggle while in article view', async () => {
const { viewMode } = useFeeds()
viewMode.value = 'article'
const wrapper = await mountWithMenuOpen()
expect(wrapper.findAll('.app-nav__menu-item').find(el => el.text().includes('layout'))).toBeUndefined()
})
it('marks all articles as read from the menu after confirmation', async () => {
const { feeds } = useFeeds()
feeds.value = [
vue/src/components/__tests__/RssFeeds.spec.js
+122 -1
View File
@@ -23,13 +23,14 @@ describe('RssFeeds', () => {
// useFeeds() returns module-level singleton refs shared across the whole
// app (and this spec file) — reset them so state doesn't leak between tests.
const { feeds, showMessage, message, showModal, viewMode, currentIndex } = useFeeds()
const { feeds, showMessage, message, showModal, viewMode, currentIndex, layout } = useFeeds()
feeds.value = []
showMessage.value = false
message.value = ''
showModal.value = false
viewMode.value = 'list'
currentIndex.value = 0
layout.value = 'list'
})
it('fetches the current user articles and shows the empty state', async () => {
@@ -70,6 +71,72 @@ describe('RssFeeds', () => {
expect(wrapper.text()).not.toContain('No unread articles.')
})
it('renders the list as cards when the card layout is selected', async () => {
axios.get.mockResolvedValueOnce({
data: {
feeds: [
{
title: 'My Feed',
items: [
{
id: 1,
title: 'Article one',
content: '<p>hello</p>',
url: 'https://example.test/1',
timestamp: '2026-01-01',
},
],
},
],
},
})
const { layout } = useFeeds()
layout.value = 'cards'
const wrapper = mount(RssFeeds)
await flushPromises()
expect(wrapper.find('.article').classes()).toContain('article--cards')
})
it('lets a card grow to fit the full article once its readable content has loaded', async () => {
axios.get.mockResolvedValueOnce({
data: {
feeds: [
{
title: 'My Feed',
items: [
{
id: 1,
title: 'Article one',
content: '<p>short summary</p>',
url: 'https://example.test/1',
timestamp: '2026-01-01',
},
],
},
],
},
})
axios.post.mockResolvedValueOnce({ data: { content: '<html><body><article><p>full text</p></article></body></html>' } })
const { layout } = useFeeds()
layout.value = 'cards'
const wrapper = mount(RssFeeds)
await flushPromises()
// Clamped to a fixed number of lines while only the short summary is shown...
expect(wrapper.find('.feed-content').classes()).toContain('feed-content--clamped')
await wrapper.find('.feed-title').trigger('click')
await flushPromises()
// ...but allowed to grow once the user has loaded the full readable article.
expect(wrapper.find('.feed-content').classes()).not.toContain('feed-content--clamped')
})
it('sorts articles by date across feeds, newest first', async () => {
axios.get.mockResolvedValueOnce({
data: {
@@ -209,4 +276,58 @@ describe('RssFeeds', () => {
expect(wrapper.find('.article-single .feed-title').text()).toBe('Article one')
})
it('drops articles read while paging through article view once back in the list', async () => {
axios.get.mockResolvedValueOnce({
data: {
feeds: [
{
title: 'My Feed',
items: [
{
id: 1,
title: 'Article one',
content: '<p>one</p>',
url: 'https://example.test/1',
timestamp: '2026-03-01 10:00:00',
},
{
id: 2,
title: 'Article two',
content: '<p>two</p>',
url: 'https://example.test/2',
timestamp: '2026-02-01 10:00:00',
},
{
id: 3,
title: 'Article three',
content: '<p>three</p>',
url: 'https://example.test/3',
timestamp: '2026-01-01 10:00:00',
},
],
},
],
},
})
axios.put.mockResolvedValue({ status: 200 })
const wrapper = mount(RssFeeds)
await flushPromises()
const { toggleViewMode, leaveArticleView } = useFeeds()
// Enter article view (marks "Article one" read), page forward to "Article
// two" (marks it read too), then leave without visiting "Article three".
toggleViewMode()
await flushPromises()
await wrapper.findAll('.article-nav__btn')[1].trigger('click')
await flushPromises()
leaveArticleView()
await flushPromises()
const titles = wrapper.findAll('.feed-title').map(el => el.text())
expect(titles).toEqual(['Article three'])
})
})