feat: add accordion component for services list
Replaced the services list layout with a new accordion component. This allows for a more organized and user-friendly display of services, facilitating better content management and improved user interaction. The CSS was updated to include styles for the accordion structure.
This commit is contained in:
parent
d3d997d552
commit
ac9286bf7e
2 changed files with 45 additions and 12 deletions
|
@ -272,4 +272,27 @@ h5 {
|
|||
.btn-primary .main-link:hover {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Accordion Styles */
|
||||
|
||||
.accordion {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.accordion-item {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.accordion-header {
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.accordion-button {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.accordion-collapse {
|
||||
padding: 1rem;
|
||||
}
|
|
@ -36,19 +36,32 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="py-5 p-lg-5">
|
||||
<div
|
||||
class="row row-cols-1 row-cols-md-2 row-cols-lg-3 mx-auto"
|
||||
style="max-width: 1200px"
|
||||
>
|
||||
<div class="accordion" id="servicesAccordion">
|
||||
{% for service in services.services %} {% if not
|
||||
service.exclude_from_index %}
|
||||
<div class="col mb-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body px-4 py-5 px-md-5">
|
||||
<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 }}"
|
||||
>
|
||||
{{ 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 %}
|
||||
<div
|
||||
class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
|
||||
style="top: 1rem; right: 1rem; position: absolute"
|
||||
title="{{ service.name }}"
|
||||
>
|
||||
{{ service.icon | icon | safe }} {% if service.homemade %}
|
||||
|
@ -61,16 +74,13 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<h5 class="fw-bold card-title">{{ service.name }}</h5>
|
||||
<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>
|
||||
<a class="main-link" href="{{ link.url }}">{{ link.name }}</a>
|
||||
<div class="dropdown-toggle-area">▼</div>
|
||||
</div>
|
||||
<div class="dropdown-content">
|
||||
|
|
Loading…
Reference in a new issue