BreizhHardware/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2026-01-18 16:47:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

admin: scroll current tab in nav to center

Browse Source 
for #456, ensures you can see and press both the next and previous tabs
    even if you can't scroll for some reason.
This commit is contained in:
Harvey Tindall
2025-12-19 13:11:37 +00:00
parent e4e9369d54
commit 2a41c5a393
3 changed files with 47 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
html/admin.html
View File

@@ -561,7 +561,7 @@
<label>
<input type="submit" class="unfocused">
<span class="button ~urge @low full-width center supra submit">{{ .strings.submit }}</span>
</label>
</label>"
</form>
</div>
<div id="notification-box"></div>
@@ -581,11 +581,11 @@
</div>
</div>
<header>
<div class="flex flex-row overflow-x-auto items-center gap-2">
<span id="button-tab-invites" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.invites }}</span>
<span id="button-tab-accounts" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.accounts }}</span>
<span id="button-tab-activity" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.activity }}</span>
<span id="button-tab-settings" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.settings }}</span>
<div class="flex flex-row overflow-x-auto items-center gap-2 scroll-smooth">
<button type="button" id="button-tab-invites" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.invites }}</button>
<button type="button" id="button-tab-accounts" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.accounts }}</button>
<button type="button" id="button-tab-activity" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.activity }}</button>
<button type="button" id="button-tab-settings" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.settings }}</button>
</div>
</header>
<div id="tab-invites" class="flex flex-col gap-4">

28
ts/admin.ts
View File

@@ -101,6 +101,34 @@ window.availableProfiles = window.availableProfiles || [];
}
})();
// Make the navbar horizontally scrollable by dragging (with mouse)
// doesn't work incredibly well so disabled.
/*[...document.getElementsByClassName("horizontally-scrollable")].forEach((c: HTMLElement) => {
c.classList.add("cursor-pointer");
let down = false;
let startX: number, scrollLeft: number;
c.addEventListener("mousedown", (ev: MouseEvent) => {
console.log("down");
down = true;
c.classList.add("active");
startX = ev.pageX - c.offsetLeft;
scrollLeft = c.scrollLeft;
});
const leave = () => {
console.log("up");
down = false;
c.classList.remove("active");
};
c.addEventListener("mouseleave", leave);
c.addEventListener("mouseup", leave);
c.addEventListener("mousemove", (ev: MouseEvent) => {
if (!down) return;
const x = ev.pageX - c.offsetLeft;
const walk = x - startX;
c.scrollLeft = scrollLeft - walk;
});
});*/
var inviteCreator = new createInvite();
var accounts = new accountsList();

15
ts/modules/tabs.ts
View File

@@ -33,13 +33,20 @@ export class Tabs implements Tabs {
let tab: Tab = {
page: null,
tabEl: document.getElementById("tab-" + tabID) as HTMLDivElement,
buttonEl: document.getElementById("button-tab-" + tabID) as HTMLSpanElement,
buttonEl: document.getElementById("button-tab-" + tabID) as HTMLButtonElement,
preFunc: preFunc,
postFunc: postFunc,
};
if (this._baseOffset == -1) {
this._baseOffset = tab.buttonEl.offsetLeft;
}
const order = Array.from(this.tabs.keys());
let scrollTo: () => number = (): number => tab.buttonEl.offsetLeft - this._baseOffset;
if (order.length > 0) {
scrollTo = (): number =>
tab.buttonEl.offsetLeft - (tab.buttonEl.parentElement.offsetWidth - tab.buttonEl.offsetWidth) / 2;
}
tab.page = {
name: tabID,
title: document.title /*FIXME: Get actual names from translations*/,
@@ -47,7 +54,11 @@ export class Tabs implements Tabs {
show: () => {
tab.buttonEl.classList.add("active", "~urge");
tab.tabEl.classList.remove("unfocused");
tab.buttonEl.parentElement.scrollTo(tab.buttonEl.offsetLeft - this._baseOffset, 0);
tab.buttonEl.parentElement.scrollTo({
left: scrollTo(),
top: 0,
behavior: "auto",
});
document.dispatchEvent(new CustomEvent("tab-change", { detail: tabID }));
return true;
},