From 10764aaf98fd418a9a39bb2f0ee1ea0d66859563 Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Tue, 1 Nov 2022 11:35:26 +0100
Subject: [PATCH] Display capabilities and paths as accordions to reduce
 clutter

---
 .../templates/character/capability.html       | 25 ++++++++++++-------
 src/character/templates/character/path.html   |  4 +--
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/character/templates/character/capability.html b/src/character/templates/character/capability.html
index 47923ab..cbbfd0f 100644
--- a/src/character/templates/character/capability.html
+++ b/src/character/templates/character/capability.html
@@ -1,9 +1,16 @@
-<li class="list-group-item">
-    <strong>
-        {{ capability.rank }}.
-        {{ capability.name }}
-        {% if capability.spell %}<i class="fa-solid fa-hand-sparkles"></i>{% endif %}
-        {% if capability.limited %}<i class="fa-solid fa-handcuffs"></i>{% endif %}
-    </strong><br>
-    {{ capability.description }}
-</li>
+<div class="accordion-item">
+    <h2 class="accordion-header">
+        <button class="accordion-button collapsed" type="button"
+            data-bs-toggle="collapse" data-bs-target="#cap-{{ capability.pk }}">
+            {{ capability.rank }}.
+            {{ capability.name }}
+            {% if capability.spell %}&nbsp;<i class="fa-solid fa-hand-sparkles"></i>{% endif %}
+            {% if capability.limited %}&nbsp;<i class="fa-solid fa-handcuffs"></i>{% endif %}
+        </button>
+    </h2>
+    <div id="cap-{{ capability.pk }}" class="accordion-collapse collapse">
+        <div class="accordion-body">
+            {{ capability.description }}
+        </div>
+    </div>
+</div>
diff --git a/src/character/templates/character/path.html b/src/character/templates/character/path.html
index 99cf0d2..1316af1 100644
--- a/src/character/templates/character/path.html
+++ b/src/character/templates/character/path.html
@@ -23,10 +23,10 @@
         {% if path.notes %}
             <div class="card-body text-bg-light">{{ path.notes }}</div>
         {% endif %}
-        <ul class="list-group list-group-flush capabilities">
+        <div class="accordion accordion-flush capabilities">
             {% for capability in capabilities %}
                 {% include "character/capability.html" %}
             {% endfor %}
-        </ul>
+        </div>
     </div>
 </div>