FLO/user-to-supporter-chat-rust
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix css

Browse Source
This commit is contained in:
bartal-lsn
2026-08-24 15:06:30 +01:00
parent eb85449d67
commit cdb04a39b9
5 changed files with 134 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/shared.css
+18 -1
View File
@@ -99,7 +99,7 @@ nav {
position: fixed; top: 0; left: 0;
width: 100%; z-index: 20;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-columns: auto 1fr auto; /* Left: Auto, Center: Grow, Right: Auto */
align-items: center;
gap: 1rem;
padding: 1.25rem 2.5rem;
@@ -148,6 +148,23 @@ nav {
}
.nav-brand:hover { color: var(--accent); border-bottom: none; }
.nav-timer {
grid-column: 3;
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--danger-text);
border: 1px solid var(--danger);
border-radius: 2px;
padding: 0.3rem 0.7rem;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
background: var(--danger-soft);
white-space: nowrap;
}
.brand-sep {
font-weight: 300;
color: var(--ink-dim);
static/css/supporter.css
+34 -97
View File
@@ -7,109 +7,46 @@ html, body {
}
body {
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ---- Mobile Menu Button (Hidden on Desktop) ---- */
.mobile-menu-btn {
display: none;
position: fixed;
bottom: 4rem;
left: 1.5rem;
z-index: 30;
background: var(--accent);
color: var(--bg);
border: none;
border-radius: 2px;
padding: 0.5rem 1rem;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* ---- Layout ---- */
.layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
grid-template-rows: 52px minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
width: 100%;
height: calc(var(--app-height, 100dvh) - 40px);
flex: 1;
min-height: 0;
overflow: hidden;
}
/* ---- Topbar ---- */
.topbar {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0 1.5rem;
border-bottom: 1px solid var(--border);
background: var(--nav-bg);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
min-width: 0;
transition: background 0.3s ease;
}
.menu-button {
display: none;
background: transparent;
color: var(--ink);
border: 1px solid var(--border);
border-radius: 2px;
padding: 0.4rem 0.65rem;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
}
.menu-button:hover { border-color: var(--ink-muted); }
.topbar-brand {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
white-space: nowrap;
font-weight: 700;
font-size: 1rem;
letter-spacing: -0.02em;
color: var(--ink);
text-decoration: none;
}
.topbar-brand:hover { color: var(--accent); border-bottom: none; }
[data-theme="macchiato"] .topbar-brand {
color: #cad3f5;
text-shadow: 0 0 8px rgba(138, 173, 244, 0.25);
}
.topbar-brand .brand-sep {
font-weight: 300;
color: var(--ink-dim);
}
.topbar-brand .brand-sub {
font-weight: 400;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
}
.topbar-timer {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--danger-text);
background: var(--danger-soft);
padding: 0.3rem 0.7rem;
border-radius: 2px;
border: 1px solid var(--danger);
white-space: nowrap;
}
.drawer-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 40;
backdrop-filter: blur(2px);
}
/* ---- Sidebar ---- */
.sidebar {
grid-column: 1;
grid-row: 2;
grid-row: 1;
border-right: 1px solid var(--border);
background: var(--bg-panel);
backdrop-filter: blur(14px);
@@ -119,6 +56,7 @@ body {
overflow: hidden;
min-width: 0;
transition: background 0.3s ease;
padding-top: 65px;
}
.sidebar-header {
@@ -232,7 +170,7 @@ body {
/* ---- Main panel ---- */
.main-panel {
grid-column: 2;
grid-row: 2;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: center;
@@ -266,6 +204,7 @@ body {
border-bottom: 1px solid var(--border);
min-height: 50px;
flex-shrink: 0;
background: var(--bg); /* Match page bg to eliminate white strip */
}
.active-copy {
@@ -451,11 +390,11 @@ body {
@media (max-width: 820px) {
.layout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 52px minmax(0, 1fr);
}
.topbar { padding: 0 0.75rem; }
.menu-button { display: inline-flex; }
.mobile-menu-btn {
display: inline-flex;
}
.drawer-backdrop.visible { display: block; }
@@ -476,7 +415,6 @@ body {
.main-panel {
grid-column: 1;
grid-row: 2;
padding: 0.65rem;
align-items: stretch;
justify-content: stretch;
@@ -495,10 +433,9 @@ body {
}
@media (max-width: 460px) {
.topbar-brand .brand-sub { display: none; }
.topbar-brand .brand-sep { display: none; }
.nav-brand .brand-sub { display: none; }
.nav-brand .brand-sep { display: none; }
.main-panel { padding: 0.45rem; }
.main-header { min-height: 46px; }
#supporter-messages { padding: 0.75rem; }
.theme-toggle { width: 20px; height: 20px; bottom: 1rem; right: 0.75rem; }
}
templates/index.html
+1 -1
View File
@@ -27,11 +27,11 @@
<a href="/" class="nav-brand">
FLÓ <span class="brand-sep">/</span> <span class="brand-sub">USER TO SUPPORT CHAT // RUST</span>
</a>
<span class="nav-timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
</nav>
<main class="page-body">
<div class="card">
<span class="timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
<h1>User to Support Chat</h1>
<p>Rust-based real-time chat with separate user and supporter views. Conversations, messages, and rate limits reset every 20 minutes.</p>
templates/supporter.html
+13 -8
View File
@@ -22,20 +22,20 @@
</head>
<body>
<div class="layout">
<header class="topbar">
<button class="menu-button" type="button" onclick="openSidebar()">Chats</button>
<a href="/" class="topbar-brand">
<!-- STANDARD NAV (Same as user.html) -->
<nav>
<a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
<a href="/" class="nav-brand">
FLÓ <span class="brand-sep">/</span> <span class="brand-sub">USER TO SUPPORT CHAT // RUST</span>
</a>
<span class="topbar-timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
</header>
<div id="drawer-backdrop" class="drawer-backdrop" onclick="closeSidebar()"></div>
<span class="nav-timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
</nav>
<div class="layout">
<aside id="sidebar" class="sidebar">
<div class="sidebar-header">
<span class="sidebar-title">Conversations</span>
<!-- Chats button moved here for desktop, or use mobile toggle -->
<button class="close-sidebar" type="button" onclick="closeSidebar()">Close</button>
</div>
<div id="session-list"
@@ -76,6 +76,11 @@
</section>
</div>
<div id="drawer-backdrop" class="drawer-backdrop" onclick="closeSidebar()"></div>
<!-- Mobile Menu Button (Hidden on Desktop) -->
<button class="mobile-menu-btn" onclick="openSidebar()" aria-label="Open conversations">Chats</button>
<footer>
<span>&copy; <script>document.write(new Date().getFullYear())</script> FLÓ.FO | ØLL RÆTTINDI TILSKILAÐ</span>
<a href="https://www.facebook.com/people/FL%C3%93/61593006613799/" target="_blank" rel="noopener" class="footer-icon" aria-label="Facebook">
templates/user.html
+1 -2
View File
@@ -27,10 +27,9 @@
<a href="/" class="nav-brand">
FLÓ <span class="brand-sep">/</span> <span class="brand-sub">USER TO SUPPORT CHAT // RUST</span>
</a>
<span class="nav-timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
</nav>
<span class="page-timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
<div class="chat-wrapper">
<div id="chat-container">
<div id="chat-header">