userpage: rework dynamic layout, finally

html/admin.html

@@ -259,7 +259,7 @@
                             <input type="text" class="input ~neutral @low mb-2 mt-4">
                             <p class="support">{{ .strings.templateEnterName }}</p>
                         </label>
-                        <div class="row flex-expand">
+                        <div class="flex flex-row justify-between">
                             <label>
                                 <input type="submit" class="unfocused">
                                 <span class="button ~urge @low center supra submit">{{ .strings.send }}</span>
@@ -881,7 +881,7 @@
                     </div>
                     <div class="flex flex-col md:flex-row gap-3">
                         <div class="card @low dark:~d_neutral col" id="settings-sidebar">
-                            <div class="flex-expand">
+                            <div class="flex flex-row justify-between">
                                 <input type="search" class="field ~neutral @low input settings-section-button justify-between mb-2" id="settings-search" placeholder="{{ .strings.search }}">
                                 <button class="button ~neutral @low center -ml-10 rounded-s-none mb-2 settings-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></button>
                             </div>

html/user.html

@@ -109,10 +109,10 @@
             <div class="card @low dark:~d_neutral mb-4" id="card-user">
                 <span class="heading mb-2"></span>
             </div>
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <div class="columns-1 sm:columns-2 gap-4" id="user-cardlist">
                 {{ if index . "PageMessageEnabled" }}
                     {{ if .PageMessageEnabled }}
-                        <div class="card @low dark:~d_neutral content" id="card-message">
+                        <div class="card @low dark:~d_neutral content break-words" id="card-message">
                             {{ .PageMessageContent }}
                         </div>
                     {{ end }}
@@ -162,7 +162,7 @@
                         <div class="card @low dark:~d_neutral unfocused" id="card-referrals">
                             <span class="heading mb-2">{{ .strings.referrals }}</span>
                             <aside class="aside ~neutral my-4 col user-referrals-description"></aside>
-                            <div class="row flex-expand">
+                            <div class="flex flex-row justify-between">
                                 <div class="user-referrals-info"></div>
                                 <div class="grid my-2">
                                     <button type="button" class="user-referrals-button button ~info dark:~d_info @low" title="Copy">{{ .strings.copyReferral }}<i class="ri-file-copy-line ml-2"></i></button>

ts/user.ts

@@ -637,10 +637,10 @@ document.addEventListener("details-reload", () => {
 
             if (typeof(messageCard) != "undefined" && messageCard != null) {
                 messageCard.innerHTML = messageCard.innerHTML.replace(new RegExp("{username}", "g"), details.username);
-                setBestRowSpan(messageCard, false);
+                // setBestRowSpan(messageCard, false);
                 // contactCard.querySelector(".content").classList.add("h-100");
             } else if (!statusCard.classList.contains("unfocused")) {
-                setBestRowSpan(passwordCard, true);
+                // setBestRowSpan(passwordCard, true);
             }
 
             if (window.referralsEnabled) {
@@ -649,15 +649,69 @@ document.addEventListener("details-reload", () => {
                         if (req.readyState != 4 || req.status != 200) return; 
                         const referral: MyReferral = req.response as MyReferral;
                         referralCard.update(referral);
+                        setCardOrder(messageCard);
                     });
                 } else {
                     referralCard.hide();
+                    setCardOrder(messageCard);
                 }
+            } else {
+                setCardOrder(messageCard);
             }
         }
     });
 });
 
+const setCardOrder = (messageCard: HTMLElement) => {
+    const cards = document.getElementById("user-cardlist");
+    const children = Array.from(cards.children);
+    const idxs = [...Array(cards.childElementCount).keys()]
+    // The message card is the first element and should always be so, so remove it from the list.
+    const hasMessageCard = !(typeof(messageCard) == "undefined" || messageCard == null);
+    if (hasMessageCard) idxs.shift();
+    const perms = generatePermutations(idxs);
+    let minHeight = 999999;
+    let minHeightPerm: [number[], number[]];
+    for (let perm of perms) {
+        let leftHeight = 0;
+        for (let idx of perm[0]) {
+            leftHeight += (cards.children[idx] as HTMLElement).offsetHeight;
+        }
+        if (hasMessageCard) leftHeight += (cards.children[0] as HTMLElement).offsetHeight;
+        let rightHeight = 0;
+        for (let idx of perm[1]) {
+            rightHeight += (cards.children[idx] as HTMLElement).offsetHeight;
+        }
+        let height = Math.max(leftHeight, rightHeight);
+        // console.log("got height", leftHeight, rightHeight, height, "for", perm);
+        if (height < minHeight) {
+            minHeight = height;
+            minHeightPerm = perm;
+        }
+    }
+
+    const gapDiv = () => {
+        const g = document.createElement("div");
+        g.classList.add("my-4");
+        return g;
+    };
+
+    let addValue = hasMessageCard ? 1 : 0;
+    // if (hasMessageCard) cards.appendChild(children[0]);
+    if (hasMessageCard) cards.appendChild(gapDiv());
+    for (let side of minHeightPerm) {
+        for (let i = 0; i < side.length; i++) {
+            // (cards.children[side[i]] as HTMLElement).style.order = (i+addValue).toString();
+            children[side[i]].remove();
+            cards.appendChild(children[side[i]]);
+            cards.appendChild(gapDiv());
+        }
+        // addValue += side.length;
+    }
+
+    console.log("Shortest order:", minHeightPerm);
+};
+
 const login = new Login(window.modals.login as Modal, "/my/", "opaque");
 login.onLogin = () => {
     console.log("Logged in.");
@@ -699,6 +753,24 @@ const computeRealHeight = (el: HTMLElement): number => {
     return total;
 }
 
+const generatePermutations = (xs: number[]): [number[], number[]][] => {
+    const l = xs.length;
+    let out: [number[], number[]][] = [];
+    for (let i = 0; i < (l << 1); i++) {
+        let incl = [];
+        let excl = [];
+        for (let j = 0; j < l; j++) {
+            if (i & (1 << j)) {
+                incl.push(xs[j]);
+            } else {
+                excl.push(xs[j]);
+            }
+        }
+        out.push([incl, excl]);
+    }
+    return out;
+}
+
 login.bindLogout(document.getElementById("logout-button"));
 
 login.login("", "");