hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-22 09:00:10 +00:00
Code Issues Projects Releases Wiki Activity

userpage: adjust message row span depending on length

Browse Source
This commit is contained in:
Harvey Tindall 2023-06-21 13:30:09 +01:00
parent 920161b920
commit 87b0ae6614
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
2 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
html/user.html
View File

@ -74,6 +74,13 @@
<span class="heading mb-2"></span>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
{{ if index . "PageMessageEnabled" }}
{{ if .PageMessageEnabled }}
<div class="card @low dark:~d_neutral content" id="card-message">
{{ .PageMessageContent }}
</div>
{{ end }}
{{ end }}
<div class="card @low dark:~d_neutral unfocused" id="card-status">
<span class="heading mb-2">{{ .strings.expiry }}</span>
<aside class="aside ~warning user-expiry my-4"></aside>
@ -83,13 +90,6 @@
<span class="heading mb-2">{{ .strings.contactMethods }}</span>
<div class="content flex justify-between flex-col h-100"></div>
</div>
{{ if index . "PageMessageEnabled" }}
{{ if .PageMessageEnabled }}
<div class="card @low dark:~d_neutral content" id="card-message">
{{ .PageMessageContent }}
</div>
{{ end }}
{{ end }}
</div>
</div>
<script src="{{ .urlBase }}/js/user.js" type="module"></script>

31
ts/user.ts
View File

@ -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<HTMLElement>;
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<HTMLElement>;
let total = 0;
for (let i = 0; i < children.length; i++) {
total += children[i].offsetHeight;
}
return total;
}
login.bindLogout(document.getElementById("logout-button"));