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.
This commit is contained in:
Kumi 2024-08-04 13:02:07 +02:00
parent ac9286bf7e
commit 7dd217a78e
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 53 additions and 60 deletions

View file

@ -280,19 +280,30 @@ h5 {
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 5px; border-radius: 5px;
} }
.accordion-item { .accordion-item {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
margin-bottom: 1rem;
} }
.accordion-header { .accordion-header {
padding: 1rem; padding: 1rem;
cursor: pointer; cursor: pointer;
} background-color: #f9f9f9;
.accordion-button {
background: none;
border: none;
outline: none;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: bold;
border-bottom: 1px solid #ddd;
} }
.accordion-collapse {
.accordion-header:hover {
background-color: #e9e9e9;
}
.accordion-body {
padding: 1rem; padding: 1rem;
display: none;
}
.accordion-item[open] .accordion-body {
display: block;
} }

View file

@ -36,69 +36,51 @@
</div> </div>
</div> </div>
<div class="py-5 p-lg-5"> <div class="py-5 p-lg-5">
<div class="accordion" id="servicesAccordion"> <div class="accordion">
{% for service in services.services %} {% if not {% for service in services.services %} {% if not
service.exclude_from_index %} service.exclude_from_index %}
<div class="accordion-item"> <details class="accordion-item">
<h2 class="accordion-header" id="heading{{ loop.index }}"> <summary class="accordion-header">{{ service.name }}</summary>
<button <div class="accordion-body">
class="accordion-button" {% if service.icon %}
type="button" <div
data-bs-toggle="collapse" class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
data-bs-target="#collapse{{ loop.index }}" title="{{ service.name }}"
aria-expanded="true"
aria-controls="collapse{{ loop.index }}"
> >
{{ service.name }} {{ service.icon | icon | safe }} {% if service.homemade %}
</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 %}
<div <div
class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" 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="{{ service.name }}" title="Made by Private.coffee"
> >
{{ service.icon | icon | safe }} {% if service.homemade %} {{ "coffee" | icon | safe }}
<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 %}
</div> </div>
{% endif %} {% 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>
{% 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>
</div> </details>
{% endif %} {% endfor %} {% endif %} {% endfor %}
</div> </div>
</div> </div>