danvics/pdf-quiz-generator
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions

fix: define the two form classes nothing defined, and peek the nav on hover

Browse source 
`.form-label` and `.input` are written in four places — the articles page, the
flashcards page, the article editor, the category tree — and were defined
nowhere. An undefined label class is an inline element, so the label sat flush
against an unbordered box: "Titlee.g. Febrile seizures". They are now the
standalone form of the `.form-group` rules, defined once, because a form should
not look different for having no wrapper around it.

And the section bar comes back when the pointer is on the logo. It hides while
you read, which is right, but scrolling up was the only way to see it again —
no use to a reader looking for the way *out* of the page rather than the way
back up it. Focus does the same thing, so a keyboard reaches it too.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TqXevQJhxFrM7jJg82cgZN
This commit is contained in:
Daniel 2026-09-12 19:05:12 +02:00
parent 1be6d10550
commit a55644818e
2 changed files with 32 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/components/Navbar.jsx
View file

@ -207,6 +207,12 @@ export default function Navbar({ onSignIn, onRegister, onSearch }) {
// The section bar is wanted when you decide to go elsewhere and in the way
// every other moment, so it leaves on the way down and returns on the way up.
const sectionBarHidden = useHidingBar()
// Bringing the bar back without scrolling for it. The row hides while you
// read, which is right, but the only way to see it again was to scroll up —
// no use to a reader who is looking for the way out of the page they are on
// rather than the way back up it. Hovering the logo peeks it back; leaving
// the header lets it go again.
const [peek, setPeek] = useState(false)
// Registered by the quiz player while it is on screen without a rail.
const sessionDrawer = useSessionDrawer()
const [jobs, setJobs] = useState([])
@ -270,12 +276,13 @@ export default function Navbar({ onSignIn, onRegister, onSearch }) {
] : []
return (
<div className="navbar">
<div className="navbar" onMouseLeave={() => setPeek(false)}>
{/* Two bars, as on a reference site: who you are and what you are looking
for stays put; where you are going gets out of the way while you read. */}
<div className="navbar-primary">
<div className="container navbar-inner">
<Link to="/" className="logo" onClick={() => setMenuOpen(false)}>🏥 PedsHub</Link>
<Link to="/" className="logo" onClick={() => setMenuOpen(false)}
onMouseEnter={() => setPeek(true)} onFocus={() => setPeek(true)}>🏥 PedsHub</Link>
{user && <GlobalSearch onOpenOverlay={onSearch} />}
{user ? (
@ -333,7 +340,7 @@ export default function Navbar({ onSignIn, onRegister, onSearch }) {
{user && !inSession && (
/* Focus-within keeps it open for a keyboard user tabbing into links
that are visually gone. */
<div className={`navbar-sections${sectionBarHidden ? ' is-hidden' : ''}`}>
<div className={`navbar-sections${sectionBarHidden && !peek ? ' is-hidden' : ''}`}>
<div className="container navbar-sections-inner">
<ExamSwitcher onChange={() => window.location.reload()} />
{/* The bar used to hide its scrollbar and fade the right edge,

22
frontend/src/index.css
View file

@ -320,6 +320,28 @@ html, body { overflow-x: hidden; }
.form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
[data-theme="minimal"] .form-group input:focus { box-shadow: 0 0 0 2px #09090b18; }
/* The same two controls outside a .form-group wrapper. Four pages — articles,
flashcards, the article editor, the category tree — write `.form-label` and
`.input` directly, and neither class was defined anywhere, so a label fell
back to inline and sat flush against an unbordered box: "Titlee.g. Febrile
seizures". Defined here rather than fixed on one page, because the classes
were always meant to be the standalone form of the rules above, and a form
should not look different for having no wrapper around it. */
.form-label {
display: block; font-weight: 500; margin-bottom: 6px;
font-size: 0.85rem; color: var(--text-muted);
}
.form-label + .input, .form-label + textarea.input { margin-bottom: 12px; }
.input {
width: 100%; padding: 9px 13px;
border: 1px solid var(--border); border-radius: 8px;
font-size: 0.9rem; background: var(--input-bg); color: var(--text);
font-family: inherit;
}
[data-theme="minimal"] .input { border-radius: 6px; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
[data-theme="minimal"] .input:focus { box-shadow: 0 0 0 2px #09090b18; }
/* ── Question card (quiz-taking) ────────────────────────────── */
.question-card {
background: var(--card-bg);