From 34ddd1d50772aca61c5f84ea2bb02b536306e8ba Mon Sep 17 00:00:00 2001 From: olcxja Date: Thu, 14 May 2026 23:05:54 +0200 Subject: [PATCH] Add test mobile ui --- android/app/src/main/assets/public/index.html | 31 ++-- android/app/src/main/assets/public/main.js | 85 ++++++---- android/app/src/main/assets/public/style.css | 155 +++++++++++++----- electron/assets/icon.png | Bin 14827 -> 14827 bytes icons/icon.png | Bin 14827 -> 14827 bytes webroot/index.html | 31 ++-- webroot/main.js | 85 ++++++---- webroot/style.css | 155 +++++++++++++----- 8 files changed, 354 insertions(+), 188 deletions(-) diff --git a/android/app/src/main/assets/public/index.html b/android/app/src/main/assets/public/index.html index 301c2159..af0c149f 100644 --- a/android/app/src/main/assets/public/index.html +++ b/android/app/src/main/assets/public/index.html @@ -53,7 +53,6 @@ - title.home @@ -74,7 +73,7 @@ - +
- + @@ -103,7 +102,7 @@
- +
@@ -112,7 +111,7 @@ async function start() { updateLoadingStatus("loading.loading"); try { - switchRoomContent("title.splash", splashScreen, false); + switchRoomContent("title.splash", splashScreen, false, "", true); if (host != null) { await updateProtocolAndUrl(host); @@ -121,9 +120,8 @@ { await updateProtocolAndUrl(window.location.hostname); } - sidebarPfp.src = await getAvatarUrl(username); - + showAction("Authenticating...", "startauth"); let res = await Auth(username, password); clearAction("startauth"); @@ -146,12 +144,12 @@ async function refreshDms() { try { - - - showAction("Refreshing dms...", "dmrefresh"); - let res = await fetchEncrypted("user/dm/list", ""); - console.log(res); - clearAction("dmrefresh"); + + + showAction("Refreshing dms...", "dmrefresh"); + let res = await fetchEncrypted("user/dm/list", ""); + console.log(res); + clearAction("dmrefresh"); } catch (e) { clearAction("dmrefresh"); @@ -175,11 +173,10 @@ showBlahNotification("error:chat.add.failed"); } } - - async function createGroup() { - - } + async function createGroup() { + + } \ No newline at end of file diff --git a/android/app/src/main/assets/public/main.js b/android/app/src/main/assets/public/main.js index 9ab59a25..09363000 100644 --- a/android/app/src/main/assets/public/main.js +++ b/android/app/src/main/assets/public/main.js @@ -685,19 +685,20 @@ function showFixedContextMenu(rect, html) { fixedContextMenu.classList.add("show"); } -async function switchRoomContent(title, content, showRoomBar, icon = "") +async function switchRoomContent(title, content, showRoomBar, icon = "", skipMobileSlide = false) { roomContentMain.style.transform = "scale(0.85)"; roomContentMain.style.opacity = "0"; await delay(200); + let backBtnHtml = ``; + let detailsBtnHtml = showRoomBar ? `` : ''; - roomTopBar.innerHTML = `${icon}${processBlah(title)}` + roomTopBar.innerHTML = `${backBtnHtml}${icon}${processBlah(title)}
${detailsBtnHtml}`; roomDetailsBar.style.display = showRoomBar ? "flex" : "none"; - - //content blah parsing + let parser = new DOMParser(); let doc = parser.parseFromString(content, "text/html"); - + let blahTags = doc.getElementsByTagName("blah"); for (let i = 0; i < blahTags.length; i++) { blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); @@ -714,14 +715,18 @@ async function switchRoomContent(title, content, showRoomBar, icon = "") let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0]; placeholders[i].placeholder = processBlah(value); } - } - + roomContentMain.innerHTML = doc.body.innerHTML; - - + roomContentMain.style.transform = ""; roomContentMain.style.opacity = ""; + + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + if (window.innerWidth <= 52 * rem && !skipMobileSlide) { + mainScreen.classList.remove('mobile-details'); + mainScreen.classList.add('mobile-content'); + } } collapseDmsBtn.addEventListener("click", () => { collapseDmsBtn.classList.toggle("collapsed"); @@ -799,32 +804,44 @@ function setActiveSidebarIndicator(element, skipDisabling = false) element.classList.add("active"); } -/* replaced with css -sidebarHomeButton.addEventListener("mouseenter", () => { - sidebarHomeIndicator.classList.add("hover"); +function mobileNavBack() { + if(mainScreen.classList.contains('mobile-details')) { + mainScreen.classList.remove('mobile-details'); + mainScreen.classList.add('mobile-content'); + } else { + mainScreen.classList.remove('mobile-content'); + } +} +function mobileNavDetails() { + mainScreen.classList.add('mobile-details'); +} +let touchStartX = 0; +let touchEndX = 0; +let touchStartY = 0; +let touchEndY = 0; +document.addEventListener('touchstart', e => { + touchStartX = e.changedTouches[0].screenX; + touchStartY = e.changedTouches[0].screenY; }); -sidebarHomeButton.addEventListener("mouseleave", () => { - sidebarHomeIndicator.classList.remove("hover"); +document.addEventListener('touchend', e => { + touchEndX = e.changedTouches[0].screenX; + touchEndY = e.changedTouches[0].screenY; + handleMobileSwipe(); }); +function handleMobileSwipe() { + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + if (window.innerWidth > 52 * rem) return; -sidebarAddButton.addEventListener("mouseenter", () => { - sidebarAddIndicator.classList.add("hover"); -}); -sidebarAddButton.addEventListener("mouseleave", () => { - sidebarAddIndicator.classList.remove("hover"); -}); + let diffX = touchEndX - touchStartX; + let diffY = touchEndY - touchStartY; -sidebarProfileButton.addEventListener("mouseenter", () => { - sidebarProfileIndicator.classList.add("hover"); -}); -sidebarProfileButton.addEventListener("mouseleave", () => { - sidebarProfileIndicator.classList.remove("hover"); -}); - -sidebarInboxButton.addEventListener("mouseenter", () => { - sidebarInboxIndicator.classList.add("hover"); -}); -sidebarInboxButton.addEventListener("mouseleave", () => { - sidebarInboxIndicator.classList.remove("hover"); -}); -*/ \ No newline at end of file + if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 60) { + if (diffX > 0) { + mobileNavBack(); + } else { + if (mainScreen.classList.contains('mobile-content') && roomDetailsBar.style.display !== 'none') { + mobileNavDetails(); + } + } + } +} \ No newline at end of file diff --git a/android/app/src/main/assets/public/style.css b/android/app/src/main/assets/public/style.css index 4205e4e7..10742f6b 100644 --- a/android/app/src/main/assets/public/style.css +++ b/android/app/src/main/assets/public/style.css @@ -13,7 +13,7 @@ --icon-button-height: 3.4rem; --button-height: 2.4rem; --border-width: 0.09rem; - + --big-default: rgb(207 207 207); --big-red: rgb(202 0 0); --big-green: rgb(25 189 0); @@ -53,7 +53,7 @@ main, loading { overflow: hidden; } loading { - justify-content: center; + justify-content: center; align-items: center; width: 100%; } @@ -70,7 +70,6 @@ loading { user-select: none !important; -webkit-user-drag: none !important; } - button, input { border-radius: 0.8rem; background-color: rgba(255, 255, 255, 0.05); @@ -85,8 +84,8 @@ button, input { border: var(--border-width) solid var(--light-border-color); backface-visibility: hidden; - transform: translateZ(0); - will-change: transform; + transform: translateZ(0); + will-change: transform; transform-origin: center center; } input { @@ -150,7 +149,7 @@ button:active, input:active { roomcontent { display: flex; flex-direction: column; - + height: 100%; width: calc(100vw - (var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width)) - 17rem); border-right: var(--border-width) solid var(--light-border-color); @@ -158,7 +157,7 @@ roomcontent { roomcontent2 { display: flex; flex-direction: column; - + height: calc(100% - (var(--button-height) * 1.5)); width: 100%; } @@ -181,27 +180,23 @@ sidebar.second { align-items: center; justify-content: space-between; } - .collapse-text-button { padding-left: calc(var(--button-margin) + 0.2rem); flex-shrink: 0; - flex-grow: 1; + flex-grow: 1; border: none; background-color: transparent; height: 2rem; font-weight: 600; - gap: 0.3rem; + gap: 0.3rem; } - .collapse-text-button .chevron { width: 1.25rem; height: 1.25rem; } - .collapse-text-button.collapsed .chevron { transform: rotate(-90deg); } - .add-action-button { border: none; background-color: transparent; @@ -212,7 +207,6 @@ sidebar.second { justify-content: center; color: rgba(255, 255, 255, 0.5); } - .add-action-button svg { width: 1.25rem; height: 1.25rem; @@ -225,8 +219,6 @@ hr { width: 60%; margin-left: 20%; } - - #notification-container { padding-top: env(safe-area-inset-top); position: fixed; @@ -240,12 +232,10 @@ hr { pointer-events: none; align-items: center; } - .notification { background: rgba(255, 255, 255, 0.015); backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem); - border: var(--border-width) solid var(--light-border-color); border-radius: 0.9rem; @@ -262,43 +252,37 @@ hr { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), - background-color 0.2s ease; + background-color 0.2s ease; } - .notification.show { opacity: 1; transform: translateY(0); } - .notification.info { border-color: var(--big-default); } - .notification.error { border-color: var(--big-red); } - .notification.success { border-color: var(--big-green); } - roomtopbar { height: calc(var(--button-height) * 1.5); - display: flex; flex-direction: row; width: 100%; border-bottom: var(--border-width) solid var(--light-border-color); - + line-height: calc(var(--button-height) * 1.5); font-weight: bold; padding-left: calc(var(--button-margin) * 3); + padding-right: calc(var(--button-margin) * 3); font-size: 1.5rem; } sidebar.second#roomdetailsbar { height: calc(var(--button-height) * 1.5); - display: flex; flex-direction: row; @@ -312,32 +296,24 @@ herotitle { font-weight: bold; font-size: 1.6rem; } - - - - .input-group { text-align: left; display: flex; flex-direction: column; gap: 0.2rem; - width: 90%; max-width: 30rem; } - .input-group label { font-size: 0.75rem; font-weight: 800; margin-left: 0.6rem; margin-bottom: -0.2rem; opacity: 0.4; - letter-spacing: 0.05rem; position: relative; z-index: 1; } - .submit-button { justify-content: center; background-color: var(--text-color); @@ -346,11 +322,9 @@ herotitle { border: none; font-size: 1.05rem; } - .bottom-element { margin-top: auto; } - @media (hover: hover) { sidebarelement:hover indicator:not(.active) { content: ""; @@ -393,7 +367,6 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) { border-radius: 0.8rem; transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem)); } - blah, inherit, .inherit { all: inherit; padding: 0; @@ -404,7 +377,6 @@ blah, inherit, .inherit { space{ margin-left: 0.4rem; } - .context-menu { position: fixed; background: var(--main-bg-color); @@ -416,19 +388,16 @@ space{ gap: 0.2rem; z-index: 2000; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); - opacity: 0; transform: scale(0.95); transform-origin: center left; pointer-events: none; } - .context-menu.show { opacity: 1; transform: scale(1); pointer-events: auto; } - .context-menu button { margin: 0; padding: 0.5rem 1rem; @@ -440,7 +409,107 @@ space{ gap: 0.5rem; font-weight: 600; } - .context-menu button:hover { background-color: rgba(255, 255, 255, 0.08); +} +.mobile-nav-btn { + display: none; + background: transparent; + border: none; + height: 2.4rem; + width: 2.4rem; + padding: 0; + margin: 0; + margin-right: 0.8rem; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: var(--text-color); + cursor: pointer; +} +.mobile-nav-btn:active { + background-color: rgba(255, 255, 255, 0.1); + border-radius: 0.8rem; +} +.mobile-nav-btn.right { + margin-right: 0; + margin-left: 0.8rem; +} +.mobile-nav-btn svg { + width: 1.5rem; + height: 1.5rem; +} +.flex-spacer { + flex-grow: 1; +} +@media (max-width: 52rem) { + .mobile-nav-btn { + display: flex; + } + + main { + position: relative; + width: 100vw; + overflow: hidden; + } + + sidebar, sidebar.second, roomcontent { + position: absolute !important; + height: 100%; + transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); + } + + sidebar { + left: 0; + z-index: 1; + } + + #roomsbar { + left: calc(var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width)); + width: calc(100vw - (var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width))) !important; + min-width: unset !important; + max-width: none !important; + z-index: 1; + } + + roomcontent { + left: 0; + width: 100vw !important; + transform: translateX(100vw); + border-right: none !important; + z-index: 2; + background-color: var(--main-bg-color); + } + + #roomdetailsbar { + left: 0; + width: 100vw !important; + min-width: unset !important; + max-width: none !important; + transform: translateX(100vw); + z-index: 3; + background-color: var(--main-bg-color); + } + + main.mobile-content sidebar, + main.mobile-content #roomsbar { + transform: translateX(-30vw); + } + + main.mobile-content roomcontent { + transform: translateX(0); + } + + main.mobile-details sidebar, + main.mobile-details #roomsbar { + transform: translateX(-60vw); + } + + main.mobile-details roomcontent { + transform: translateX(-30vw); + } + + main.mobile-details #roomdetailsbar { + transform: translateX(0); + } } \ No newline at end of file diff --git a/electron/assets/icon.png b/electron/assets/icon.png index e05914d30ea0022a86eab58f65ddd9efa2a2ea63..d0d33b15f6cf00157a183436290e216ac971b921 100644 GIT binary patch delta 84 zcmaD|{JMBT1G^}z_6#AmnH$^pS_m3i8JJp`7;76CSQ!}9Fn?j69BQe6D#{z@vwL!z Qr825$ly`2* - title.home @@ -74,7 +73,7 @@ - +
- + @@ -103,7 +102,7 @@
- +
@@ -112,7 +111,7 @@ async function start() { updateLoadingStatus("loading.loading"); try { - switchRoomContent("title.splash", splashScreen, false); + switchRoomContent("title.splash", splashScreen, false, "", true); if (host != null) { await updateProtocolAndUrl(host); @@ -121,9 +120,8 @@ { await updateProtocolAndUrl(window.location.hostname); } - sidebarPfp.src = await getAvatarUrl(username); - + showAction("Authenticating...", "startauth"); let res = await Auth(username, password); clearAction("startauth"); @@ -146,12 +144,12 @@ async function refreshDms() { try { - - - showAction("Refreshing dms...", "dmrefresh"); - let res = await fetchEncrypted("user/dm/list", ""); - console.log(res); - clearAction("dmrefresh"); + + + showAction("Refreshing dms...", "dmrefresh"); + let res = await fetchEncrypted("user/dm/list", ""); + console.log(res); + clearAction("dmrefresh"); } catch (e) { clearAction("dmrefresh"); @@ -175,11 +173,10 @@ showBlahNotification("error:chat.add.failed"); } } - - async function createGroup() { - - } + async function createGroup() { + + } \ No newline at end of file diff --git a/webroot/main.js b/webroot/main.js index 9ab59a25..09363000 100644 --- a/webroot/main.js +++ b/webroot/main.js @@ -685,19 +685,20 @@ function showFixedContextMenu(rect, html) { fixedContextMenu.classList.add("show"); } -async function switchRoomContent(title, content, showRoomBar, icon = "") +async function switchRoomContent(title, content, showRoomBar, icon = "", skipMobileSlide = false) { roomContentMain.style.transform = "scale(0.85)"; roomContentMain.style.opacity = "0"; await delay(200); + let backBtnHtml = ``; + let detailsBtnHtml = showRoomBar ? `` : ''; - roomTopBar.innerHTML = `${icon}${processBlah(title)}` + roomTopBar.innerHTML = `${backBtnHtml}${icon}${processBlah(title)}
${detailsBtnHtml}`; roomDetailsBar.style.display = showRoomBar ? "flex" : "none"; - - //content blah parsing + let parser = new DOMParser(); let doc = parser.parseFromString(content, "text/html"); - + let blahTags = doc.getElementsByTagName("blah"); for (let i = 0; i < blahTags.length; i++) { blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); @@ -714,14 +715,18 @@ async function switchRoomContent(title, content, showRoomBar, icon = "") let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0]; placeholders[i].placeholder = processBlah(value); } - } - + roomContentMain.innerHTML = doc.body.innerHTML; - - + roomContentMain.style.transform = ""; roomContentMain.style.opacity = ""; + + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + if (window.innerWidth <= 52 * rem && !skipMobileSlide) { + mainScreen.classList.remove('mobile-details'); + mainScreen.classList.add('mobile-content'); + } } collapseDmsBtn.addEventListener("click", () => { collapseDmsBtn.classList.toggle("collapsed"); @@ -799,32 +804,44 @@ function setActiveSidebarIndicator(element, skipDisabling = false) element.classList.add("active"); } -/* replaced with css -sidebarHomeButton.addEventListener("mouseenter", () => { - sidebarHomeIndicator.classList.add("hover"); +function mobileNavBack() { + if(mainScreen.classList.contains('mobile-details')) { + mainScreen.classList.remove('mobile-details'); + mainScreen.classList.add('mobile-content'); + } else { + mainScreen.classList.remove('mobile-content'); + } +} +function mobileNavDetails() { + mainScreen.classList.add('mobile-details'); +} +let touchStartX = 0; +let touchEndX = 0; +let touchStartY = 0; +let touchEndY = 0; +document.addEventListener('touchstart', e => { + touchStartX = e.changedTouches[0].screenX; + touchStartY = e.changedTouches[0].screenY; }); -sidebarHomeButton.addEventListener("mouseleave", () => { - sidebarHomeIndicator.classList.remove("hover"); +document.addEventListener('touchend', e => { + touchEndX = e.changedTouches[0].screenX; + touchEndY = e.changedTouches[0].screenY; + handleMobileSwipe(); }); +function handleMobileSwipe() { + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + if (window.innerWidth > 52 * rem) return; -sidebarAddButton.addEventListener("mouseenter", () => { - sidebarAddIndicator.classList.add("hover"); -}); -sidebarAddButton.addEventListener("mouseleave", () => { - sidebarAddIndicator.classList.remove("hover"); -}); + let diffX = touchEndX - touchStartX; + let diffY = touchEndY - touchStartY; -sidebarProfileButton.addEventListener("mouseenter", () => { - sidebarProfileIndicator.classList.add("hover"); -}); -sidebarProfileButton.addEventListener("mouseleave", () => { - sidebarProfileIndicator.classList.remove("hover"); -}); - -sidebarInboxButton.addEventListener("mouseenter", () => { - sidebarInboxIndicator.classList.add("hover"); -}); -sidebarInboxButton.addEventListener("mouseleave", () => { - sidebarInboxIndicator.classList.remove("hover"); -}); -*/ \ No newline at end of file + if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 60) { + if (diffX > 0) { + mobileNavBack(); + } else { + if (mainScreen.classList.contains('mobile-content') && roomDetailsBar.style.display !== 'none') { + mobileNavDetails(); + } + } + } +} \ No newline at end of file diff --git a/webroot/style.css b/webroot/style.css index 4205e4e7..10742f6b 100644 --- a/webroot/style.css +++ b/webroot/style.css @@ -13,7 +13,7 @@ --icon-button-height: 3.4rem; --button-height: 2.4rem; --border-width: 0.09rem; - + --big-default: rgb(207 207 207); --big-red: rgb(202 0 0); --big-green: rgb(25 189 0); @@ -53,7 +53,7 @@ main, loading { overflow: hidden; } loading { - justify-content: center; + justify-content: center; align-items: center; width: 100%; } @@ -70,7 +70,6 @@ loading { user-select: none !important; -webkit-user-drag: none !important; } - button, input { border-radius: 0.8rem; background-color: rgba(255, 255, 255, 0.05); @@ -85,8 +84,8 @@ button, input { border: var(--border-width) solid var(--light-border-color); backface-visibility: hidden; - transform: translateZ(0); - will-change: transform; + transform: translateZ(0); + will-change: transform; transform-origin: center center; } input { @@ -150,7 +149,7 @@ button:active, input:active { roomcontent { display: flex; flex-direction: column; - + height: 100%; width: calc(100vw - (var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width)) - 17rem); border-right: var(--border-width) solid var(--light-border-color); @@ -158,7 +157,7 @@ roomcontent { roomcontent2 { display: flex; flex-direction: column; - + height: calc(100% - (var(--button-height) * 1.5)); width: 100%; } @@ -181,27 +180,23 @@ sidebar.second { align-items: center; justify-content: space-between; } - .collapse-text-button { padding-left: calc(var(--button-margin) + 0.2rem); flex-shrink: 0; - flex-grow: 1; + flex-grow: 1; border: none; background-color: transparent; height: 2rem; font-weight: 600; - gap: 0.3rem; + gap: 0.3rem; } - .collapse-text-button .chevron { width: 1.25rem; height: 1.25rem; } - .collapse-text-button.collapsed .chevron { transform: rotate(-90deg); } - .add-action-button { border: none; background-color: transparent; @@ -212,7 +207,6 @@ sidebar.second { justify-content: center; color: rgba(255, 255, 255, 0.5); } - .add-action-button svg { width: 1.25rem; height: 1.25rem; @@ -225,8 +219,6 @@ hr { width: 60%; margin-left: 20%; } - - #notification-container { padding-top: env(safe-area-inset-top); position: fixed; @@ -240,12 +232,10 @@ hr { pointer-events: none; align-items: center; } - .notification { background: rgba(255, 255, 255, 0.015); backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem); - border: var(--border-width) solid var(--light-border-color); border-radius: 0.9rem; @@ -262,43 +252,37 @@ hr { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), - background-color 0.2s ease; + background-color 0.2s ease; } - .notification.show { opacity: 1; transform: translateY(0); } - .notification.info { border-color: var(--big-default); } - .notification.error { border-color: var(--big-red); } - .notification.success { border-color: var(--big-green); } - roomtopbar { height: calc(var(--button-height) * 1.5); - display: flex; flex-direction: row; width: 100%; border-bottom: var(--border-width) solid var(--light-border-color); - + line-height: calc(var(--button-height) * 1.5); font-weight: bold; padding-left: calc(var(--button-margin) * 3); + padding-right: calc(var(--button-margin) * 3); font-size: 1.5rem; } sidebar.second#roomdetailsbar { height: calc(var(--button-height) * 1.5); - display: flex; flex-direction: row; @@ -312,32 +296,24 @@ herotitle { font-weight: bold; font-size: 1.6rem; } - - - - .input-group { text-align: left; display: flex; flex-direction: column; gap: 0.2rem; - width: 90%; max-width: 30rem; } - .input-group label { font-size: 0.75rem; font-weight: 800; margin-left: 0.6rem; margin-bottom: -0.2rem; opacity: 0.4; - letter-spacing: 0.05rem; position: relative; z-index: 1; } - .submit-button { justify-content: center; background-color: var(--text-color); @@ -346,11 +322,9 @@ herotitle { border: none; font-size: 1.05rem; } - .bottom-element { margin-top: auto; } - @media (hover: hover) { sidebarelement:hover indicator:not(.active) { content: ""; @@ -393,7 +367,6 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) { border-radius: 0.8rem; transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem)); } - blah, inherit, .inherit { all: inherit; padding: 0; @@ -404,7 +377,6 @@ blah, inherit, .inherit { space{ margin-left: 0.4rem; } - .context-menu { position: fixed; background: var(--main-bg-color); @@ -416,19 +388,16 @@ space{ gap: 0.2rem; z-index: 2000; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); - opacity: 0; transform: scale(0.95); transform-origin: center left; pointer-events: none; } - .context-menu.show { opacity: 1; transform: scale(1); pointer-events: auto; } - .context-menu button { margin: 0; padding: 0.5rem 1rem; @@ -440,7 +409,107 @@ space{ gap: 0.5rem; font-weight: 600; } - .context-menu button:hover { background-color: rgba(255, 255, 255, 0.08); +} +.mobile-nav-btn { + display: none; + background: transparent; + border: none; + height: 2.4rem; + width: 2.4rem; + padding: 0; + margin: 0; + margin-right: 0.8rem; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: var(--text-color); + cursor: pointer; +} +.mobile-nav-btn:active { + background-color: rgba(255, 255, 255, 0.1); + border-radius: 0.8rem; +} +.mobile-nav-btn.right { + margin-right: 0; + margin-left: 0.8rem; +} +.mobile-nav-btn svg { + width: 1.5rem; + height: 1.5rem; +} +.flex-spacer { + flex-grow: 1; +} +@media (max-width: 52rem) { + .mobile-nav-btn { + display: flex; + } + + main { + position: relative; + width: 100vw; + overflow: hidden; + } + + sidebar, sidebar.second, roomcontent { + position: absolute !important; + height: 100%; + transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); + } + + sidebar { + left: 0; + z-index: 1; + } + + #roomsbar { + left: calc(var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width)); + width: calc(100vw - (var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width))) !important; + min-width: unset !important; + max-width: none !important; + z-index: 1; + } + + roomcontent { + left: 0; + width: 100vw !important; + transform: translateX(100vw); + border-right: none !important; + z-index: 2; + background-color: var(--main-bg-color); + } + + #roomdetailsbar { + left: 0; + width: 100vw !important; + min-width: unset !important; + max-width: none !important; + transform: translateX(100vw); + z-index: 3; + background-color: var(--main-bg-color); + } + + main.mobile-content sidebar, + main.mobile-content #roomsbar { + transform: translateX(-30vw); + } + + main.mobile-content roomcontent { + transform: translateX(0); + } + + main.mobile-details sidebar, + main.mobile-details #roomsbar { + transform: translateX(-60vw); + } + + main.mobile-details roomcontent { + transform: translateX(-30vw); + } + + main.mobile-details #roomdetailsbar { + transform: translateX(0); + } } \ No newline at end of file