From 2a054a7f7894ccf9d1dd95d9fd70d7877d653da7 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Sun, 4 Aug 2024 13:24:42 +0200
Subject: [PATCH] feat(UI): enhance accordion and icon styling for consistency

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.
---
 assets/css/base.css  | 15 ++++++++++++++-
 templates/index.html | 25 ++++++++++++-------------
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/assets/css/base.css b/assets/css/base.css
index 9d4d7a3..4cfd25a 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -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;
diff --git a/templates/index.html b/templates/index.html
index ad173ad..c3b6df7 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -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>