From b43fa5aa8201ecfd516fefed97b80342f2b10742 Mon Sep 17 00:00:00 2001 From: olcxja Date: Fri, 15 May 2026 00:22:52 +0200 Subject: [PATCH] Improve mobile ui --- android/app/src/main/assets/public/index.html | 4 ++ android/app/src/main/assets/public/main.js | 34 +++++++++++---- android/app/src/main/assets/public/screens.js | 7 ++- android/app/src/main/assets/public/style.css | 41 ++++++++++++++---- electron/assets/icon.png | Bin 14827 -> 14827 bytes icons/icon.png | Bin 14827 -> 14827 bytes webroot/index.html | 4 ++ webroot/main.js | 34 +++++++++++---- webroot/screens.js | 7 ++- webroot/style.css | 41 ++++++++++++++---- 10 files changed, 136 insertions(+), 36 deletions(-) diff --git a/android/app/src/main/assets/public/index.html b/android/app/src/main/assets/public/index.html index af0c149f..9c74b543 100644 --- a/android/app/src/main/assets/public/index.html +++ b/android/app/src/main/assets/public/index.html @@ -99,6 +99,10 @@
diff --git a/android/app/src/main/assets/public/main.js b/android/app/src/main/assets/public/main.js index 09363000..a2384f8f 100644 --- a/android/app/src/main/assets/public/main.js +++ b/android/app/src/main/assets/public/main.js @@ -689,9 +689,22 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob { roomContentMain.style.transform = "scale(0.85)"; roomContentMain.style.opacity = "0"; - await delay(200); - let backBtnHtml = ``; - let detailsBtnHtml = showRoomBar ? `` : ''; + + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + if (window.innerWidth <= 52 * rem && !skipMobileSlide) { + if (title != "title.splash") //do not show splash on mobile + { + mainScreen.classList.remove('mobile-details'); + mainScreen.classList.add('mobile-content'); + } + } + else + { + await delay(200); + } + + + let detailsBtnHtml = showRoomBar ? detailsBtn : ''; roomTopBar.innerHTML = `${backBtnHtml}${icon}${processBlah(title)}
${detailsBtnHtml}`; roomDetailsBar.style.display = showRoomBar ? "flex" : "none"; @@ -722,11 +735,7 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob 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"); @@ -762,6 +771,15 @@ document.addEventListener("click", (e) => { setActiveSidebarIndicator(indicatorBeforeFixedMenu); } } + + if (mainScreen && mainScreen.classList.contains('mobile-details')) { + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + if (window.innerWidth <= 52 * rem) { + if (!roomDetailsBar.contains(e.target) && !e.target.closest('.mobile-nav-btn.right')) { + mobileNavBack(); + } + } + } }); diff --git a/android/app/src/main/assets/public/screens.js b/android/app/src/main/assets/public/screens.js index ed6c908c..33991c9d 100644 --- a/android/app/src/main/assets/public/screens.js +++ b/android/app/src/main/assets/public/screens.js @@ -84,4 +84,9 @@ var addSpaceMenu = ` title.create.space -`; \ No newline at end of file +`; + + +//elements +var detailsBtn = ``; +var backBtnHtml = ``; \ 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 10742f6b..a8c50f5e 100644 --- a/android/app/src/main/assets/public/style.css +++ b/android/app/src/main/assets/public/style.css @@ -272,6 +272,8 @@ roomtopbar { display: flex; flex-direction: row; + align-items: center; + width: 100%; border-bottom: var(--border-width) solid var(--light-border-color); @@ -282,11 +284,10 @@ roomtopbar { font-size: 1.5rem; } sidebar.second#roomdetailsbar { - height: calc(var(--button-height) * 1.5); + height: 100%; display: flex; - flex-direction: row; - - border-bottom: var(--border-width) solid var(--light-border-color); + flex-direction: column; + border-left: var(--border-width) solid var(--light-border-color); } fullcontainer { width: 100%; @@ -456,7 +457,7 @@ space{ sidebar, sidebar.second, roomcontent { position: absolute !important; height: 100%; - transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); + transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); } sidebar { @@ -482,12 +483,13 @@ space{ } #roomdetailsbar { - left: 0; - width: 100vw !important; + left: auto !important; + right: 0; + width: 90vw !important; min-width: unset !important; max-width: none !important; - transform: translateX(100vw); - z-index: 3; + transform: translateX(100vw); + z-index: 10; background-color: var(--main-bg-color); } @@ -512,4 +514,25 @@ space{ main.mobile-details #roomdetailsbar { transform: translateX(0); } + + roomcontent::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 10; + cursor: pointer; + opacity: 0; + pointer-events: none; + + transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1); + } + + main.mobile-details roomcontent::after { + opacity: 1; + pointer-events: auto; + } } \ No newline at end of file diff --git a/electron/assets/icon.png b/electron/assets/icon.png index d0d33b15f6cf00157a183436290e216ac971b921..086d5a9db913bd6e17b0e3a1717effd0a1b00fd9 100644 GIT binary patch delta 84 zcmaD|{JMBT1G|`*LQbZ_t&Qz_Ed-6MjEt;|jkFC6tPBjUpSHL&In+`CRdm_3hJ?v& RmddE2ADb8MpS;V`5CF`&93B7w delta 84 zcmaD|{JMBT1G^}z_6#AmnH$^pS_m3i8JJp`7;76CSQ!}9Fn?j69BQe6D#{z@vwL!z Qr825$ly`2*
diff --git a/webroot/main.js b/webroot/main.js index 09363000..a2384f8f 100644 --- a/webroot/main.js +++ b/webroot/main.js @@ -689,9 +689,22 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob { roomContentMain.style.transform = "scale(0.85)"; roomContentMain.style.opacity = "0"; - await delay(200); - let backBtnHtml = ``; - let detailsBtnHtml = showRoomBar ? `` : ''; + + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + if (window.innerWidth <= 52 * rem && !skipMobileSlide) { + if (title != "title.splash") //do not show splash on mobile + { + mainScreen.classList.remove('mobile-details'); + mainScreen.classList.add('mobile-content'); + } + } + else + { + await delay(200); + } + + + let detailsBtnHtml = showRoomBar ? detailsBtn : ''; roomTopBar.innerHTML = `${backBtnHtml}${icon}${processBlah(title)}
${detailsBtnHtml}`; roomDetailsBar.style.display = showRoomBar ? "flex" : "none"; @@ -722,11 +735,7 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob 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"); @@ -762,6 +771,15 @@ document.addEventListener("click", (e) => { setActiveSidebarIndicator(indicatorBeforeFixedMenu); } } + + if (mainScreen && mainScreen.classList.contains('mobile-details')) { + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + if (window.innerWidth <= 52 * rem) { + if (!roomDetailsBar.contains(e.target) && !e.target.closest('.mobile-nav-btn.right')) { + mobileNavBack(); + } + } + } }); diff --git a/webroot/screens.js b/webroot/screens.js index ed6c908c..33991c9d 100644 --- a/webroot/screens.js +++ b/webroot/screens.js @@ -84,4 +84,9 @@ var addSpaceMenu = ` title.create.space -`; \ No newline at end of file +`; + + +//elements +var detailsBtn = ``; +var backBtnHtml = ``; \ No newline at end of file diff --git a/webroot/style.css b/webroot/style.css index 10742f6b..a8c50f5e 100644 --- a/webroot/style.css +++ b/webroot/style.css @@ -272,6 +272,8 @@ roomtopbar { display: flex; flex-direction: row; + align-items: center; + width: 100%; border-bottom: var(--border-width) solid var(--light-border-color); @@ -282,11 +284,10 @@ roomtopbar { font-size: 1.5rem; } sidebar.second#roomdetailsbar { - height: calc(var(--button-height) * 1.5); + height: 100%; display: flex; - flex-direction: row; - - border-bottom: var(--border-width) solid var(--light-border-color); + flex-direction: column; + border-left: var(--border-width) solid var(--light-border-color); } fullcontainer { width: 100%; @@ -456,7 +457,7 @@ space{ sidebar, sidebar.second, roomcontent { position: absolute !important; height: 100%; - transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); + transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); } sidebar { @@ -482,12 +483,13 @@ space{ } #roomdetailsbar { - left: 0; - width: 100vw !important; + left: auto !important; + right: 0; + width: 90vw !important; min-width: unset !important; max-width: none !important; - transform: translateX(100vw); - z-index: 3; + transform: translateX(100vw); + z-index: 10; background-color: var(--main-bg-color); } @@ -512,4 +514,25 @@ space{ main.mobile-details #roomdetailsbar { transform: translateX(0); } + + roomcontent::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 10; + cursor: pointer; + opacity: 0; + pointer-events: none; + + transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1); + } + + main.mobile-details roomcontent::after { + opacity: 1; + pointer-events: auto; + } } \ No newline at end of file