carlosarias/seedproject-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

admin: fix login screen showing both panels + add dashboard links

Browse source 
- .panel's display:flex was overriding the [hidden] attribute, so the Sign-in
  form and 'You're in' panel showed at once regardless of session. Force
  [hidden] { display:none !important } so they toggle.
- 'You're in' now links to Web Designer, Manage projects, and the site.
This commit is contained in:
Carlos Arias 2026-07-24 02:35:20 +00:00
parent a906ef026f
commit 15292f66fc
1 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/src/pages/admin/index.astro
View file

@ -27,6 +27,10 @@ import { SITE } from "../../lib/blog-data.js";
--rule:#2a2c33; --seal:#e8564a; --card:#191a1f; }
}
* { box-sizing: border-box; }
/* .panel sets display:flex, which would otherwise beat the [hidden]
attribute's UA display:none — force hidden to win so the login and
signed-in panels actually toggle. */
[hidden] { display: none !important; }
body {
margin: 0; min-height: 100dvh; display: grid; place-items: center;
background: var(--paper); color: var(--ink); font-family: var(--sans);
@ -65,6 +69,9 @@ import { SITE } from "../../lib/blog-data.js";
.steps li { position: relative; padding-left: 1.1rem; font-size: 0.88rem; line-height: 1.5; color: var(--ink3); }
.steps li::before { content:""; position:absolute; left:0; top:0.62em; width:0.5rem; height:1px; background:var(--seal); }
a.link { color: var(--ink); border-bottom: 1px solid var(--ink4); text-decoration: none; }
.links { display: flex; flex-direction: column; gap: 0.7rem; }
.links a { align-self: flex-start; font-size: 0.95rem; }
.links a:hover { border-bottom-color: var(--seal); }
.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.mono-note { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--ink4); }
@ -101,12 +108,14 @@ import { SITE } from "../../lib/blog-data.js";
<h1>You&rsquo;re in.</h1>
<p class="sub">Signed in as <strong id="who"></strong>. The editing console is now active across the site.</p>
</div>
<div class="links">
<a class="link" href="/admin/designer">Web Designer &rarr;</a>
<a class="link" href="/admin/projects">Manage projects &rarr;</a>
<a class="link" href="/">Go to the site &rarr;</a>
</div>
<ul class="steps">
<li>Open any page (start with the <a class="link" href="/">homepage</a>).</li>
<li>Click the <strong>▲ astroagent</strong> handle at the bottom.</li>
<li>Tell it what to change, review the preview, then Publish.</li>
<li>Or open any page and click the <strong>▲ astroagent</strong> handle to edit it in place.</li>
</ul>
<a class="link" href="/" style="font-size:.9rem">Go to the site &rarr;</a>
<button class="ghost" id="out" type="button" style="margin-top:.4rem">Sign out</button>
</div>