aboutsummaryrefslogtreecommitdiffstats
path: root/frontend-vanilla/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend-vanilla/src')
-rw-r--r--frontend-vanilla/src/main.ts33
-rw-r--r--frontend-vanilla/src/style.css120
2 files changed, 31 insertions, 122 deletions
diff --git a/frontend-vanilla/src/main.ts b/frontend-vanilla/src/main.ts
index 49b63b7..b826760 100644
--- a/frontend-vanilla/src/main.ts
+++ b/frontend-vanilla/src/main.ts
@@ -363,29 +363,19 @@ export function renderSettings() {
<div class="settings-grid">
<section class="settings-section">
- <h3>Add Feed</h3>
- <div class="add-feed-form">
- <input type="url" id="new-feed-url" placeholder="https://example.com/rss.xml">
- <button id="add-feed-btn">Add Feed</button>
- </div>
- </section>
-
- <section class="settings-section">
<h3>Data</h3>
<div class="data-group">
- <label>Export</label>
<div class="button-group">
- <a href="/api/export/opml" class="button" target="_blank">OPML</a>
- <a href="/api/export/text" class="button" target="_blank">TEXT</a>
- <a href="/api/export/json" class="button" target="_blank">JSON</a>
+ <a href="/api/export/opml" class="button" target="_blank">EXPORT OPML</a>
+ <a href="/api/export/text" class="button" target="_blank">EXPORT TEXT</a>
+ <a href="/api/export/json" class="button" target="_blank">EXPORT JSON</a>
</div>
</div>
<div class="data-group" style="margin-top: 1rem;">
- <label>Import</label>
<div class="button-group">
- <button class="import-btn" data-format="opml">OPML</button>
- <button class="import-btn" data-format="text">TEXT</button>
- <button class="import-btn" data-format="json">JSON</button>
+ <button class="import-btn" data-format="opml">IMPORT OPML</button>
+ <button class="import-btn" data-format="text">IMPORT TEXT</button>
+ <button class="import-btn" data-format="json">IMPORT JSON</button>
</div>
<input type="file" id="import-file" style="display: none;">
</div>
@@ -400,7 +390,6 @@ export function renderSettings() {
</div>
</div>
<div class="settings-group" style="margin-top: 1rem;">
- <label>Font</label>
<select id="font-selector">
<option value="default" ${store.fontTheme === 'default' ? 'selected' : ''}>Default (Palatino)</option>
<option value="serif" ${store.fontTheme === 'serif' ? 'selected' : ''}>Serif (Georgia)</option>
@@ -413,6 +402,12 @@ export function renderSettings() {
<section class="settings-section manage-feeds-section">
<h3>Manage Feeds</h3>
+
+ <div class="add-feed-form" style="margin-bottom: 2rem;">
+ <input type="url" id="new-feed-url" placeholder="https://example.com/rss.xml">
+ <button id="add-feed-btn">ADD FEED</button>
+ </div>
+
<ul class="manage-feed-list">
${store.feeds.map(feed => `
<li class="manage-feed-item">
@@ -422,8 +417,8 @@ export function renderSettings() {
</div>
<div class="feed-actions">
<input type="text" class="feed-tag-input" data-id="${feed._id}" value="${feed.category || ''}" placeholder="Tag">
- <button class="update-feed-tag-btn" data-id="${feed._id}">Save</button>
- <button class="delete-feed-btn" data-id="${feed._id}">Delete</button>
+ <button class="update-feed-tag-btn" data-id="${feed._id}">SAVE</button>
+ <button class="delete-feed-btn" data-id="${feed._id}">DELETE</button>
</div>
</li>
`).join('')}
diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css
index a13651e..7a11978 100644
--- a/frontend-vanilla/src/style.css
+++ b/frontend-vanilla/src/style.css
@@ -549,7 +549,7 @@ select:focus {
.settings-grid {
display: flex;
flex-direction: column;
- gap: 3rem;
+ gap: 2rem;
margin-bottom: 2rem;
}
@@ -565,7 +565,7 @@ select:focus {
font-weight: 700;
margin-top: 0;
margin-bottom: 1rem;
- border-bottom: none;
+ border: none;
padding-bottom: 0;
color: var(--text-color);
}
@@ -602,6 +602,9 @@ button,
text-decoration: none;
display: inline-block;
text-align: center;
+ height: 2.2rem;
+ line-height: 1.1;
+ box-sizing: border-box;
}
button:hover,
@@ -633,16 +636,18 @@ button.active,
.add-feed-form {
display: flex;
gap: 0.5rem;
- max-width: 600px;
+ width: 100%;
}
.add-feed-form input {
flex: 1;
+ height: 2.2rem;
}
.button-group {
display: flex;
gap: 0.5rem;
+ align-items: center;
}
/* Manage Feeds - List View */
@@ -652,6 +657,7 @@ button.active,
padding: 0;
list-style: none;
border-top: 1px solid var(--border-color);
+ width: 100%;
}
.manage-feed-item {
@@ -661,12 +667,13 @@ button.active,
border-bottom: 1px solid var(--border-color);
background: transparent;
gap: 1rem;
+ width: 100%;
+ border-radius: 0;
}
.feed-info {
flex: 1;
min-width: 0;
- /* Text truncation */
}
.feed-title {
@@ -697,6 +704,7 @@ button.active,
.feed-tag-input {
width: 120px;
padding: 0.4rem;
+ height: 2.2rem;
}
.delete-feed-btn {
@@ -708,6 +716,11 @@ button.active,
background-color: rgba(211, 47, 47, 0.1) !important;
}
+.manage-feeds-section {
+ width: 100%;
+ margin-top: 2rem;
+}
+
@media (max-width: 768px) {
.manage-feed-item {
flex-direction: column;
@@ -722,103 +735,4 @@ button.active,
.feed-tag-input {
flex: 1;
}
-}
-
-
-/* Settings Grid Layout */
-.settings-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 2rem;
- margin-bottom: 2rem;
-}
-
-.settings-section {
- background: var(--bg-color);
- padding: 0;
- border: none;
- margin-bottom: 0;
-}
-
-.settings-section h3 {
- font-size: 1.1rem;
- margin-top: 0;
- margin-bottom: 1rem;
- border-bottom: 1px solid var(--border-color);
- padding-bottom: 0.5rem;
- opacity: 0.7;
-}
-
-.manage-feeds-section {
- grid-column: 1 / -1;
- margin-top: 1rem;
-}
-
-.button-group {
- display: flex;
- gap: 0.5rem;
- flex-wrap: wrap;
-}
-
-.button-group a.button,
-.button-group button {
- flex: 1;
- display: inline-block;
- padding: 0.5rem;
- text-align: center;
- background: var(--bg-color);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- text-decoration: none;
- color: var(--text-color);
- font-size: 0.9rem;
- cursor: pointer;
- line-height: 1.5;
-}
-
-.button-group a.button:hover,
-.button-group button:hover {
- background: rgba(0, 0, 0, 0.05);
- border-color: var(--accent-color);
-}
-
-.theme-dark .button-group a.button:hover,
-.theme-dark .button-group button:hover {
- background: rgba(255, 255, 255, 0.1);
-}
-
-.manage-feed-list {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 1rem;
- padding: 0;
- list-style: none;
-}
-
-.manage-feed-item {
- border: 1px solid var(--border-color);
- border-radius: 8px;
- padding: 1rem;
- background: rgba(0, 0, 0, 0.02);
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-}
-
-.theme-dark .manage-feed-item {
- background: rgba(255, 255, 255, 0.02);
-}
-
-.feed-title {
- font-weight: bold;
- margin-bottom: 0.25rem;
- font-size: 0.95rem;
-}
-
-.feed-url {
- font-size: 0.8em;
- opacity: 0.7;
- margin-bottom: 0.5rem;
- word-break: break-all;
- overflow-wrap: anywhere;
} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-25 16:09:33 +0000