sugary/LarpixClient
1
0
Fork 0
forked from olcxjas-softworks/LarpixClient
Code Pull requests Activity

Add test mobile ui

Browse source
This commit is contained in:
olcxja 2026-05-14 23:05:54 +02:00
commit 34ddd1d507
8 changed files with 356 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

31
android/app/src/main/assets/public/index.html
View file

@ -53,7 +53,6 @@
</button> </button>
</sidebarelement> </sidebarelement>
</sidebar> </sidebar>
<sidebar class="second" id="roomsbar"> <sidebar class="second" id="roomsbar">
<roomtopbar> <roomtopbar>
<blah>title.home</blah> <blah>title.home</blah>
@ -74,7 +73,7 @@
</svg> </svg>
</button> </button>
</div> </div>
<div class="sidebar-section-header"> <div class="sidebar-section-header">
<button class="collapse-text-button" id="collapse-groups"> <button class="collapse-text-button" id="collapse-groups">
<span><blah>title.groups</blah></span> <span><blah>title.groups</blah></span>
@ -92,7 +91,7 @@
</button> </button>
</div> </div>
</sidebar> </sidebar>
<roomcontent> <roomcontent>
<roomtopbar> <roomtopbar>
</roomtopbar> </roomtopbar>
@ -103,7 +102,7 @@
</sidebar> </sidebar>
</main> </main>
<div id="fixed-context-menu" class="context-menu"> <div id="fixed-context-menu" class="context-menu">
</div> </div>
</body> </body>
</html> </html>
@ -112,7 +111,7 @@
async function start() { async function start() {
updateLoadingStatus("loading.loading"); updateLoadingStatus("loading.loading");
try { try {
switchRoomContent("title.splash", splashScreen, false); switchRoomContent("title.splash", splashScreen, false, "", true);
if (host != null) if (host != null)
{ {
await updateProtocolAndUrl(host); await updateProtocolAndUrl(host);
@ -121,9 +120,8 @@
{ {
await updateProtocolAndUrl(window.location.hostname); await updateProtocolAndUrl(window.location.hostname);
} }
sidebarPfp.src = await getAvatarUrl(username); sidebarPfp.src = await getAvatarUrl(username);
showAction("Authenticating...", "startauth"); showAction("Authenticating...", "startauth");
let res = await Auth(username, password); let res = await Auth(username, password);
clearAction("startauth"); clearAction("startauth");
@ -146,12 +144,12 @@
async function refreshDms() { async function refreshDms() {
try { try {
showAction("Refreshing dms...", "dmrefresh"); showAction("Refreshing dms...", "dmrefresh");
let res = await fetchEncrypted("user/dm/list", ""); let res = await fetchEncrypted("user/dm/list", "");
console.log(res); console.log(res);
clearAction("dmrefresh"); clearAction("dmrefresh");
} }
catch (e) { catch (e) {
clearAction("dmrefresh"); clearAction("dmrefresh");
@ -175,11 +173,10 @@
showBlahNotification("error:chat.add.failed"); showBlahNotification("error:chat.add.failed");
} }
} }
async function createGroup() {
}
async function createGroup() {
}
</script> </script>
<script src="main.js"></script> <script src="main.js"></script>
<script src="userscript.js"></script> <script src="userscript.js"></script>

85
android/app/src/main/assets/public/main.js
View file

@ -685,19 +685,20 @@ function showFixedContextMenu(rect, html) {
fixedContextMenu.classList.add("show"); 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.transform = "scale(0.85)";
roomContentMain.style.opacity = "0"; roomContentMain.style.opacity = "0";
await delay(200); await delay(200);
let backBtnHtml = `<button class="mobile-nav-btn" onclick="mobileNavBack()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></button>`;
let detailsBtnHtml = showRoomBar ? `<button class="mobile-nav-btn right" onclick="mobileNavDetails()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>` : '';
roomTopBar.innerHTML = `${icon}<space></space><inherit>${processBlah(title)}</inherit>` roomTopBar.innerHTML = `${backBtnHtml}${icon}<space></space><inherit>${processBlah(title)}</inherit><div class="flex-spacer"></div>${detailsBtnHtml}`;
roomDetailsBar.style.display = showRoomBar ? "flex" : "none"; roomDetailsBar.style.display = showRoomBar ? "flex" : "none";
//content blah parsing
let parser = new DOMParser(); let parser = new DOMParser();
let doc = parser.parseFromString(content, "text/html"); let doc = parser.parseFromString(content, "text/html");
let blahTags = doc.getElementsByTagName("blah"); let blahTags = doc.getElementsByTagName("blah");
for (let i = 0; i < blahTags.length; i++) { for (let i = 0; i < blahTags.length; i++) {
blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); 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]; let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0];
placeholders[i].placeholder = processBlah(value); placeholders[i].placeholder = processBlah(value);
} }
} }
roomContentMain.innerHTML = doc.body.innerHTML; roomContentMain.innerHTML = doc.body.innerHTML;
roomContentMain.style.transform = ""; roomContentMain.style.transform = "";
roomContentMain.style.opacity = ""; 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.addEventListener("click", () => {
collapseDmsBtn.classList.toggle("collapsed"); collapseDmsBtn.classList.toggle("collapsed");
@ -799,32 +804,44 @@ function setActiveSidebarIndicator(element, skipDisabling = false)
element.classList.add("active"); element.classList.add("active");
} }
/* replaced with css function mobileNavBack() {
sidebarHomeButton.addEventListener("mouseenter", () => { if(mainScreen.classList.contains('mobile-details')) {
sidebarHomeIndicator.classList.add("hover"); 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", () => { document.addEventListener('touchend', e => {
sidebarHomeIndicator.classList.remove("hover"); 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", () => { let diffX = touchEndX - touchStartX;
sidebarAddIndicator.classList.add("hover"); let diffY = touchEndY - touchStartY;
});
sidebarAddButton.addEventListener("mouseleave", () => {
sidebarAddIndicator.classList.remove("hover");
});
sidebarProfileButton.addEventListener("mouseenter", () => { if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 60) {
sidebarProfileIndicator.classList.add("hover"); if (diffX > 0) {
}); mobileNavBack();
sidebarProfileButton.addEventListener("mouseleave", () => { } else {
sidebarProfileIndicator.classList.remove("hover"); if (mainScreen.classList.contains('mobile-content') && roomDetailsBar.style.display !== 'none') {
}); mobileNavDetails();
}
sidebarInboxButton.addEventListener("mouseenter", () => { }
sidebarInboxIndicator.classList.add("hover"); }
}); }
sidebarInboxButton.addEventListener("mouseleave", () => {
sidebarInboxIndicator.classList.remove("hover");
});
*/

155
android/app/src/main/assets/public/style.css
View file

@ -13,7 +13,7 @@
--icon-button-height: 3.4rem; --icon-button-height: 3.4rem;
--button-height: 2.4rem; --button-height: 2.4rem;
--border-width: 0.09rem; --border-width: 0.09rem;
--big-default: rgb(207 207 207); --big-default: rgb(207 207 207);
--big-red: rgb(202 0 0); --big-red: rgb(202 0 0);
--big-green: rgb(25 189 0); --big-green: rgb(25 189 0);
@ -53,7 +53,7 @@ main, loading {
overflow: hidden; overflow: hidden;
} }
loading { loading {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
} }
@ -70,7 +70,6 @@ loading {
user-select: none !important; user-select: none !important;
-webkit-user-drag: none !important; -webkit-user-drag: none !important;
} }
button, input { button, input {
border-radius: 0.8rem; border-radius: 0.8rem;
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
@ -85,8 +84,8 @@ button, input {
border: var(--border-width) solid var(--light-border-color); border: var(--border-width) solid var(--light-border-color);
backface-visibility: hidden; backface-visibility: hidden;
transform: translateZ(0); transform: translateZ(0);
will-change: transform; will-change: transform;
transform-origin: center center; transform-origin: center center;
} }
input { input {
@ -150,7 +149,7 @@ button:active, input:active {
roomcontent { roomcontent {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: calc(100vw - (var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width)) - 17rem); 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); border-right: var(--border-width) solid var(--light-border-color);
@ -158,7 +157,7 @@ roomcontent {
roomcontent2 { roomcontent2 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100% - (var(--button-height) * 1.5)); height: calc(100% - (var(--button-height) * 1.5));
width: 100%; width: 100%;
} }
@ -181,27 +180,23 @@ sidebar.second {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.collapse-text-button { .collapse-text-button {
padding-left: calc(var(--button-margin) + 0.2rem); padding-left: calc(var(--button-margin) + 0.2rem);
flex-shrink: 0; flex-shrink: 0;
flex-grow: 1; flex-grow: 1;
border: none; border: none;
background-color: transparent; background-color: transparent;
height: 2rem; height: 2rem;
font-weight: 600; font-weight: 600;
gap: 0.3rem; gap: 0.3rem;
} }
.collapse-text-button .chevron { .collapse-text-button .chevron {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
} }
.collapse-text-button.collapsed .chevron { .collapse-text-button.collapsed .chevron {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.add-action-button { .add-action-button {
border: none; border: none;
background-color: transparent; background-color: transparent;
@ -212,7 +207,6 @@ sidebar.second {
justify-content: center; justify-content: center;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
} }
.add-action-button svg { .add-action-button svg {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
@ -225,8 +219,6 @@ hr {
width: 60%; width: 60%;
margin-left: 20%; margin-left: 20%;
} }
#notification-container { #notification-container {
padding-top: env(safe-area-inset-top); padding-top: env(safe-area-inset-top);
position: fixed; position: fixed;
@ -240,12 +232,10 @@ hr {
pointer-events: none; pointer-events: none;
align-items: center; align-items: center;
} }
.notification { .notification {
background: rgba(255, 255, 255, 0.015); background: rgba(255, 255, 255, 0.015);
backdrop-filter: blur(1.2rem); backdrop-filter: blur(1.2rem);
-webkit-backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem);
border: var(--border-width) solid var(--light-border-color); border: var(--border-width) solid var(--light-border-color);
border-radius: 0.9rem; border-radius: 0.9rem;
@ -262,43 +252,37 @@ hr {
transition: transition:
opacity 0.3s ease, opacity 0.3s ease,
transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 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 { .notification.show {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
.notification.info { .notification.info {
border-color: var(--big-default); border-color: var(--big-default);
} }
.notification.error { .notification.error {
border-color: var(--big-red); border-color: var(--big-red);
} }
.notification.success { .notification.success {
border-color: var(--big-green); border-color: var(--big-green);
} }
roomtopbar { roomtopbar {
height: calc(var(--button-height) * 1.5); height: calc(var(--button-height) * 1.5);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
border-bottom: var(--border-width) solid var(--light-border-color); border-bottom: var(--border-width) solid var(--light-border-color);
line-height: calc(var(--button-height) * 1.5); line-height: calc(var(--button-height) * 1.5);
font-weight: bold; font-weight: bold;
padding-left: calc(var(--button-margin) * 3); padding-left: calc(var(--button-margin) * 3);
padding-right: calc(var(--button-margin) * 3);
font-size: 1.5rem; font-size: 1.5rem;
} }
sidebar.second#roomdetailsbar { sidebar.second#roomdetailsbar {
height: calc(var(--button-height) * 1.5); height: calc(var(--button-height) * 1.5);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -312,32 +296,24 @@ herotitle {
font-weight: bold; font-weight: bold;
font-size: 1.6rem; font-size: 1.6rem;
} }
.input-group { .input-group {
text-align: left; text-align: left;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.2rem; gap: 0.2rem;
width: 90%; width: 90%;
max-width: 30rem; max-width: 30rem;
} }
.input-group label { .input-group label {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 800; font-weight: 800;
margin-left: 0.6rem; margin-left: 0.6rem;
margin-bottom: -0.2rem; margin-bottom: -0.2rem;
opacity: 0.4; opacity: 0.4;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.submit-button { .submit-button {
justify-content: center; justify-content: center;
background-color: var(--text-color); background-color: var(--text-color);
@ -346,11 +322,9 @@ herotitle {
border: none; border: none;
font-size: 1.05rem; font-size: 1.05rem;
} }
.bottom-element { .bottom-element {
margin-top: auto; margin-top: auto;
} }
@media (hover: hover) { @media (hover: hover) {
sidebarelement:hover indicator:not(.active) { sidebarelement:hover indicator:not(.active) {
content: ""; content: "";
@ -393,7 +367,6 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) {
border-radius: 0.8rem; border-radius: 0.8rem;
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem)); transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
} }
blah, inherit, .inherit { blah, inherit, .inherit {
all: inherit; all: inherit;
padding: 0; padding: 0;
@ -404,7 +377,6 @@ blah, inherit, .inherit {
space{ space{
margin-left: 0.4rem; margin-left: 0.4rem;
} }
.context-menu { .context-menu {
position: fixed; position: fixed;
background: var(--main-bg-color); background: var(--main-bg-color);
@ -416,19 +388,16 @@ space{
gap: 0.2rem; gap: 0.2rem;
z-index: 2000; z-index: 2000;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
opacity: 0; opacity: 0;
transform: scale(0.95); transform: scale(0.95);
transform-origin: center left; transform-origin: center left;
pointer-events: none; pointer-events: none;
} }
.context-menu.show { .context-menu.show {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
pointer-events: auto; pointer-events: auto;
} }
.context-menu button { .context-menu button {
margin: 0; margin: 0;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
@ -440,7 +409,107 @@ space{
gap: 0.5rem; gap: 0.5rem;
font-weight: 600; font-weight: 600;
} }
.context-menu button:hover { .context-menu button:hover {
background-color: rgba(255, 255, 255, 0.08); 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);
}
} }

BIN
electron/assets/icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

BIN
icons/icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

31
webroot/index.html
View file

@ -53,7 +53,6 @@
</button> </button>
</sidebarelement> </sidebarelement>
</sidebar> </sidebar>
<sidebar class="second" id="roomsbar"> <sidebar class="second" id="roomsbar">
<roomtopbar> <roomtopbar>
<blah>title.home</blah> <blah>title.home</blah>
@ -74,7 +73,7 @@
</svg> </svg>
</button> </button>
</div> </div>
<div class="sidebar-section-header"> <div class="sidebar-section-header">
<button class="collapse-text-button" id="collapse-groups"> <button class="collapse-text-button" id="collapse-groups">
<span><blah>title.groups</blah></span> <span><blah>title.groups</blah></span>
@ -92,7 +91,7 @@
</button> </button>
</div> </div>
</sidebar> </sidebar>
<roomcontent> <roomcontent>
<roomtopbar> <roomtopbar>
</roomtopbar> </roomtopbar>
@ -103,7 +102,7 @@
</sidebar> </sidebar>
</main> </main>
<div id="fixed-context-menu" class="context-menu"> <div id="fixed-context-menu" class="context-menu">
</div> </div>
</body> </body>
</html> </html>
@ -112,7 +111,7 @@
async function start() { async function start() {
updateLoadingStatus("loading.loading"); updateLoadingStatus("loading.loading");
try { try {
switchRoomContent("title.splash", splashScreen, false); switchRoomContent("title.splash", splashScreen, false, "", true);
if (host != null) if (host != null)
{ {
await updateProtocolAndUrl(host); await updateProtocolAndUrl(host);
@ -121,9 +120,8 @@
{ {
await updateProtocolAndUrl(window.location.hostname); await updateProtocolAndUrl(window.location.hostname);
} }
sidebarPfp.src = await getAvatarUrl(username); sidebarPfp.src = await getAvatarUrl(username);
showAction("Authenticating...", "startauth"); showAction("Authenticating...", "startauth");
let res = await Auth(username, password); let res = await Auth(username, password);
clearAction("startauth"); clearAction("startauth");
@ -146,12 +144,12 @@
async function refreshDms() { async function refreshDms() {
try { try {
showAction("Refreshing dms...", "dmrefresh"); showAction("Refreshing dms...", "dmrefresh");
let res = await fetchEncrypted("user/dm/list", ""); let res = await fetchEncrypted("user/dm/list", "");
console.log(res); console.log(res);
clearAction("dmrefresh"); clearAction("dmrefresh");
} }
catch (e) { catch (e) {
clearAction("dmrefresh"); clearAction("dmrefresh");
@ -175,11 +173,10 @@
showBlahNotification("error:chat.add.failed"); showBlahNotification("error:chat.add.failed");
} }
} }
async function createGroup() {
}
async function createGroup() {
}
</script> </script>
<script src="main.js"></script> <script src="main.js"></script>
<script src="userscript.js"></script> <script src="userscript.js"></script>

85
webroot/main.js
View file

@ -685,19 +685,20 @@ function showFixedContextMenu(rect, html) {
fixedContextMenu.classList.add("show"); 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.transform = "scale(0.85)";
roomContentMain.style.opacity = "0"; roomContentMain.style.opacity = "0";
await delay(200); await delay(200);
let backBtnHtml = `<button class="mobile-nav-btn" onclick="mobileNavBack()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></button>`;
let detailsBtnHtml = showRoomBar ? `<button class="mobile-nav-btn right" onclick="mobileNavDetails()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>` : '';
roomTopBar.innerHTML = `${icon}<space></space><inherit>${processBlah(title)}</inherit>` roomTopBar.innerHTML = `${backBtnHtml}${icon}<space></space><inherit>${processBlah(title)}</inherit><div class="flex-spacer"></div>${detailsBtnHtml}`;
roomDetailsBar.style.display = showRoomBar ? "flex" : "none"; roomDetailsBar.style.display = showRoomBar ? "flex" : "none";
//content blah parsing
let parser = new DOMParser(); let parser = new DOMParser();
let doc = parser.parseFromString(content, "text/html"); let doc = parser.parseFromString(content, "text/html");
let blahTags = doc.getElementsByTagName("blah"); let blahTags = doc.getElementsByTagName("blah");
for (let i = 0; i < blahTags.length; i++) { for (let i = 0; i < blahTags.length; i++) {
blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); 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]; let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0];
placeholders[i].placeholder = processBlah(value); placeholders[i].placeholder = processBlah(value);
} }
} }
roomContentMain.innerHTML = doc.body.innerHTML; roomContentMain.innerHTML = doc.body.innerHTML;
roomContentMain.style.transform = ""; roomContentMain.style.transform = "";
roomContentMain.style.opacity = ""; 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.addEventListener("click", () => {
collapseDmsBtn.classList.toggle("collapsed"); collapseDmsBtn.classList.toggle("collapsed");
@ -799,32 +804,44 @@ function setActiveSidebarIndicator(element, skipDisabling = false)
element.classList.add("active"); element.classList.add("active");
} }
/* replaced with css function mobileNavBack() {
sidebarHomeButton.addEventListener("mouseenter", () => { if(mainScreen.classList.contains('mobile-details')) {
sidebarHomeIndicator.classList.add("hover"); 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", () => { document.addEventListener('touchend', e => {
sidebarHomeIndicator.classList.remove("hover"); 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", () => { let diffX = touchEndX - touchStartX;
sidebarAddIndicator.classList.add("hover"); let diffY = touchEndY - touchStartY;
});
sidebarAddButton.addEventListener("mouseleave", () => {
sidebarAddIndicator.classList.remove("hover");
});
sidebarProfileButton.addEventListener("mouseenter", () => { if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 60) {
sidebarProfileIndicator.classList.add("hover"); if (diffX > 0) {
}); mobileNavBack();
sidebarProfileButton.addEventListener("mouseleave", () => { } else {
sidebarProfileIndicator.classList.remove("hover"); if (mainScreen.classList.contains('mobile-content') && roomDetailsBar.style.display !== 'none') {
}); mobileNavDetails();
}
sidebarInboxButton.addEventListener("mouseenter", () => { }
sidebarInboxIndicator.classList.add("hover"); }
}); }
sidebarInboxButton.addEventListener("mouseleave", () => {
sidebarInboxIndicator.classList.remove("hover");
});
*/

155
webroot/style.css
View file

@ -13,7 +13,7 @@
--icon-button-height: 3.4rem; --icon-button-height: 3.4rem;
--button-height: 2.4rem; --button-height: 2.4rem;
--border-width: 0.09rem; --border-width: 0.09rem;
--big-default: rgb(207 207 207); --big-default: rgb(207 207 207);
--big-red: rgb(202 0 0); --big-red: rgb(202 0 0);
--big-green: rgb(25 189 0); --big-green: rgb(25 189 0);
@ -53,7 +53,7 @@ main, loading {
overflow: hidden; overflow: hidden;
} }
loading { loading {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
} }
@ -70,7 +70,6 @@ loading {
user-select: none !important; user-select: none !important;
-webkit-user-drag: none !important; -webkit-user-drag: none !important;
} }
button, input { button, input {
border-radius: 0.8rem; border-radius: 0.8rem;
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
@ -85,8 +84,8 @@ button, input {
border: var(--border-width) solid var(--light-border-color); border: var(--border-width) solid var(--light-border-color);
backface-visibility: hidden; backface-visibility: hidden;
transform: translateZ(0); transform: translateZ(0);
will-change: transform; will-change: transform;
transform-origin: center center; transform-origin: center center;
} }
input { input {
@ -150,7 +149,7 @@ button:active, input:active {
roomcontent { roomcontent {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: calc(100vw - (var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width)) - 17rem); 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); border-right: var(--border-width) solid var(--light-border-color);
@ -158,7 +157,7 @@ roomcontent {
roomcontent2 { roomcontent2 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100% - (var(--button-height) * 1.5)); height: calc(100% - (var(--button-height) * 1.5));
width: 100%; width: 100%;
} }
@ -181,27 +180,23 @@ sidebar.second {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.collapse-text-button { .collapse-text-button {
padding-left: calc(var(--button-margin) + 0.2rem); padding-left: calc(var(--button-margin) + 0.2rem);
flex-shrink: 0; flex-shrink: 0;
flex-grow: 1; flex-grow: 1;
border: none; border: none;
background-color: transparent; background-color: transparent;
height: 2rem; height: 2rem;
font-weight: 600; font-weight: 600;
gap: 0.3rem; gap: 0.3rem;
} }
.collapse-text-button .chevron { .collapse-text-button .chevron {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
} }
.collapse-text-button.collapsed .chevron { .collapse-text-button.collapsed .chevron {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.add-action-button { .add-action-button {
border: none; border: none;
background-color: transparent; background-color: transparent;
@ -212,7 +207,6 @@ sidebar.second {
justify-content: center; justify-content: center;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
} }
.add-action-button svg { .add-action-button svg {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
@ -225,8 +219,6 @@ hr {
width: 60%; width: 60%;
margin-left: 20%; margin-left: 20%;
} }
#notification-container { #notification-container {
padding-top: env(safe-area-inset-top); padding-top: env(safe-area-inset-top);
position: fixed; position: fixed;
@ -240,12 +232,10 @@ hr {
pointer-events: none; pointer-events: none;
align-items: center; align-items: center;
} }
.notification { .notification {
background: rgba(255, 255, 255, 0.015); background: rgba(255, 255, 255, 0.015);
backdrop-filter: blur(1.2rem); backdrop-filter: blur(1.2rem);
-webkit-backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem);
border: var(--border-width) solid var(--light-border-color); border: var(--border-width) solid var(--light-border-color);
border-radius: 0.9rem; border-radius: 0.9rem;
@ -262,43 +252,37 @@ hr {
transition: transition:
opacity 0.3s ease, opacity 0.3s ease,
transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 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 { .notification.show {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
.notification.info { .notification.info {
border-color: var(--big-default); border-color: var(--big-default);
} }
.notification.error { .notification.error {
border-color: var(--big-red); border-color: var(--big-red);
} }
.notification.success { .notification.success {
border-color: var(--big-green); border-color: var(--big-green);
} }
roomtopbar { roomtopbar {
height: calc(var(--button-height) * 1.5); height: calc(var(--button-height) * 1.5);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
border-bottom: var(--border-width) solid var(--light-border-color); border-bottom: var(--border-width) solid var(--light-border-color);
line-height: calc(var(--button-height) * 1.5); line-height: calc(var(--button-height) * 1.5);
font-weight: bold; font-weight: bold;
padding-left: calc(var(--button-margin) * 3); padding-left: calc(var(--button-margin) * 3);
padding-right: calc(var(--button-margin) * 3);
font-size: 1.5rem; font-size: 1.5rem;
} }
sidebar.second#roomdetailsbar { sidebar.second#roomdetailsbar {
height: calc(var(--button-height) * 1.5); height: calc(var(--button-height) * 1.5);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -312,32 +296,24 @@ herotitle {
font-weight: bold; font-weight: bold;
font-size: 1.6rem; font-size: 1.6rem;
} }
.input-group { .input-group {
text-align: left; text-align: left;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.2rem; gap: 0.2rem;
width: 90%; width: 90%;
max-width: 30rem; max-width: 30rem;
} }
.input-group label { .input-group label {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 800; font-weight: 800;
margin-left: 0.6rem; margin-left: 0.6rem;
margin-bottom: -0.2rem; margin-bottom: -0.2rem;
opacity: 0.4; opacity: 0.4;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.submit-button { .submit-button {
justify-content: center; justify-content: center;
background-color: var(--text-color); background-color: var(--text-color);
@ -346,11 +322,9 @@ herotitle {
border: none; border: none;
font-size: 1.05rem; font-size: 1.05rem;
} }
.bottom-element { .bottom-element {
margin-top: auto; margin-top: auto;
} }
@media (hover: hover) { @media (hover: hover) {
sidebarelement:hover indicator:not(.active) { sidebarelement:hover indicator:not(.active) {
content: ""; content: "";
@ -393,7 +367,6 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) {
border-radius: 0.8rem; border-radius: 0.8rem;
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem)); transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
} }
blah, inherit, .inherit { blah, inherit, .inherit {
all: inherit; all: inherit;
padding: 0; padding: 0;
@ -404,7 +377,6 @@ blah, inherit, .inherit {
space{ space{
margin-left: 0.4rem; margin-left: 0.4rem;
} }
.context-menu { .context-menu {
position: fixed; position: fixed;
background: var(--main-bg-color); background: var(--main-bg-color);
@ -416,19 +388,16 @@ space{
gap: 0.2rem; gap: 0.2rem;
z-index: 2000; z-index: 2000;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
opacity: 0; opacity: 0;
transform: scale(0.95); transform: scale(0.95);
transform-origin: center left; transform-origin: center left;
pointer-events: none; pointer-events: none;
} }
.context-menu.show { .context-menu.show {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
pointer-events: auto; pointer-events: auto;
} }
.context-menu button { .context-menu button {
margin: 0; margin: 0;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
@ -440,7 +409,107 @@ space{
gap: 0.5rem; gap: 0.5rem;
font-weight: 600; font-weight: 600;
} }
.context-menu button:hover { .context-menu button:hover {
background-color: rgba(255, 255, 255, 0.08); 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);
}
} }