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:
parent
ac9286bf7e
commit
7dd217a78e
GPG key ID:
ECBCC9082395383F
2 changed files with 53 additions and 60 deletions
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
@ -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">▼</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">▼</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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue