mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-04-01 09:30:29 +00:00
6defd3e8ce
- Use 'currentColor' as color in SVG images to make them adapt to light/dark
modes.
- Introduce a new {% icon %} template tag to read SVG files, attach attributes,
remove <?xml> header, and make all IDs inside unique.
- Use the {% icon %} template tag to inline SVGs in app page, home page,
app pages, and notifications.
- Relax the content security policy to allow inline styling with 'style='
attribute.
Tests:
- Allow the icons looks as before in the following pages: home page, apps page,
app specific page, and in notifications.
- Icons that are fully dark become white when theme is switched to dark mode.
- All the inlined SVG icons have a prefixed unique ID.
- W3C HTML validator shows no new errors.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
73 lines
2.0 KiB
HTML
73 lines
2.0 KiB
HTML
{% comment %}
|
|
# SPDX-License-Identifier: AGPL-3.0-or-later
|
|
{% endcomment %}
|
|
|
|
{% load bootstrap %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load plinth_extras %}
|
|
|
|
<header class="app-header {% if not app_info.icon_filename %} app-header-single-column {% endif %}">
|
|
|
|
{% if app_info.icon_filename %}
|
|
|
|
{% if app_info.app_id %}
|
|
{% icon app_info.app_id|add:'/icons/'|add:app_info.icon_filename|add:'.svg' %}
|
|
{% else %}
|
|
{% icon app_info.icon_filename %}
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
|
|
<section class="app-description" >
|
|
<section class='app-titles'>
|
|
{% block pagetitle %}
|
|
<div>
|
|
{% if setup %}
|
|
<h2>{% trans "Installation" %}: {{ app_info.name }}</h2>
|
|
{% else %}
|
|
<h2>{{ app_info.name }}</h2>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
{% if app_enable_disable_form %}
|
|
<form class="form form-app-enable-disable" method="post">
|
|
{% csrf_token %}
|
|
|
|
{{ app_enable_disable_form|bootstrap }}
|
|
|
|
<button name="app_enable_disable_button" type="submit"
|
|
class="btn toggle-button {{ is_enabled|yesno:'toggle-button--toggled,' }}">
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% if app_info.tags %}
|
|
<div class="app-tags d-flex align-items-center flex-wrap">
|
|
{% for tag in app_info.tags %}
|
|
{% if not forloop.first %}•{% endif %}
|
|
<a href="{{ active_section_url }}?tag={{ tag|urlencode }}"
|
|
class="btn btn-default rounded-pill tag">
|
|
{% trans tag %}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% block description %}
|
|
{% for paragraph in app_info.description %}
|
|
<p>{{ paragraph|safe }}</p>
|
|
{% endfor %}
|
|
{% endblock %}
|
|
|
|
{% if app_info.manual_page %}
|
|
<p class="manual-page">
|
|
<a href="{% url 'help:manual-page' lang='-' page=app_info.manual_page %}">
|
|
{% trans 'Learn more...' %}
|
|
</a>
|
|
</p>
|
|
{% endif %}
|
|
</section>
|
|
</header>
|