From bf0a57609d3792863c1f20a9d2d4b5bd7b0c7576 Mon Sep 17 00:00:00 2001 From: metamuffin Date: Sun, 25 Jun 2023 00:31:43 +0200 Subject: refactor + animate sidebar --- client-web/source/index.ts | 4 ++-- client-web/source/menu.ts | 8 ++++---- client-web/source/preferences/ui.ts | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) (limited to 'client-web/source') diff --git a/client-web/source/index.ts b/client-web/source/index.ts index 6d99215..859329a 100644 --- a/client-web/source/index.ts +++ b/client-web/source/index.ts @@ -84,8 +84,8 @@ export async function main() { setup_keybinds(r) r.on_ready = () => { const sud = enav({ class: "side-ui" }) - const center = ediv({ class: "main" }, r.element, info_br()) - document.body.append(center, sud, control_bar(r, sud)) + const center = ediv({ class: "main" }, r.element, info_br(), sud) + document.body.append(center, control_bar(r, sud)) } if (globalThis.navigator.serviceWorker) init_serviceworker() diff --git a/client-web/source/menu.ts b/client-web/source/menu.ts index 041dcdf..3d023e2 100644 --- a/client-web/source/menu.ts +++ b/client-web/source/menu.ts @@ -52,13 +52,13 @@ export function side_ui(container: HTMLElement, content: HTMLElement, label: str const checkbox = einput("checkbox", { onchange: () => { if (checkbox.checked) { - container.classList.add("animate-in") + content.classList.add("animate-in") container.appendChild(content) } else { - container.classList.remove("animate-in") - container.classList.add("animate-out") + content.classList.remove("animate-in") + content.classList.add("animate-out") setTimeout(() => { // TODO breaks if ui is being enabled while timeout is active - container.classList.remove("animate-out") + content.classList.remove("animate-out") container.removeChild(content) }, 400) } diff --git a/client-web/source/preferences/ui.ts b/client-web/source/preferences/ui.ts index 1326797..c3fae0f 100644 --- a/client-web/source/preferences/ui.ts +++ b/client-web/source/preferences/ui.ts @@ -94,5 +94,5 @@ export function ui_preferences(): HTMLElement { const table = document.createElement("table") table.append(...rows) - return ediv({ class: "prefs-overlay" }, eh2("Settings"), notification_perm, ebr(), table, ebr(), reset) + return ediv({ class: "preferences" }, eh2("Settings"), notification_perm, ebr(), table, ebr(), reset) } -- cgit v1.2.3-70-g09d2