mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-01-28 08:03:36 +00:00
be7910e901
- Notifications dropdown is shown briefly before page load. After the page load, it disappears. This is quite annoying and happens due to the following reason. - We add .no-js class to <html> tag and later remove using Javascript. - We load most of our Javascirpt using 'defer' attribute leading display of layout of content before Javascript is loaded. - We also wait for DOMContentLoaded event to fire before removing the .no-js class on <html> element. - Solve the problem by adding special class to notifications dropdown to ensure that it is not shown even when Javascript is not available. - There might be a better fix to the problem. Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org> Reviewed-by: Veiko Aasa <veiko17@disroot.org>
67 lines
2.3 KiB
HTML
67 lines
2.3 KiB
HTML
{% comment %}
|
|
# SPDX-License-Identifier: AGPL-3.0-or-later
|
|
{% endcomment %}
|
|
|
|
{# Template to display notifications under the navbar #}
|
|
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% if notifications %}
|
|
<div class="notifications collapse no-no-js">
|
|
<ul>
|
|
{% for note in notifications %}
|
|
<li class="notification notification-{{ note.severity }}">
|
|
{% if note.data.app_name %}
|
|
<div class="app-name">
|
|
{% if note.data.app_icon %}
|
|
<div class="app-icon fa {{ note.data.app_icon }}"></div>
|
|
{% elif note.data.app_icon_filename %}
|
|
{% if note.app_id %}
|
|
<img src="{% static note.app_id %}/icons/{{ note.data.app_icon_filename }}.svg"
|
|
alt="{{ note.data.app_name }}"
|
|
class="notification-icon" />
|
|
{% else %}
|
|
<img src="{% static 'theme/icons/' %}{{ note.data.app_icon_filename }}.svg"
|
|
alt="{{ note.data.app_name }}"
|
|
class="notification-icon" />
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{{ note.data.app_name }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if note.body %}
|
|
{{ note.body.content.decode|safe }}
|
|
{% else %}
|
|
<div class="notification-title">{{ note.title }}</div>
|
|
|
|
{% if note.message %}
|
|
<p>{{ note.message }}</p>
|
|
{% endif %}
|
|
|
|
{% if note.actions %}
|
|
<div class="btn-toolbar">
|
|
{% for action in note.actions %}
|
|
{% if action.type == "dismiss" %}
|
|
<a href="{% url 'notification_dismiss' id=note.id %}?next={{ request.path|iriencode }}"
|
|
role="button" class="btn btn-default">
|
|
{% trans "Dismiss" %}
|
|
</a>
|
|
{% else %}
|
|
<a href="{% url action.url %}" role="button"
|
|
class="btn btn-{{ action.class|default:'default' }}">
|
|
{{ action.text }}
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|