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

all caught up icon, counter dynamic

Browse Source
This commit is contained in:
Mathias Rothenhaeusler
2026-06-09 20:20:17 +02:00
parent b851e0257c
commit 039e0b448c
5 changed files with 53 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vue/src/components/RssFeeds.vue
+33 -2
View File
@@ -53,7 +53,13 @@ onMounted(async () => {
<div v-if="showMessage" class="message">{{ message }}</div>
<div v-if="viewMode === 'list'" id='article' class='article' :class="{ 'article--cards': layout === 'cards' }">
<p v-if="feeds.length == 0">No unread articles.</p>
<div v-if="feeds.length == 0" class="empty-state">
<svg class="empty-state__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<polyline points="7 12.5 10.5 16 17 9"/>
</svg>
<p class="empty-state__label">All caught up</p>
</div>
<template v-for="( feed, index ) in feeds ">
<div v-bind:id="index" class="observe">
<p class="feed-source">{{ feed.feedTitle }}</p>
@@ -72,7 +78,13 @@ onMounted(async () => {
<div v-else class="article-single">
<button type="button" class="article-single__back" @click="leaveArticleView">&larr; Back to list</button>
<p v-if="feeds.length == 0">No unread articles.</p>
<div v-if="feeds.length == 0" class="empty-state">
<svg class="empty-state__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<polyline points="7 12.5 10.5 16 17 9"/>
</svg>
<p class="empty-state__label">All caught up</p>
</div>
<template v-else>
<p class="feed-source">{{ feeds[currentIndex].feedTitle }}</p>
<h2 @click="getReadable(feeds[currentIndex], currentIndex)" class="feed-title">{{ feeds[currentIndex].title }}</h2>
@@ -108,6 +120,25 @@ onMounted(async () => {
/* Plain vertical stack of bordered "cards" — deliberately not flex/grid, and
with no truncation/max-height: normal block flow lets each card grow to fit
its own full content (images included), with no cross-element interaction. */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 4rem 1rem;
gap: 1rem;
opacity: 0.4;
}
.empty-state__icon {
width: 64px;
height: 64px;
}
.empty-state__label {
font-size: 1.1rem;
margin: 0;
}
.article--cards .observe {
border: 1px solid var(--color-border);
border-radius: 8px;