From be7910e901ec6652a6e5d6cc1996977b13081b61 Mon Sep 17 00:00:00 2001 From: Sunil Mohan Adapa Date: Mon, 9 Dec 2024 09:04:54 -0800 Subject: [PATCH] ui: Fix flash of notifications popdown during page load - 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 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 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 Reviewed-by: Veiko Aasa --- plinth/templates/notifications.html | 2 +- static/themes/default/css/main.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plinth/templates/notifications.html b/plinth/templates/notifications.html index 7a26e8b13..5b9a2c738 100644 --- a/plinth/templates/notifications.html +++ b/plinth/templates/notifications.html @@ -8,7 +8,7 @@ {% load static %} {% if notifications %} -
+
    {% for note in notifications %}
  • diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css index cc9f58bc4..c0e751cff 100644 --- a/static/themes/default/css/main.css +++ b/static/themes/default/css/main.css @@ -495,7 +495,7 @@ footer { } /* No-JS fallbacks for collapsible content */ -.no-js .collapse { +.no-js .collapse:not(.no-no-js) { display: block; }