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:
parent
b47782b5e6
commit
a664611f2d
GPG key ID:
ECBCC9082395383F
3 changed files with 92 additions and 9 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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">▼</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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue