xTr1m/GameList
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Center layout with full-width top status row

Browse Source
This commit is contained in:
Frank Tovar
2026-01-29 02:16:49 +01:00
parent e6d56b7a99
commit c7d87a1768
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
wwwroot/index.html
View File

@@ -8,7 +8,7 @@
<!-- Optional: set data-app-base if served from a subfolder (e.g., /vote) --> <!-- Optional: set data-app-base if served from a subfolder (e.g., /vote) -->
<meta name="app-base" content=""> <meta name="app-base" content="">
</head> </head>
<body> <body class="page">
<section class="card hidden" id="auth-card"> <section class="card hidden" id="auth-card">
<div class="stack horizontal"> <div class="stack horizontal">
<button class="ghost active" data-auth-tab="login" type="button">Log in</button> <button class="ghost active" data-auth-tab="login" type="button">Log in</button>
@@ -46,17 +46,19 @@
</form> </form>
</section> </section>
<section>
<div class="status-bar"> <div class="status-bar">
<div class="status-left"> <div class="status-left">
<span id="welcome-text">Welcome!</span> <span id="welcome-text">Welcome!</span>
<a id="logout" href="#" class="link inline-link">Logout</a> <a id="logout" href="#" class="link inline-link">Logout</a>
</div> </div>
<div class="status-right"> <div class="status-right">
<span class="status-dot"></span> <span class="status-dot"></span>
<span id="phase-pill">Loading…</span> <span id="phase-pill">Loading…</span>
<span class="counts" id="counts">—</span> <span class="counts" id="counts">—</span>
</div>
</div> </div>
</div> </section>
<main class="grid"> <main class="grid">
<section id="actions-card"> <section id="actions-card">

9
wwwroot/styles.css
View File

@@ -4,14 +4,18 @@
color: #e5e7eb; color: #e5e7eb;
} }
body { .page {
margin: 0; margin: 0;
padding: 20px; padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
} }
.status-bar { .status-bar {
display: flex; display: flex;
align-items: center; width: 100%;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
background: rgba(15, 23, 42, 0.8); background: rgba(15, 23, 42, 0.8);
@@ -43,7 +47,6 @@ body {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 16px; gap: 16px;
margin-top: 16px;
} }
.card { .card {