From 7dd217a78e99ecb7783c6b451c6b8c8cc8aa91f1 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Sun, 4 Aug 2024 13:02:07 +0200
Subject: [PATCH] feat: replace accordion implementation with details/summary

Migrated accordion elements from a Bootstrap-based approach to
using the native HTML <details> and <summary> tags for better
accessibility and reduced reliance on third-party libraries.
Enhanced CSS for the accordion components to style hover effects
and manage open states effectively. Simplified icon handling
within accordion bodies.
---
 assets/css/base.css  | 23 ++++++++---
 templates/index.html | 90 ++++++++++++++++++--------------------------
 2 files changed, 53 insertions(+), 60 deletions(-)

diff --git a/assets/css/base.css b/assets/css/base.css
index b3f452a..9d4d7a3 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -280,19 +280,30 @@ h5 {
   border: 1px solid #ddd;
   border-radius: 5px;
 }
+
 .accordion-item {
   border-bottom: 1px solid #ddd;
+  margin-bottom: 1rem;
 }
+
 .accordion-header {
   padding: 1rem;
   cursor: pointer;
-}
-.accordion-button {
-  background: none;
-  border: none;
-  outline: none;
+  background-color: #f9f9f9;
   font-size: 1.25rem;
+  font-weight: bold;
+  border-bottom: 1px solid #ddd;
 }
-.accordion-collapse {
+
+.accordion-header:hover {
+  background-color: #e9e9e9;
+}
+
+.accordion-body {
   padding: 1rem;
+  display: none;
+}
+
+.accordion-item[open] .accordion-body {
+  display: block;
 }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 8066de4..05f7a5e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -36,69 +36,51 @@
       </div>
     </div>
     <div class="py-5 p-lg-5">
-      <div class="accordion" id="servicesAccordion">
+      <div class="accordion">
         {% for service in services.services %} {% if not
         service.exclude_from_index %}
-        <div class="accordion-item">
-          <h2 class="accordion-header" id="heading{{ loop.index }}">
-            <button
-              class="accordion-button"
-              type="button"
-              data-bs-toggle="collapse"
-              data-bs-target="#collapse{{ loop.index }}"
-              aria-expanded="true"
-              aria-controls="collapse{{ loop.index }}"
+        <details class="accordion-item">
+          <summary class="accordion-header">{{ service.name }}</summary>
+          <div class="accordion-body">
+            {% if service.icon %}
+            <div
+              class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
+              title="{{ service.name }}"
             >
-              {{ service.name }}
-            </button>
-          </h2>
-          <div
-            id="collapse{{ loop.index }}"
-            class="accordion-collapse collapse"
-            aria-labelledby="heading{{ loop.index }}"
-            data-bs-parent="#servicesAccordion"
-          >
-            <div class="accordion-body">
-              {% if service.icon %}
+              {{ service.icon | icon | safe }} {% if service.homemade %}
               <div
-                class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
-                title="{{ service.name }}"
+                class="bs-icon-sm bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-sm homemade"
+                title="Made by Private.coffee"
               >
-                {{ service.icon | icon | safe }} {% if service.homemade %}
-                <div
-                  class="bs-icon-sm bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-sm homemade"
-                  title="Made by Private.coffee"
-                >
-                  {{ "coffee" | icon | safe }}
-                </div>
-                {% endif %}
+                {{ "coffee" | icon | safe }}
               </div>
               {% endif %}
-              <p class="text-muted card-text mb-4">
-                {{ service.long_description }}
-              </p>
-              {% for link in service.links %} {% if link.alternatives %}
-              <div class="dropdown">
-                <div class="btn btn-primary shadow">
-                  <a class="main-link" href="{{ link.url }}">{{ link.name }}</a>
-                  <div class="dropdown-toggle-area">&#9660;</div>
-                </div>
-                <div class="dropdown-content">
-                  {% for alternative in link.alternatives %}
-                  <a href="{{ alternative.url }}">{{ alternative.name }}</a>
-                  {% endfor %}
-                </div>
-              </div>
-              {% else %}
-              <a
-                class="btn btn-primary shadow w-100 text-center"
-                href="{{ link.url }}"
-                >{{ link.name }}</a
-              >
-              {% endif %} {% endfor %}
             </div>
+            {% endif %}
+            <p class="text-muted card-text mb-4">
+              {{ service.long_description }}
+            </p>
+            {% for link in service.links %} {% if link.alternatives %}
+            <div class="dropdown">
+              <div class="btn btn-primary shadow">
+                <a class="main-link" href="{{ link.url }}">{{ link.name }}</a>
+                <div class="dropdown-toggle-area">&#9660;</div>
+              </div>
+              <div class="dropdown-content">
+                {% for alternative in link.alternatives %}
+                <a href="{{ alternative.url }}">{{ alternative.name }}</a>
+                {% endfor %}
+              </div>
+            </div>
+            {% else %}
+            <a
+              class="btn btn-primary shadow w-100 text-center"
+              href="{{ link.url }}"
+              >{{ link.name }}</a
+            >
+            {% endif %} {% endfor %}
           </div>
-        </div>
+        </details>
         {% endif %} {% endfor %}
       </div>
     </div>