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

feat(UI): enhance accordion and icon styling for consistency
All checks were successful
Build and Deploy Static Site / build (push) Successful in 58s
Details

Browse source 
Improved the styling of homemade icons by setting explicit height and
width, ensuring they are consistently sized. Refined the layout of the
accordion header by adding flex display and centering alignment for
better visual alignment. Introduced new icon container styles to
standardize icon presentation and spacing.

These changes aim to provide a more polished and uniform user interface
experience, addressing inconsistencies and enhancing visual clarity.
This commit is contained in:
Kumi 2024-08-04 13:24:42 +02:00
parent e623762b15
commit 2a054a7f78
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
assets/css/base.css
View file

@ -120,8 +120,9 @@ h5 {
}
.homemade {
top: -0.5rem;
right: -0.5rem;
height: 1.5rem;
width: 1.5rem;
position: absolute;
}
@ -287,6 +288,8 @@ h5 {
}
.accordion-header {
display: flex;
align-items: center;
padding: 1rem;
cursor: pointer;
background-color: #f9f9f9;
@ -299,6 +302,16 @@ h5 {
background-color: #e9e9e9;
}
.icon-container {
display: flex;
align-items: center;
margin-right: 1rem;
}
.bs-icon {
position: relative;
}
.accordion-body {
padding: 1rem;
display: none;

25
templates/index.html
View file

@ -41,25 +41,24 @@
service.exclude_from_index %}
<details class="accordion-item">
<summary class="accordion-header">
{{ service.name }}{% if service.tiny_description %} - {{
service.tiny_description }}{% endif %}
</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"
class="bs-icon-lg d-flex justify-content-center align-items-center bs-icon"
title="{{ service.name }}"
>
{{ 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 %}
{{ service.icon | icon | safe }}
</div>
{% endif %} {{ service.name }}{% if service.tiny_description %} - {{
service.tiny_description }}{% endif %} {% 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 %}
</summary>
<div class="accordion-body">
<p class="text-muted card-text mb-4">
{{ service.long_description }}
</p>