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

style + layout tweaks to make the top bar smaller

Browse Source
This commit is contained in:
Greg Shuflin 2025-02-05 04:06:26 -08:00
parent 29b9a73012
commit 0fc97111a4
5 changed files with 18 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/css/components/layout.css
View File

@ -27,8 +27,3 @@ body.with-sidebar {
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
/* Layout adjustments */
.with-sidebar {
padding-top: 3rem;
}

9
static/css/components/topbar.css
View File

@ -1,16 +1,13 @@
/* Top bar styles */ /* Top bar styles */
.top-bar { .top-bar {
background-color: #333; background-color: var(--sidebar-bg);
color: white; color: white;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
display: grid; display: grid;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
align-items: center; align-items: center;
position: fixed; margin-bottom: 1rem;
top: 0; border-radius: 8px;
left: 0;
right: 0;
z-index: 1000;
} }
.top-bar-title { .top-bar-title {

14
static/css/style.css
View File

@ -15,15 +15,6 @@ body {
color: var(--text-color); color: var(--text-color);
} }
body.with-sidebar {
display: flex;
}
.main-content {
flex: 1;
padding: 20px 40px;
}
.main-content h1 { .main-content h1 {
color: var(--primary-red); color: var(--primary-red);
font-size: 2.5em; font-size: 2.5em;
@ -101,11 +92,6 @@ body.with-sidebar {
opacity: 0.9; opacity: 0.9;
} }
/* Layout adjustments */
.with-sidebar {
padding-top: 3rem;
}
.setup-container { .setup-container {
display: flex; display: flex;
justify-content: center; justify-content: center;

6
static/js/app.js
View File

@ -36,8 +36,8 @@ function formatDate(dateStr) {
} }
function renderFeedEntries(entries) { function renderFeedEntries(entries) {
const mainContent = document.querySelector('.main-content'); const feedContent = document.querySelector('#feed-content');
mainContent.innerHTML = ''; feedContent.innerHTML = '';
entries.forEach(entry => { entries.forEach(entry => {
const entryDiv = document.createElement('article'); const entryDiv = document.createElement('article');
@ -135,7 +135,7 @@ function renderFeedEntries(entries) {
entryDiv.appendChild(title); entryDiv.appendChild(title);
entryDiv.appendChild(meta); entryDiv.appendChild(meta);
entryDiv.appendChild(summary); entryDiv.appendChild(summary);
mainContent.appendChild(entryDiv); feedContent.appendChild(entryDiv);
}); });
} }

24
templates/index.html.tera
View File

@ -8,18 +8,6 @@
<link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="/static/css/style.css">
</head> </head>
<body class="with-sidebar"> <body class="with-sidebar">
<header class="top-bar">
<h1 class="top-bar-title">RSS Reader</h1>
<div class="user-menu">
<button class="user-menu-button" id="userMenuButton">
<span class="user-menu-icon"><i class="fas fa-user"></i></span>
</button>
<div class="user-menu-dropdown" id="userMenuDropdown">
<button class="user-menu-item" id="logoutButton">Logout</button>
</div>
</div>
</header>
<!-- Add Feed Modal --> <!-- Add Feed Modal -->
<dialog class="modal" id="addFeedModal"> <dialog class="modal" id="addFeedModal">
<article class="modal-content"> <article class="modal-content">
@ -59,6 +47,18 @@
</aside> </aside>
<main class="main-content"> <main class="main-content">
<header class="top-bar">
<h1 class="top-bar-title">RSS Reader</h1>
<div class="user-menu">
<button class="user-menu-button" id="userMenuButton">
<span class="user-menu-icon"><i class="fas fa-user"></i></span>
</button>
<div class="user-menu-dropdown" id="userMenuDropdown">
<button class="user-menu-item" id="logoutButton">Logout</button>
</div>
</div>
</header>
<div id="feed-content"></div>
</main> </main>
<script src="/static/js/app.js"></script> <script src="/static/js/app.js"></script>