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);
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 {
background-color: #333;
background-color: var(--sidebar-bg);
color: white;
padding: 0.5rem 1rem;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
margin-bottom: 1rem;
border-radius: 8px;
}
.top-bar-title {

14
static/css/style.css
View File

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

6
static/js/app.js
View File

@ -36,8 +36,8 @@ function formatDate(dateStr) {
}
function renderFeedEntries(entries) {
const mainContent = document.querySelector('.main-content');
mainContent.innerHTML = '';
const feedContent = document.querySelector('#feed-content');
feedContent.innerHTML = '';
entries.forEach(entry => {
const entryDiv = document.createElement('article');
@ -135,7 +135,7 @@ function renderFeedEntries(entries) {
entryDiv.appendChild(title);
entryDiv.appendChild(meta);
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">
</head>
<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 -->
<dialog class="modal" id="addFeedModal">
<article class="modal-content">
@ -59,6 +47,18 @@
</aside>
<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>
<script src="/static/js/app.js"></script>