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.
This commit is contained in:
Kumi 2024-06-18 12:18:43 +02:00
parent b47782b5e6
commit a664611f2d
Signed by: kumi
GPG key ID: ECBCC9082395383F
3 changed files with 92 additions and 9 deletions

View file

@ -209,3 +209,58 @@ h5 {
} }
} }
} }
/* 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;
}

View file

@ -4,12 +4,18 @@
"name": "Matrix", "name": "Matrix",
"url": "https://element.private.coffee", "url": "https://element.private.coffee",
"short_description": "Matrix is an open network for secure, decentralized communication.", "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", "status": "OK",
"links": [ "links": [
{ {
"name": "Go to Element (Web client)", "name": "Go to Element",
"url": "https://element.private.coffee" "url": "https://element.private.coffee",
"alternatives": [
{
"name": "Tor",
"url": "http://element.coffee2m3bjsrrqqycx6ghkxrnejl2q6nl7pjw2j4clchjj6uk5zozad.onion"
}
]
} }
], ],
"icon": "matrix-logo", "icon": "matrix-logo",

View file

@ -26,7 +26,13 @@
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="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" /> <defs id="defs6" />
<sodipodi:namedview <sodipodi:namedview
@ -95,31 +101,47 @@
</div> </div>
<div class="py-5 p-lg-5"> <div class="py-5 p-lg-5">
<div <div
class="row row-cols-1 row-cols-md-2 mx-auto" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 mx-auto"
style="max-width: 900px" style="max-width: 1200px"
> >
{% for service in services.services %} {% if not {% for service in services.services %} {% if not
service.exclude_from_index %} service.exclude_from_index %}
<div class="col mb-5"> <div class="col mb-5">
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5"> <div class="card-body px-4 py-5 px-md-5">
{% if service.icon %}
<div <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 mb-3 bs-icon"
style="top: 1rem; right: 1rem; position: absolute" style="top: 1rem; right: 1rem; position: absolute"
> >
{% if service.icon %}{{ service.icon | icon | safe }}{% endif %} {{ service.icon | icon | safe }}
</div> </div>
{% endif %}
<h5 class="fw-bold card-title">{{ service.name }}</h5> <h5 class="fw-bold card-title">{{ service.name }}</h5>
<p class="text-muted card-text mb-4"> <p class="text-muted card-text mb-4">
{{ service.long_description }} {{ service.long_description }}
</p> </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 <a
class="btn btn-primary shadow w-100 text-center" class="btn btn-primary shadow w-100 text-center"
href="{{ link.url }}" href="{{ link.url }}"
>{{ link.name }}</a >{{ link.name }}</a
> >
{% endfor %} {% endif %} {% endfor %}
</div> </div>
</div> </div>
</div> </div>