FrankandClaude Sonnet 5
90345ecd38
The chapter page now fills the viewport as two horizontal panes: the
chapter scrolls in the top ~2/3, the notes sit in a fixed dock in the
bottom ~1/3, always visible while you read. Drag the divider to change
the ratio, click the "Chapter notes" header to collapse the dock to a
bar; both the height and the collapsed state persist in localStorage.
- base.html.twig: add a {% block body_class %} hook on <body>.
- chapter.html.twig sets body class "storyline-chapter-page"; the split
layout CSS is scoped to it and falls back to normal stacked flow under
768px wide or 560px tall.
- app.js publishes the navbar height as --app-nav-h so the split can size
itself to viewport-minus-navbar even when the navbar wraps.
- new chapter_notes Stimulus controller: drag-resize + collapse + persist.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
74 lines
3.7 KiB
Twig
74 lines
3.7 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}dmtools{% endblock %}</title>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.1em%22 font-size=%22104%22>🎲</text></svg>">
|
|
|
|
{% block stylesheets %}{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
{% block importmap %}{{ importmap('app') }}{% endblock %}
|
|
{% endblock %}
|
|
</head>
|
|
<body class="d-flex flex-column {% block body_class %}{% endblock %}">
|
|
{% block navbar %}
|
|
<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="{{ path('app_home') }}">🎲 dmtools</a>
|
|
{% if app.user %}
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#mainnav" aria-controls="mainnav" aria-expanded="false"
|
|
aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="mainnav">
|
|
{% set route = app.request.attributes.get('_route') %}
|
|
{% set nav = [
|
|
{ route: 'app_home', label: 'Overview' },
|
|
{ route: 'app_characters', label: 'Characters' },
|
|
{ route: 'app_npcs', label: "NPC's" },
|
|
{ route: 'app_enemies', label: 'Enemies' },
|
|
{ route: 'app_tracker', label: 'Tracker' },
|
|
{ route: 'app_art', label: 'Art' },
|
|
{ route: 'app_storyline', label: 'Storyline' },
|
|
] %}
|
|
<ul class="navbar-nav me-auto">
|
|
{% for item in nav %}
|
|
{% set active = route is not null and route starts with item.route %}
|
|
<li class="nav-item">
|
|
<a class="nav-link{{ active ? ' active' }}"{{ active ? ' aria-current="page"' }}
|
|
href="{{ path(item.route) }}">{{ item.label }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<span class="navbar-text small">{{ app.user.userIdentifier }}</span>
|
|
<a class="btn btn-outline-secondary btn-sm" href="{{ path('app_logout') }}">Log out</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|
|
{% endblock %}
|
|
|
|
<main class="app-main flex-grow-1">
|
|
<div class="container">
|
|
{% block flashes %}
|
|
{% for label, messages in app.flashes %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ label == 'error' ? 'danger' : label }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% endblock %}
|
|
|
|
{% block body %}{% endblock %}
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|