mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-09-07 21:10:11 +00:00
userpage: rework dynamic layout, finally
This commit is contained in:
parent
b50d66d265
commit
d56d45a404
@ -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>
|
||||
|
@ -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>
|
||||
|
76
ts/user.ts
76
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("", "");
|
||||
|
Loading…
Reference in New Issue
Block a user