aboutsummaryrefslogtreecommitdiffstats
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/src/App.css52
-rw-r--r--frontend/src/components/FeedItem.css57
-rw-r--r--frontend/src/components/FeedItem.tsx16
-rw-r--r--frontend/src/components/FeedList.css103
-rw-r--r--frontend/src/index.css44
-rw-r--r--frontend/vite.config.ts7
6 files changed, 164 insertions, 115 deletions
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 69edabd..a51fef3 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -22,19 +22,45 @@ body {
}
.dashboard-header {
- background: #2c3e50;
+ /* Legacy didn't really have a top header, but we need one for settings/logout.
+ Keeping it minimal/flat or matching sidebar bg if we want to blend in.
+ For now, let's make it dark gray to stand out less or match legacy dark mode if applicable.
+ Actually, let's keep it distinct but apply the font styles. */
+ background: #222;
color: white;
- padding: 0.75rem 1.5rem;
+ padding: 0.5rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
- flex-shrink: 0;
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-weight: bold;
}
.dashboard-header h1 {
margin: 0;
- font-size: 1.25rem;
- font-weight: 600;
+ font-size: 1.2rem;
+ font-variant: small-caps;
+ text-transform: lowercase;
+}
+
+.nav-link,
+.logout-btn {
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-weight: bold;
+ font-variant: small-caps;
+ text-transform: lowercase;
+ font-size: 1rem;
+ background: transparent;
+ border: none;
+ color: #ccc;
+ cursor: pointer;
+ margin-left: 1rem;
+}
+
+.nav-link:hover,
+.logout-btn:hover {
+ color: white;
+ text-decoration: underline;
}
.dashboard-content {
@@ -44,19 +70,27 @@ body {
}
.dashboard-sidebar {
- width: 300px;
- background: #f8f9fa;
- border-right: 1px solid #ddd;
+ width: 15rem;
+ background: var(--sidebar-bg);
+ border-right: 1px solid #999;
display: flex;
flex-direction: column;
overflow-y: auto;
+ padding: 1rem;
}
.dashboard-main {
flex: 1;
padding: 2rem;
overflow-y: auto;
- background: #fff;
+ background: var(--bg-color);
+ margin-left: 0;
+}
+
+.dashboard-main>* {
+ max-width: 35rem;
+ /* Legacy width */
+ margin: 0 auto;
}
.logout-btn {
diff --git a/frontend/src/components/FeedItem.css b/frontend/src/components/FeedItem.css
index 916ee42..06fac2f 100644
--- a/frontend/src/components/FeedItem.css
+++ b/frontend/src/components/FeedItem.css
@@ -1,8 +1,8 @@
.feed-item {
- border-bottom: 1px solid #f0f0f0;
- padding: 1rem 0;
+ padding: 1rem;
+ margin-top: 5rem;
list-style: none;
- /* Ensure no bullets if used in ul */
+ border-bottom: none;
}
.feed-item.read .item-title {
@@ -18,21 +18,22 @@
display: flex;
justify-content: space-between;
align-items: flex-start;
+ margin-bottom: 0.5rem;
}
.item-title {
- font-size: 1.2rem;
+ font-size: 1.25rem;
+ /* Legacy h3 size approx */
text-decoration: none;
color: #333;
display: block;
- margin-bottom: 0.5rem;
flex: 1;
- /* Take up remaining space */
}
.item-title:hover {
- text-decoration: underline;
- color: #007bff;
+ text-decoration: none;
+ color: blue;
+ /* Legacy link color */
}
.item-actions {
@@ -41,36 +42,39 @@
margin-left: 1rem;
}
+/* Legacy controls were simple text/links, but buttons are fine if minimal */
.action-btn {
- background: none;
- border: 1px solid #ddd;
- border-radius: 4px;
+ background: whitesmoke;
+ border: none;
cursor: pointer;
padding: 2px 6px;
font-size: 1rem;
- line-height: 1;
+ color: blue;
+ font-weight: bold;
}
.action-btn:hover {
- background-color: #f8f9fa;
- border-color: #ccc;
+ background-color: #eee;
}
-.action-btn.is-starred {
- color: gold;
- border-color: gold;
+.dateline {
+ margin-top: 0;
+ font-weight: normal;
+ font-size: .75em;
+ color: #ccc;
+ margin-bottom: 1rem;
}
-.item-meta {
- font-size: 0.85rem;
- color: #666;
- margin-bottom: 0.5rem;
+.dateline a {
+ color: #ccc;
+ text-decoration: none;
}
.item-description {
- color: #444;
+ color: #000;
line-height: 1.5;
- font-size: 0.95rem;
+ font-size: 1rem;
+ margin-top: 1rem;
}
.item-description img {
@@ -78,4 +82,11 @@
height: auto;
display: block;
margin: 1rem 0;
+}
+
+.item-description blockquote {
+ padding: 1rem 1rem 0 1rem;
+ border-left: 4px solid #ddd;
+ color: #666;
+ margin-left: 0;
} \ No newline at end of file
diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx
index aa0cea8..ae6f8a5 100644
--- a/frontend/src/components/FeedItem.tsx
+++ b/frontend/src/components/FeedItem.tsx
@@ -60,27 +60,29 @@ export default function FeedItem({ item: initialItem }: FeedItemProps) {
<a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title">
{item.title || '(No Title)'}
</a>
- <div className="item-actions">
+ </div>
+ <div className="dateline">
+ <a href={item.url} target="_blank" rel="noopener noreferrer">
+ {new Date(item.publish_date).toLocaleDateString()}
+ {item.feed_title && ` - ${item.feed_title}`}
+ </a>
+ <div className="item-actions" style={{ display: 'inline-block', float: 'right' }}>
<button
onClick={toggleRead}
className={`action-btn ${item.read ? 'is-read' : 'is-unread'}`}
title={item.read ? "Mark as unread" : "Mark as read"}
>
- {item.read ? '📖' : 'uo'}
+ {item.read ? 'keep unread' : 'mark read'}
</button>
<button
onClick={toggleStar}
className={`action-btn ${item.starred ? 'is-starred' : 'is-unstarred'}`}
title={item.starred ? "Unstar" : "Star"}
>
- {item.starred ? '★' : '☆'}
+ {item.starred ? 'unstar' : 'star'}
</button>
</div>
</div>
- <div className="item-meta">
- <span className="item-date">{new Date(item.publish_date).toLocaleDateString()}</span>
- {item.feed_title && <span className="item-feed"> - {item.feed_title}</span>}
- </div>
{item.description && (
<div className="item-description" dangerouslySetInnerHTML={{ __html: item.description }} />
)}
diff --git a/frontend/src/components/FeedList.css b/frontend/src/components/FeedList.css
index b8ca7e6..1c7395a 100644
--- a/frontend/src/components/FeedList.css
+++ b/frontend/src/components/FeedList.css
@@ -1,106 +1,97 @@
.feed-list {
- padding: 1rem;
- background: white;
- border-radius: 8px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ /* Removed card styling */
+ padding: 0;
+ background: transparent;
}
.feed-list h2 {
- margin-top: 0;
- border-bottom: 1px solid #eee;
- padding-bottom: 0.5rem;
+ font-size: 1.2rem;
+ margin-bottom: 0.5rem;
+ border-bottom: 1px solid #999;
+ padding-bottom: 0.25rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
}
-.feed-list-items {
+.feed-list-items,
+.tag-list-items,
+.filter-list {
list-style: none;
padding: 0;
margin: 0;
}
.feed-item {
- padding: 0.75rem 0;
- border-bottom: 1px solid #f0f0f0;
+ padding: 0.25rem 0;
+ border-bottom: none;
+ /* Clean look */
display: flex;
justify-content: space-between;
align-items: center;
}
-.feed-item:last-child {
- border-bottom: none;
-}
-
.feed-title {
- text-decoration: none;
color: #333;
- font-weight: 500;
+ text-decoration: none;
+ font-size: 0.9rem;
}
.feed-title:hover {
- color: #007bff;
+ text-decoration: underline;
+ color: #000;
}
.feed-category {
- background: #e9ecef;
- padding: 0.2rem 0.5rem;
- border-radius: 4px;
- font-size: 0.8rem;
- color: #666;
+ display: none;
+ /* Hide category in sidebar list to save space/match legacy simplicity if needed */
}
+
.tag-section {
margin-top: 2rem;
- border-top: 1px solid #eee;
- padding-top: 1rem;
-}
-
-.tag-list-items {
- list-style: none;
- padding: 0;
- margin: 0;
- display: flex;
- flex-wrap: wrap;
- gap: 0.5rem;
}
-.tag-item {
- display: inline-block;
-}
-
-.tag-link {
- display: block;
- padding: 0.3rem 0.6rem;
- background: #e9ecef;
- border-radius: 12px;
- text-decoration: none;
+.tag-link,
+.filter-list li a {
color: #333;
+ text-decoration: none;
font-size: 0.9rem;
- transition: background-color 0.2s;
+ display: block;
+ padding: 0.1rem 0;
}
-.tag-link:hover {
- background: #dde2e6;
+.tag-link:hover,
+.filter-list li a:hover {
+ text-decoration: underline;
+ background: transparent;
+ /* No hover bg */
color: #000;
}
.filter-section {
- padding-bottom: 1rem;
- border-bottom: 1px solid #eee;
- margin-bottom: 1rem;
+ margin-bottom: 2rem;
}
.filter-list {
- list-style: none;
- padding: 0;
- margin: 0;
- display: flex;
- gap: 1rem;
+ display: block;
+ /* Stack vertically */
+}
+.filter-list {
+ display: block;
}
.filter-list li a {
text-decoration: none;
color: #333;
- font-weight: 500;
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-weight: bold;
+ font-variant: small-caps;
+ text-transform: lowercase;
+ font-size: 1.1rem;
+ display: block;
+ margin-bottom: 0.5rem;
}
.filter-list li a:hover {
- color: #007bff;
+ color: blue;
+ background-color: transparent;
}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 08a3ac9..3d51caf 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,11 +1,23 @@
:root {
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ font-family: 'Courier New', Courier, monospace;
+ /* Fixed width as requested */
+ line-height: 1.5;
+ font-weight: 400;
+
+ /* Light Mode Defaults */
+ --bg-color: #ffffff;
+ --text-color: rgba(0, 0, 0, 0.87);
+ --sidebar-bg: #ccc;
+ --link-color: #0000EE;
+ /* Standard blue link */
+
+ font-family: 'Courier New', Courier, monospace;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
+ color: var(--text-color);
+ background-color: var(--bg-color);
font-synthesis: none;
text-rendering: optimizeLegibility;
@@ -13,21 +25,23 @@
-moz-osx-font-smoothing: grayscale;
}
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg-color: #24292e;
+ /* Legacy Dark */
+ --text-color: #ffffff;
+ --sidebar-bg: #1b1f23;
+ /* Darker sidebar */
+ --link-color: rgb(90, 200, 250);
+ /* Legacy dark link */
+ }
}
body {
margin: 0;
- display: flex;
- place-items: center;
min-width: 320px;
min-height: 100vh;
+ /* Removed flex centering to allow natural flow */
}
h1 {
@@ -46,9 +60,11 @@ button {
cursor: pointer;
transition: border-color 0.25s;
}
+
button:hover {
border-color: #646cff;
}
+
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
@@ -59,10 +75,12 @@ button:focus-visible {
color: #213547;
background-color: #ffffff;
}
+
a:hover {
color: #747bff;
}
+
button {
background-color: #f9f9f9;
}
-}
+} \ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index fe6af7d..1a17086 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -11,11 +11,4 @@ export default defineConfig({
'/image': 'http://127.0.0.1:4994',
}
},
- test: {
- exclude: ['tests/**', 'node_modules/**'],
- environment: 'jsdom',
- setupFiles: './src/setupTests.ts', // Verify if this exists, but mainly exclude is key
- // actually let's just use defaults + exclude
- globals: true, // if needed
- }
})
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-25 14:50:45 +0000