diff --git a/html/user.html b/html/user.html
index f249f37..84e7741 100644
--- a/html/user.html
+++ b/html/user.html
@@ -74,6 +74,13 @@
+ {{ if index . "PageMessageEnabled" }}
+ {{ if .PageMessageEnabled }}
+
+ {{ .PageMessageContent }}
+
+ {{ end }}
+ {{ end }}
{{ .strings.expiry }}
@@ -83,13 +90,6 @@
{{ .strings.contactMethods }}
- {{ if index . "PageMessageEnabled" }}
- {{ if .PageMessageEnabled }}
-
- {{ .PageMessageContent }}
-
- {{ end }}
- {{ end }}
diff --git a/ts/user.ts b/ts/user.ts
index 4e8b548..609d1f9 100644
--- a/ts/user.ts
+++ b/ts/user.ts
@@ -48,6 +48,7 @@ window.modals = {} as Modals;
window.notifications = new notificationBox(document.getElementById('notification-box') as HTMLDivElement, 5);
+const grid = document.querySelector(".grid");
var rootCard = document.getElementById("card-user");
var contactCard = document.getElementById("card-contact");
var statusCard = document.getElementById("card-status");
@@ -391,13 +392,13 @@ document.addEventListener("details-reload", () => {
expiryCard.expiry = details.expiry;
+ let messageCard = document.getElementById("card-message");
if (details.accounts_admin) {
- let messageCard = document.getElementById("card-message")
if (typeof(messageCard) == "undefined" || messageCard == null) {
messageCard = document.createElement("div");
messageCard.classList.add("card", "@low", "dark:~d_neutral", "content");
messageCard.id = "card-message";
- contactCard.parentElement.appendChild(messageCard);
+ contactCard.parentElement.insertBefore(messageCard, contactCard);
}
if (!messageCard.textContent) {
messageCard.innerHTML = `
@@ -406,6 +407,23 @@ document.addEventListener("details-reload", () => {
`;
}
}
+
+ if (typeof(messageCard) != "undefined" && messageCard != null) {
+ let largestNonMessageCardHeight = 0;
+ const cards = grid.querySelectorAll(".card") as NodeListOf;
+ for (let i = 0; i < cards.length; i++) {
+ if (cards[i].id == "card-message") continue;
+ if (computeRealHeight(cards[i]) > largestNonMessageCardHeight) {
+ largestNonMessageCardHeight = computeRealHeight(cards[i]);
+ }
+ }
+
+
+ let rowSpan = Math.ceil(computeRealHeight(messageCard) / largestNonMessageCardHeight);
+
+ if (rowSpan > 0)
+ messageCard.style.gridRow = `span ${rowSpan}`;
+ }
}
});
});
@@ -416,7 +434,14 @@ login.onLogin = () => {
document.dispatchEvent(new CustomEvent("details-reload"));
};
-
+const computeRealHeight = (el: HTMLElement): number => {
+ let children = el.children as HTMLCollectionOf;
+ let total = 0;
+ for (let i = 0; i < children.length; i++) {
+ total += children[i].offsetHeight;
+ }
+ return total;
+}
login.bindLogout(document.getElementById("logout-button"));