add calendar loading indicator, prepolulate door status image to prevent layout shift

master
Dirk Heilig 2024-01-19 11:37:21 +01:00
parent 9be03bc727
commit d22cc2e58a
4 changed files with 5 additions and 2 deletions

View File

@ -1,6 +1,8 @@
<div class="side-calendar"> <div class="side-calendar">
<h2>Termine</h2> <h2>Termine</h2>
<ul id="calendar"></ul> <ul id="calendar">
<li class="loading">Loading...</li>
</ul>

View File

@ -2,7 +2,7 @@
<h2>Doorstatus</h2> <h2>Doorstatus</h2>
<p><img src="" id="ds-img"></p> <p><img src="/img/trans.png" id="ds-img"></p>
<p>Aktueller Status: <span id="ds-status"></span></p> <p>Aktueller Status: <span id="ds-status"></span></p>
<p>Status vom: <span id="ds-date"></span></p> <p>Status vom: <span id="ds-date"></span></p>
<p>Temperatur Clubraum: <span id="ds-temp"></span></p> <p>Temperatur Clubraum: <span id="ds-temp"></span></p>

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 B

View File

@ -52,6 +52,7 @@ document.addEventListener("DOMContentLoaded", function () {
li.attr("title", item.description); li.attr("title", item.description);
li.appendTo(box); li.appendTo(box);
} }
document.querySelector("#calendar .loading").remove();
$(".location", box).click(function () { $(".location", box).click(function () {
navigator.clipboard.writeText($(this).attr("data-loc")); navigator.clipboard.writeText($(this).attr("data-loc"));
}); });