FreedomBox/plinth/templates/internal-zone.html
Sunil Mohan Adapa 62dad9336b
ui: Use Bootstrap 5 styling for all alerts
- Ensure that .sr-only is replaced with newer classes.

- Ensure that icons are present for all alerts.

- Use flex-box for display of icons on the left center of the alert.

- .close has been renamed to .btn-close.

- × is no longer required for close buttons.

Tests:

- Visually verify all the changes by triggering them with code changes.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
2024-12-12 12:38:01 +02:00

42 lines
1.4 KiB
HTML

{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}
{% load i18n %}
{% block internal_zone_warning %}
{% for component in firewall %}
{% if not component.is_external %}
<div class="alert alert-info d-flex align-items-center" role="alert">
<div class="me-2">
<span class="fa fa-info-circle" aria-hidden="true"></span>
<span class="visually-hidden">{% trans "Info:" %}</span>
</div>
<div>
<div>
{% blocktrans trimmed with service_name=component.name %}
<em>{{ service_name }}</em> is available only on internal networks
or when the client is connected to {{ box_name }} through VPN.
{% endblocktrans %}
</div>
<div>
{% with interfaces=component.get_internal_interfaces %}
{% if not interfaces %}
{% blocktrans trimmed %}
Currently there are no network interfaces configured as
internal.
{% endblocktrans %}
{% else %}
{% blocktrans trimmed with interface_list=interfaces|join:", " %}
Currently the following network interfaces are configured as
internal: {{ interface_list }}
{% endblocktrans %}
{% endif %}
{% endwith %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% endblock %}