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>
28 lines
818 B
HTML
28 lines
818 B
HTML
{% comment %}
|
|
# SPDX-License-Identifier: AGPL-3.0-or-later
|
|
{% endcomment %}
|
|
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load plinth_extras %}
|
|
|
|
<div class="card">
|
|
<a href="{{ item.url }}">
|
|
<div class="card-icon">
|
|
{% if 'fa-' in item.icon %}
|
|
<span class="fa {{ item.icon }}"></span>
|
|
{% else %}
|
|
{% if item.app_id %}
|
|
{% icon item.app_id|add:'/icons/'|add:item.icon|add:'.svg' class='card-icon' %}
|
|
{% else %}
|
|
{% icon item.icon class='card-icon' %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
<div class="card-title">{{ item.name }}</div>
|
|
<div class="card-tags">
|
|
{% for tag in item.tags|slice:":3" %}<span class="tag">{% trans tag %}</span>{% if not forloop.last %}<span class="tag-separator"></span>{% endif %}{% endfor %}
|
|
</div>
|
|
</a>
|
|
</div>
|