FreedomBox/plinth/templates/clients.html
Sunil Mohan Adapa d02154e2f0
clients: Use SVG icons when showing external links
Tests:

- Icons works in light/dark mode.

- All icons appear as expected.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
2026-03-19 19:12:28 -04:00

141 lines
5.1 KiB
HTML

{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}
{% load i18n %}
{% load plinth_extras %}
{% load static %}
{% if clients %}
<div id="clients" class="collapse table-responsive">
<table class="table">
{% with clients|clients_of_type:'web' as web_clients %}
{% for client in web_clients %}
<tr>
{% if forloop.counter == 1 %}
<th rowspan="{{ web_clients|length }}">{% trans "Web" %}</th>
{% endif %}
{% for platform in client.platforms %}
{% if platform.type == 'web' %}
<td>{{ client.name }}</td>
<td>
<a target="_blank" rel="noopener noreferrer"
class="btn btn-default" role="button"
{% if not enabled %} disabled="disabled"
{% else %} href="{{ platform.url }}"
{% endif %}>
{% trans "Launch" %}
<span class="fa fa-external-link"></span>
</a>
</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
{% endwith %}
{% with clients|clients_of_type:'desktop' as desktop_clients %}
{% for client in desktop_clients %}
<tr>
{% if forloop.counter == 1 %}
<th rowspan="{{ desktop_clients|length }}">{% trans "Desktop" %}</th>
{% endif %}
<td>{{ client.name }}</td>
<td>
{% for platform in client.platforms %}
{% if platform.type == 'download' %}
{% if platform.os == 'gnu-linux' or platform.os == 'macos' or platform.os == 'windows' %}
<a class="btn btn-default" href="{{ platform.url }}" role="button">
<span>
{% icon platform.os %}
{% if platform.os == 'gnu-linux' %}
{% trans 'GNU/Linux' %}
{% elif platform.os == 'windows' %}
{% trans 'Windows' %}
{% elif platform.os == 'macos' %}
{% trans 'macOS' %}
{% endif %}
</span>
</a>
{% endif %}
{% endif %}
{% endfor %}
</td>
</tr>
{% endfor %}
{% endwith %}
{% with clients|clients_of_type:'mobile' as mobile_clients %}
{% for client in mobile_clients %}
<tr>
{% if forloop.counter == 1 %}
<th rowspan="{{ mobile_clients|length }}">{% trans "Mobile" %}</th>
{% endif %}
<td>{{ client.name }}</td>
<td>
{% for platform in client.platforms %}
{% if platform.type == 'download' and platform.os == 'android' %}
<a class="btn btn-default" href="{{ platform.url }}" role="button">
<span>
{% icon platform.os %}
{% trans 'Android APK' %}
</span>
</a>
{% endif %}
{% if platform.type == 'store' and platform.os == 'android' or platform.os == 'ios' %}
<a class="btn btn-default" href="{{ platform.url }}" role="button">
<span>
{% icon platform.store_name %}
{% if platform.store_name == 'google-play' %}
{% trans 'Play Store' %}
{% elif platform.store_name == 'f-droid' %}
{% trans 'F-Droid' %}
{% elif platform.store_name == 'app-store' %}
{% trans 'App Store' %}
{% endif %}
</span>
</a>
{% endif %}
{% endfor %}
</td>
</tr>
{% endfor %}
{% endwith %}
{% with clients|clients_of_type:'package' as package_clients %}
{% for client in package_clients %}
<tr>
{% if forloop.counter == 1 %}
<th rowspan="{{ package_clients|length }}">{% trans "Package" %}</th>
{% endif %}
<td>{{ client.name }}</td>
<td>
{% for platform in client.platforms %}
{% if platform.type == 'package' %}
<span class="client-package">
{% if platform.format == 'deb' %}
{% icon 'debian' %}
{{ platform.name }}
{% endif %}
{% if platform.format == 'brew' %}
{% icon 'homebrew' %}
{{ platform.name }}
{% endif %}
{% if platform.format == 'rpm' %}
{% icon 'fedora' %}
{{ platform.name }}
{% endif %}
</span>
{% endif %}
{% endfor %}
</td>
</tr>
{% endfor %}
{% endwith %}
</table>
</div>
{% endif %}