Frank/dmtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Overview page: navigation tiles instead of the demo table

Browse Source 
Replaces the leftover scaffold DataTable with a grid of tiles linking to
Characters, NPC's, Enemies, Tracker, Art and Storyline.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Frank
2026-09-06 19:43:37 +02:00
co-authored by Claude Sonnet 5
parent cb23d5b9ac
commit 7a9f72a3de
2 changed files with 33 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/app.css
+9
View File
@@ -124,3 +124,12 @@ table.dataTable {
.statblock-collapse h3 {
margin-top: 0.75rem;
}
/* --- Overview tiles ------------------------------------------------------ */
.home-tile {
transition: border-color 0.12s ease, transform 0.12s ease;
}
.home-tile:hover {
border-color: var(--bs-primary);
transform: translateY(-2px);
}
templates/home/index.html.twig
+24 -30
View File
@@ -3,37 +3,31 @@
{% block title %}Overview · dmtools{% endblock %}
{% block body %}
<div class="d-flex justify-content-between align-items-center mb-3">
<h1 class="h3 mb-0">Overview</h1>
</div>
<h1 class="h3 mb-3">Overview</h1>
<p class="text-body-secondary">
Starting point for the Monday-evening campaign tools. The table below is a
placeholder that shows the Bootstrap + DataTables layout wiring works
(search, sort, paging).
</p>
{% set tiles = [
{ route: 'app_characters', icon: '🧝', label: 'Characters', blurb: 'The player characters' },
{ route: 'app_npcs', icon: '🧑‍🌾', label: "NPC's", blurb: 'Villagers and other non-player characters' },
{ route: 'app_enemies', icon: '👹', label: 'Enemies', blurb: 'Monster stat blocks' },
{ route: 'app_tracker', icon: '⚔️', label: 'Tracker', blurb: 'Run encounters and track hit points' },
{ route: 'app_art', icon: '🖼️', label: 'Art', blurb: 'Maps, handouts and character pieces' },
{ route: 'app_storyline', icon: '📜', label: 'Storyline', blurb: 'Campaign notes and plot threads' },
] %}
<div class="card shadow-sm">
<div class="card-body">
<table class="table table-striped table-hover align-middle datatable"
data-datatable-options='{"order": [[0, "asc"]]}'>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Location</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr><td>Seraphina Vane</td><td>NPC</td><td>Blackreach</td><td>Owes the party a favour</td></tr>
<tr><td>Goblin ambush</td><td>Encounter</td><td>Old Kings Road</td><td>CR 2, 6 goblins</td></tr>
<tr><td>The Sunken Vault</td><td>Location</td><td>Lake Nydra</td><td>Water-breathing required</td></tr>
<tr><td>Rusted Key</td><td>Item</td><td>Party inventory</td><td>Opens the vault antechamber</td></tr>
<tr><td>Captain Dorae</td><td>NPC</td><td>Saltmarsh docks</td><td>Will smuggle cargo for coin</td></tr>
<tr><td>Owlbear den</td><td>Encounter</td><td>Whisperwood</td><td>CR 3, mother + 2 cubs</td></tr>
</tbody>
</table>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
{% for t in tiles %}
<div class="col">
<a href="{{ path(t.route) }}"
class="card shadow-sm h-100 text-decoration-none text-body home-tile">
<div class="card-body d-flex align-items-start gap-3">
<div class="fs-1 lh-1">{{ t.icon }}</div>
<div>
<div class="h5 mb-1">{{ t.label }}</div>
<div class="text-body-secondary small">{{ t.blurb }}</div>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
{% endblock %}