From 19c3dbb42d79a44bd3a7b1d6129ce10f4a4ddec1 Mon Sep 17 00:00:00 2001 From: olcxja Date: Wed, 24 Jun 2026 00:11:37 +0200 Subject: [PATCH] fix aspect ratio and cropping on small screens --- android/app/src/main/assets/public/main.js | 17 ++--- android/app/src/main/assets/public/style.css | 68 +++++++++++--------- webroot/main.js | 17 ++--- webroot/style.css | 68 +++++++++++--------- 4 files changed, 90 insertions(+), 80 deletions(-) diff --git a/android/app/src/main/assets/public/main.js b/android/app/src/main/assets/public/main.js index aefe4545..2a0cadcd 100644 --- a/android/app/src/main/assets/public/main.js +++ b/android/app/src/main/assets/public/main.js @@ -1452,14 +1452,6 @@ function logout() { window.location.href = "login/index.html"; } -function gotoSettings() { - if (fixedContextMenu.classList.contains("show")) { - fixedContextMenu.classList.remove("show"); - if (typeof clearContextMenuStyles === "function") clearContextMenuStyles(); - setActiveSidebarIndicator(currentMainIndicator); - } -} - let isProfileOpen = false; async function openProfile(accountId) { @@ -2863,7 +2855,7 @@ async function gotoSettings(tab = 'account') { function switchSettingsTab(tabName) { setActiveRoombarItem('tab-settings-' + tabName); if (tabName === 'account') { - switchRoomContent("title.account", accountSettings, false); + switchRoomContent("title.account", accountSettings, false, null, true); //skip mobile slide } else if (tabName === 'profile') { switchRoomContent("title.profile", profileSettings, false); setTimeout(async () => { @@ -3037,8 +3029,13 @@ function initCropper() { let targetWidth = cropperType === 'avatar' ? 512 : 494; let targetHeight = cropperType === 'avatar' ? targetWidth : 200; + container.style.height = 'auto'; + container.style.maxHeight = 'calc(85vh - 16rem)'; + container.style.aspectRatio = `${targetWidth} / ${targetHeight}`; + + // Force layout recalculation + void container.offsetHeight; let containerWidth = container.clientWidth || 300; - container.style.height = (containerWidth * (targetHeight / targetWidth)) + 'px'; let imgWidth = cropperImageObj.width; let imgHeight = cropperImageObj.height; diff --git a/android/app/src/main/assets/public/style.css b/android/app/src/main/assets/public/style.css index fde60f9b..364964bb 100644 --- a/android/app/src/main/assets/public/style.css +++ b/android/app/src/main/assets/public/style.css @@ -813,15 +813,15 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) { } .profile-popup-content { position: relative; - width: 31em; + width: 90vw; + max-width: 31rem; height: 85vh; - max-height: 44em; - font-size: min(1rem, calc(90vw / 31)); + max-height: 44rem; background: var(--main-bg-color); border: var(--border-width) solid var(--light-border-color); - border-radius: 0.9em; + border-radius: 0.9rem; overflow: hidden; - box-shadow: 0 1em 3em rgba(0, 0, 0, 0.5); + box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5); opacity: 0; transform: scale(0.6); transition: all 0.2s ease; @@ -835,16 +835,16 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) { } .profile-popup-close-btn { position: absolute; - top: 1em; - right: 1em; + top: 1rem; + right: 1rem; z-index: 10; background: rgba(0, 0, 0, 0.4); - backdrop-filter: blur(0.25em); - -webkit-backdrop-filter: blur(0.25em); + backdrop-filter: blur(0.25rem); + -webkit-backdrop-filter: blur(0.25rem); border: none; - width: 2.5em; - height: 2.5em; - border-radius: 0.8em; + width: 2.5rem; + height: 2.5rem; + border-radius: 0.8rem; display: flex; justify-content: center; align-items: center; @@ -853,8 +853,8 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) { cursor: pointer; } .profile-popup-close-btn svg { - width: 1.5em; - height: 1.5em; + width: 1.5rem; + height: 1.5rem; } .profile-popup-close-btn:hover { background: rgba(255, 255, 255, 0.2); @@ -875,55 +875,63 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) { } .profile-avatar-container { position: relative; - margin-top: -3.75em; - margin-left: 2em; - width: 7.5em; - height: 7.5em; + margin-top: calc(-3.75 / 31 * 100%); + margin-left: calc(2 / 31 * 100%); + width: calc(7.5 / 31 * 100%); + flex-shrink: 0; +} +.profile-avatar-container::before { + content: ""; + display: block; + padding-top: 100%; } .profile-avatar { + position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; - border-radius: 0.8em; + border-radius: 0.8rem; border: var(--border-width) solid rgba(255, 255, 255, 0.2); object-fit: cover; background: var(--main-bg-color); } .profile-info { - padding: 1em 2em 2em 2em; + padding: 1rem 2rem 2rem 2rem; display: flex; flex-direction: column; - gap: 1em; + gap: 1rem; } .profile-name { - font-size: 2em; + font-size: 2rem; font-weight: 800; line-height: 1.1; - margin-bottom: 0.2em; + margin-bottom: 0.2rem; word-break: break-word; } .profile-id-host { - font-size: 1em; + font-size: 1rem; opacity: 0.6; font-weight: 600; } .profile-bio { - font-size: 1.05em; + font-size: 1.05rem; line-height: 1.5; white-space: pre-wrap; background: rgba(255, 255, 255, 0.03); - padding: 1em; - border-radius: 0.8em; + padding: 1rem; + border-radius: 0.8rem; border: var(--border-width) solid var(--light-border-color); word-break: break-word; } .profile-action-btn { align-self: flex-start; - padding: 0.6em 1.5em; + padding: 0.6rem 1.5rem; font-weight: 700; background: var(--text-color); color: var(--main-bg-color); - border-radius: 0.8em; - margin-top: 0.5em; + border-radius: 0.8rem; + margin-top: 0.5rem; margin-left: 0; height: auto; } diff --git a/webroot/main.js b/webroot/main.js index aefe4545..2a0cadcd 100644 --- a/webroot/main.js +++ b/webroot/main.js @@ -1452,14 +1452,6 @@ function logout() { window.location.href = "login/index.html"; } -function gotoSettings() { - if (fixedContextMenu.classList.contains("show")) { - fixedContextMenu.classList.remove("show"); - if (typeof clearContextMenuStyles === "function") clearContextMenuStyles(); - setActiveSidebarIndicator(currentMainIndicator); - } -} - let isProfileOpen = false; async function openProfile(accountId) { @@ -2863,7 +2855,7 @@ async function gotoSettings(tab = 'account') { function switchSettingsTab(tabName) { setActiveRoombarItem('tab-settings-' + tabName); if (tabName === 'account') { - switchRoomContent("title.account", accountSettings, false); + switchRoomContent("title.account", accountSettings, false, null, true); //skip mobile slide } else if (tabName === 'profile') { switchRoomContent("title.profile", profileSettings, false); setTimeout(async () => { @@ -3037,8 +3029,13 @@ function initCropper() { let targetWidth = cropperType === 'avatar' ? 512 : 494; let targetHeight = cropperType === 'avatar' ? targetWidth : 200; + container.style.height = 'auto'; + container.style.maxHeight = 'calc(85vh - 16rem)'; + container.style.aspectRatio = `${targetWidth} / ${targetHeight}`; + + // Force layout recalculation + void container.offsetHeight; let containerWidth = container.clientWidth || 300; - container.style.height = (containerWidth * (targetHeight / targetWidth)) + 'px'; let imgWidth = cropperImageObj.width; let imgHeight = cropperImageObj.height; diff --git a/webroot/style.css b/webroot/style.css index fde60f9b..364964bb 100644 --- a/webroot/style.css +++ b/webroot/style.css @@ -813,15 +813,15 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) { } .profile-popup-content { position: relative; - width: 31em; + width: 90vw; + max-width: 31rem; height: 85vh; - max-height: 44em; - font-size: min(1rem, calc(90vw / 31)); + max-height: 44rem; background: var(--main-bg-color); border: var(--border-width) solid var(--light-border-color); - border-radius: 0.9em; + border-radius: 0.9rem; overflow: hidden; - box-shadow: 0 1em 3em rgba(0, 0, 0, 0.5); + box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5); opacity: 0; transform: scale(0.6); transition: all 0.2s ease; @@ -835,16 +835,16 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) { } .profile-popup-close-btn { position: absolute; - top: 1em; - right: 1em; + top: 1rem; + right: 1rem; z-index: 10; background: rgba(0, 0, 0, 0.4); - backdrop-filter: blur(0.25em); - -webkit-backdrop-filter: blur(0.25em); + backdrop-filter: blur(0.25rem); + -webkit-backdrop-filter: blur(0.25rem); border: none; - width: 2.5em; - height: 2.5em; - border-radius: 0.8em; + width: 2.5rem; + height: 2.5rem; + border-radius: 0.8rem; display: flex; justify-content: center; align-items: center; @@ -853,8 +853,8 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) { cursor: pointer; } .profile-popup-close-btn svg { - width: 1.5em; - height: 1.5em; + width: 1.5rem; + height: 1.5rem; } .profile-popup-close-btn:hover { background: rgba(255, 255, 255, 0.2); @@ -875,55 +875,63 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) { } .profile-avatar-container { position: relative; - margin-top: -3.75em; - margin-left: 2em; - width: 7.5em; - height: 7.5em; + margin-top: calc(-3.75 / 31 * 100%); + margin-left: calc(2 / 31 * 100%); + width: calc(7.5 / 31 * 100%); + flex-shrink: 0; +} +.profile-avatar-container::before { + content: ""; + display: block; + padding-top: 100%; } .profile-avatar { + position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; - border-radius: 0.8em; + border-radius: 0.8rem; border: var(--border-width) solid rgba(255, 255, 255, 0.2); object-fit: cover; background: var(--main-bg-color); } .profile-info { - padding: 1em 2em 2em 2em; + padding: 1rem 2rem 2rem 2rem; display: flex; flex-direction: column; - gap: 1em; + gap: 1rem; } .profile-name { - font-size: 2em; + font-size: 2rem; font-weight: 800; line-height: 1.1; - margin-bottom: 0.2em; + margin-bottom: 0.2rem; word-break: break-word; } .profile-id-host { - font-size: 1em; + font-size: 1rem; opacity: 0.6; font-weight: 600; } .profile-bio { - font-size: 1.05em; + font-size: 1.05rem; line-height: 1.5; white-space: pre-wrap; background: rgba(255, 255, 255, 0.03); - padding: 1em; - border-radius: 0.8em; + padding: 1rem; + border-radius: 0.8rem; border: var(--border-width) solid var(--light-border-color); word-break: break-word; } .profile-action-btn { align-self: flex-start; - padding: 0.6em 1.5em; + padding: 0.6rem 1.5rem; font-weight: 700; background: var(--text-color); color: var(--main-bg-color); - border-radius: 0.8em; - margin-top: 0.5em; + border-radius: 0.8rem; + margin-top: 0.5rem; margin-left: 0; height: auto; }