From a664611f2de7932f84125df80bfa93c1c3e1ca3b Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Tue, 18 Jun 2024 12:18:43 +0200
Subject: [PATCH] feat(dropdown): add dropdown menu to service links

Enhanced the UI by adding dropdown menus to service links. This includes new styles for dropdowns in CSS and corresponding changes in the HTML templates. Also, extended `services.json` to support alternative links with Tor options for better accessibility.

Adjusted the maximum width for service cards to improve layout on larger screens.
---
 assets/css/base.css  | 55 ++++++++++++++++++++++++++++++++++++++++++++
 data/services.json   | 12 +++++++---
 templates/index.html | 34 ++++++++++++++++++++++-----
 3 files changed, 92 insertions(+), 9 deletions(-)

diff --git a/assets/css/base.css b/assets/css/base.css
index 12024d9..d766dc0 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -208,4 +208,59 @@ h5 {
       display: none;
     }
   }
+}
+
+/* Dropdown Styles */
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 100%;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.dropdown-toggle-area {
+  display: inline-block;
+  cursor: pointer;
+  color: white;
+}
+
+.btn-primary:has(.dropdown-toggle-area) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.btn-primary .main-link {
+  flex-grow: 1;
+  padding: 10px;
+  text-align: center;
+  color: white;
+  text-decoration: none;
+}
+
+.btn-primary .main-link:hover {
+  text-decoration: none;
+  color: black;
 }
\ No newline at end of file
diff --git a/data/services.json b/data/services.json
index e1be581..54a5492 100644
--- a/data/services.json
+++ b/data/services.json
@@ -4,12 +4,18 @@
             "name": "Matrix",
             "url": "https://element.private.coffee",
             "short_description": "Matrix is an open network for secure, decentralized communication.",
-            "long_description": "Private.coffee runs a Matrix server. You can use it to chat with other people at Private.coffee or around the world. Use it with a client of your choice, with https://matrix.private.coffee as the homeserver, or use our web client.",
+            "long_description": "Private.coffee runs a Matrix server. You can use it to chat with other people at Private.coffee or around the world. Use it with a client of your choice, or use our Element web client.",
             "status": "OK",
             "links": [
                 {
-                    "name": "Go to Element (Web client)",
-                    "url": "https://element.private.coffee"
+                    "name": "Go to Element",
+                    "url": "https://element.private.coffee",
+                    "alternatives": [
+                        {
+                            "name": "Tor",
+                            "url": "http://element.coffee2m3bjsrrqqycx6ghkxrnejl2q6nl7pjw2j4clchjj6uk5zozad.onion"
+                        }
+                    ]
                 }
             ],
             "icon": "matrix-logo",
diff --git a/templates/index.html b/templates/index.html
index 88d133e..97c041e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -26,7 +26,13 @@
           xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:svg="http://www.w3.org/2000/svg"
-          style="max-width: 400px;filter: brightness(1.5);-webkit-filter: drop-shadow( 4px 4px 3px rgba(0, 0, 0, .7));filter: drop-shadow( 4px 4px 3px rgba(0, 0, 0, .7)) brightness(1.5);max-height: 400px;"
+          style="
+            max-width: 400px;
+            filter: brightness(1.5);
+            -webkit-filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.7));
+            filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.7)) brightness(1.5);
+            max-height: 400px;
+          "
         >
           <defs id="defs6" />
           <sodipodi:namedview
@@ -95,31 +101,47 @@
     </div>
     <div class="py-5 p-lg-5">
       <div
-        class="row row-cols-1 row-cols-md-2 mx-auto"
-        style="max-width: 900px"
+        class="row row-cols-1 row-cols-md-2 row-cols-lg-3 mx-auto"
+        style="max-width: 1200px"
       >
         {% 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">
+              {% 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"
               >
-                {% if service.icon %}{{ service.icon | icon | safe }}{% endif %}
+                {{ service.icon | icon | safe }}
               </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 %}
+              {% 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">&#9660;</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
               >
-              {% endfor %}
+              {% endif %} {% endfor %}
             </div>
           </div>
         </div>