mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-12-02 15:39:57 +00:00
Kevin Veen-Birkenbach
6fda85788a
This update introduces full JavaScript-based nested submenu handling for the Apps menu, enabling reliable click-based toggling without interference from Bootstrap’s native dropdown logic. Submenus now expand to the left via custom CSS and no longer require dropstart or data-bs-toggle attributes. Changes include: - Add javascript feature flag and enable inline eval in CSP - Add javascript.js implementing custom submenu toggle logic - Add CSS rules for left-expanding nested dropdown menus - Replace hardcoded headline with LITTLEJS_HEADLINE variable - Modernize “Play” → “Start” labels in cards - Remove unused/legacy examples from examples.yml (commented out, not deleted) - Cleanup nav_top.html.j2 to remove conflicting Bootstrap attributes Conversation reference: https://chatgpt.com/share/6928b4c7-19ec-800f-a087-9af304ef4ed9
54 lines
1.7 KiB
Django/Jinja
54 lines
1.7 KiB
Django/Jinja
<main class="container py-4">
|
|
<header class="mb-4">
|
|
<h1 class="h3 mb-2">{{ LITTLEJS_HEADLINE }}</h1>
|
|
<p class="text-secondary small mb-0">
|
|
Browse and launch LittleJS demos rendered dynamically through {{ SOFTWARE_NAME }}.
|
|
</p>
|
|
</header>
|
|
|
|
<section>
|
|
<div class="row g-4">
|
|
|
|
{% for key, cat in littlejs_examples|dictsort %}
|
|
{% for ex in cat['items'] %}
|
|
{% set href = ex | littlejs_href(WEB_PROTOCOL, domain) %}
|
|
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
|
|
<div class="card app-card h-100">
|
|
<div class="card-body d-flex flex-column">
|
|
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<div class="app-icon text-primary-emphasis">
|
|
<i class="{{ ex.icon }}"></i>
|
|
</div>
|
|
<span class="badge rounded-pill bg-primary-subtle text-primary app-badge">
|
|
{{ cat.label|replace('---','')|trim }}
|
|
</span>
|
|
</div>
|
|
|
|
<h2 class="h5 mb-2">{{ ex.name }}</h2>
|
|
|
|
{% if ex.description %}
|
|
<p class="small text-secondary mb-3">{{ ex.description }}</p>
|
|
{% endif %}
|
|
|
|
{% if ex.tags %}
|
|
<p class="small text-muted mb-3">{{ ex.tags }}</p>
|
|
{% endif %}
|
|
|
|
<div class="mt-auto">
|
|
<a href="{{ href }}" class="btn btn-primary app-footer-btn">
|
|
<i class="{{ ex.icon }} me-2"></i>Start {{ ex.name }}
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endfor %}
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</section>
|
|
</main>
|