feat: add support for forked service indicators
All checks were successful
Build and Deploy Static Site / build (push) Successful in 57s

Enhanced the UI to distinguish forked services by adding a new `.fork` class with corresponding SVG styles. Updated HTML template to include links and icons for both homemade and forked services, improving service metadata visibility and user navigation.
This commit is contained in:
Kumi 2024-09-18 08:59:17 +02:00
parent 7bb761a13e
commit 0774b6760d
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 21 additions and 8 deletions

View file

@ -123,14 +123,16 @@ h5 {
color: #604c2e; color: #604c2e;
} }
.homemade { .homemade,
.fork {
right: -0.5rem; right: -0.5rem;
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
position: absolute; position: absolute;
} }
.homemade svg { .homemade svg,
.fork svg {
fill: var(--bs-primary-bg-subtle) !important; fill: var(--bs-primary-bg-subtle) !important;
} }

View file

@ -50,12 +50,23 @@
</div> </div>
{% endif %} {{ service.name }}{% if service.tiny_description %} - {{ {% endif %} {{ service.name }}{% if service.tiny_description %} - {{
service.tiny_description }}{% endif %} {% if service.homemade %} service.tiny_description }}{% endif %} {% if service.homemade %}
<a href="{{ service.homemade }}">
<div <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" 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" title="Made by Private.coffee"
> >
{{ "coffee" | icon | safe }} {{ "coffee" | icon | safe }}
</div> </div>
</a>
{% endif %} {% if service.fork %}
<a href="{{ service.fork }}">
<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 fork"
title="Runs on a fork of the original software"
>
{{ "code-fork" | icon | safe }}
</div>
</a>
{% endif %} {% endif %}
</summary> </summary>
<div class="accordion-body"> <div class="accordion-body">