Brummel
a37a1ae363
The server-rendered pages worked on desktop but were near-unusable on a phone: no viewport meta tag (mobile browsers laid out in a ~980px canvas and zoomed out, rendering everything tiny) and a fixed `max-width: 900px` desktop body with zero responsive breakpoints. Fix is CSS-only and purely additive: - Add `<meta name="viewport" content="width=device-width, initial-scale=1">` to all four page templates (each owns its own <head> — askama uses import/include here, no shared base layout, so the tag lands in 4 places). - Append a single `@media (max-width: 640px)` block to the three desktop-width pages (my_cases, case_recordings, case_page): case rows and action bars reflow to a single column, the audio player goes full-width, and primary touch targets (delete/reopen/play) get a 44px minimum. login.html already has a 360px column layout, so it needs the viewport tag only. Desktop layout is preserved by construction: a `max-width: 640px` query never matches at >=900px, so the desktop render is byte-identical. The diff adds lines only — no existing rule is touched. Breakpoint chosen at 640px (well below the 900px body width) so all portrait phones, including the ~390px target, fall under it while tablets keep the desktop layout. New integration test server/tests/responsive_test.rs pins the two textual acceptance criteria that survive without a headless browser: every page ships the viewport meta, and the three desktop-width pages ship an @media breakpoint. The visual criteria (operable at 390px, 44px touch targets) are CSS-driven and verified by eye — deliberately not covered by a browser-automation dependency. Verified: cargo test -p doctate-server --test responsive_test (4/4 green); web/login/case_page regression suites green; diff is additive. closes #10
31 lines
1.1 KiB
HTML
31 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Doctate — Login</title>
|
|
<style>
|
|
body { font-family: sans-serif; max-width: 360px; margin: 4em auto; padding: 0 1em; }
|
|
h1 { font-size: 1.8em; margin: 0 0 1em; text-align: center; }
|
|
form { display: flex; flex-direction: column; gap: 0.8em; }
|
|
label { display: flex; flex-direction: column; gap: 0.25em; font-size: 0.9em; color: #555; }
|
|
input, button { box-sizing: border-box; width: 100%; padding: 0.6em; font-size: 1em; font-family: inherit; }
|
|
button { cursor: pointer; margin-top: 0.4em; }
|
|
.error { background: #fee; border: 1px solid #e99; padding: 0.5em; border-radius: 4px; color: #900; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Doctate</h1>
|
|
{% match error %}
|
|
{% when Some with (msg) %}
|
|
<div class="error">{{ msg }}</div>
|
|
{% when None %}
|
|
{% endmatch %}
|
|
<form method="post" action="/login">
|
|
<label>Benutzer<input type="text" name="slug" autofocus required></label>
|
|
<label>Passwort<input type="password" name="password" required></label>
|
|
<button type="submit">Anmelden</button>
|
|
</form>
|
|
</body>
|
|
</html>
|