PrivateCoffee/privatecoffee-website
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Enhances accordion functionality and layout
All checks were successful
Build and Deploy Static Site (Pride Theme) / build (push) Successful in 1m55s
Details
Build and Deploy Static Site / build (push) Successful in 1m48s
Details

Browse source 
Reduces padding in accordion headers for a more compact design
Introduces an accordion icon with rotation upon opening
Adds a legend section to explain icon meanings on the page

Improves user interface and accessibility
This commit is contained in:
Kumi 2025-01-02 13:35:14 +01:00
parent 85ea26edaf
commit 40ae593867
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 42 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
assets/css/base.css
View file

@ -309,7 +309,7 @@ h5 {
.accordion-header {
display: flex;
align-items: center;
padding: 1rem;
padding: 0.25rem;
cursor: pointer;
background-color: #f9f9f9;
font-size: 1.25rem;
@ -344,6 +344,15 @@ h5 {
width: 32px;
}
.accordion-icon {
margin-left: auto;
padding: 0.5rem;
}
.accordion-item[open] .accordion-icon {
transform: rotate(180deg);
}
/* Table Styles */
.transparency-start-balance-row > td {

34
templates/index.html
View file

@ -1,5 +1,7 @@
{% extends "base.html" %}
{% block title %}Home{% endblock title %}
{% block title %}
Home
{% endblock title %}
{% block content
%}
<header class="bg-primary-gradient">
@ -57,6 +59,7 @@
title="Runs on a fork of the original software">{{ "git-branch" | icon | safe }}</div>
</a>
{% endif %}
<div class="accordion-icon">&#9660;</div>
</summary>
<div class="accordion-body">
<p class="text-muted card-text mb-4">{{ service.long_description }}</p>
@ -81,6 +84,31 @@
{% endif %}
{% endfor %}
</div>
<!-- Legend -->
<div class="row mt-5">
<div class="col-md-8 col-xl-6 text-center mx-auto">
<p class="fw-bold mb-2 text-primary">Legend</p>
<h5 class="fw-bold">Click the symbols to go find the source code!</h5>
<div class="row row-cols-1 row-cols-md-2">
<div class="col">
<div class="d-flex align-items-center">
<div class="bs-icon-md 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-md">
{{ "coffee" | icon | safe }}
</div>
<p class="px-2 mb-0">Made by Private.coffee</p>
</div>
</div>
<div class="col">
<div class="d-flex align-items-center">
<div class="bs-icon-md 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-md">
{{ "git-branch" | icon | safe }}
</div>
<p class="px-2 mb-0">Runs on a fork of the original software</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@ -140,7 +168,9 @@
</div>
<div class="px-2">
<h6 class="fw-bold mb-0">Email</h6>
<p class="text-muted mb-0"><a href="mailto:support@private.coffee">support@private.coffee</a></p>
<p class="text-muted mb-0">
<a href="mailto:support@private.coffee">support@private.coffee</a>
</p>
</div>
</div>
</div>