From ff21e0b198d8a67e12c0c348647305e1b168a439 Mon Sep 17 00:00:00 2001 From: Arzumify Date: Tue, 25 Jun 2024 19:43:24 +0100 Subject: [PATCH] Add back homeserver changing and fix the mobile layout --- app/index.html | 13 +++-- homeserver/index.html | 3 +- login/index.html | 2 +- signup/index.html | 2 +- static/css/style.css | 57 ++++++++++++--------- static/js/homeserver.js | 15 +++++- static/js/main.js | 107 ++++++++++++++++++++++++++++++++++++---- 7 files changed, 153 insertions(+), 46 deletions(-) diff --git a/app/index.html b/app/index.html index 55d28de..9d7893f 100644 --- a/app/index.html +++ b/app/index.html @@ -19,10 +19,9 @@ -
- - +
+ @@ -51,10 +50,10 @@

Device settings

- Font size - - - +
Font size
+
+
16px
+

Storage

diff --git a/homeserver/index.html b/homeserver/index.html index 2918e6d..c9ab4c5 100644 --- a/homeserver/index.html +++ b/homeserver/index.html @@ -12,12 +12,11 @@ -

Image by perga (@pergagreen on discord)

Homeserver

Change your Burgernotes homeserver

-

+

Loading...




diff --git a/login/index.html b/login/index.html index 0030e02..ea074c3 100644 --- a/login/index.html +++ b/login/index.html @@ -12,7 +12,6 @@ -

diff --git a/signup/index.html b/signup/index.html index 91e6d58..e7bae58 100644 --- a/signup/index.html +++ b/signup/index.html @@ -12,7 +12,6 @@ -

Image by perga (@pergagreen on discord)

Create a Burgernotes Account

@@ -24,6 +23,7 @@


+ Change homeserver

Privacy & Terms
diff --git a/static/css/style.css b/static/css/style.css index 9f8a6a5..0d6a775 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -166,7 +166,7 @@ body { width: calc(100% - 181px); height: 50px; - background-color: rgba(0, 0, 0, 0); + background-color: var(--editor); border: none; border-color: var(--border-color); @@ -211,18 +211,12 @@ body { display: inline-block; } -.topBar .logo { - margin-left: 12px; - background-color: transparent; - border: none; - color: var(--text-color); - white-space: break-spaces; - display: flex; -} - .topBar .modernToolbar { margin-left: auto; margin-right: 5px; + display: flex; + width: 100%; + overflow-x: auto; } .topBar .modernToolbar .count { @@ -230,7 +224,7 @@ body { background-color: rgba(0, 0, 0, 0); border: none; font-size: 15px; - transform: translateY(-5px); + margin-left: auto; } .topBar .modernToolbar .textmod { @@ -406,6 +400,9 @@ body { .noteBox.mobile { flex-direction: column-reverse; + margin: 0; + margin-top: 15px; + height: calc(100% - 50px); } .noteBoxText { @@ -563,6 +560,14 @@ iframe#markdown { margin-bottom: 10px; } +.optionsDiv .fontManipulator { + display: flex; +} + +.optionsDiv .fontManipulator .vcenter { + height: auto; +} + .optionsDiv .fontManipulator button { width: 43.5px; background-color: var(--nonimporant-theme-color); @@ -575,12 +580,18 @@ iframe#markdown { } .optionsDiv .fontManipulator .textMinusBox { - margin-left: 83.5px + margin-left: auto; +} + +.optionsDiv .fontManipulator .textSizeBox { + margin-left: 5px; + margin-right: 5px; } .sessionDiv { max-height: 255px; overflow-y: auto; + min-height: 20px; } .sessionDiv div { @@ -696,21 +707,19 @@ iframe#markdown { text-align: center; } -@media only screen and (max-width: 850px) { - .inoutdiv { - min-width: 450px; - } -} - @media only screen and (max-width: 600px) { .inoutdiv { - min-width: 100%; - margin-left: 25px; - margin-right: 100px; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; border-radius: 0; - } - .inoutdiv input { - width: calc(100% - 165px) + min-width: calc(100% - 10px); + min-height: 100%; + transform: none; + padding: 5px; + overflow-y: scroll; } .inoutdiv p { font-size: 14px; diff --git a/static/js/homeserver.js b/static/js/homeserver.js index ba0f5fa..435ab70 100644 --- a/static/js/homeserver.js +++ b/static/js/homeserver.js @@ -4,6 +4,17 @@ let homeserverBox = document.getElementById("homeserverBox") let statusBox = document.getElementById("statusBox") let changeButton = document.getElementById("changeButton") +let remote = localStorage.getItem("homeserverURL") +if (remote == null) { + localStorage.setItem("homeserverURL", "https://notes.hectabit.org") + remote = "https://notes.hectabit.org" +} + + +document.addEventListener("DOMContentLoaded", function() { + statusBox.innerText = "You are currently connected to: " + remote + ". " +}); + function showElements(yesorno) { if (!yesorno) { homeserverBox.classList.add("hidden") @@ -38,7 +49,7 @@ changeButton.addEventListener("click", (event) => { window.location.href = document.referrer; } else { - window.location.href = "https://notes.hectabit.org/login"; + window.location.href = "/login"; } } else if (response.status == 404) { @@ -55,4 +66,4 @@ changeButton.addEventListener("click", (event) => { doStuff() }); -// @license-end \ No newline at end of file +// @license-end diff --git a/static/js/main.js b/static/js/main.js index aa0b7ef..afc5672 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -11,10 +11,6 @@ if (localStorage.getItem("DONOTSHARE-password") === null) { throw new Error(); } -if (localStorage.getItem("CACHE-username") !== null) { - //document.getElementById("usernameBox").innerText = localStorage.getItem("CACHE-username") -} - let remote = localStorage.getItem("homeserverURL") if (remote == null) { localStorage.setItem("homeserverURL", "https://notes.hectabit.org") @@ -28,7 +24,6 @@ let password = localStorage.getItem("DONOTSHARE-password") let currentFontSize = 16 let markdowntoggle = false -let burgerButton = document.getElementById("burgerButton") let backButton = document.getElementById("backButton") let usernameBox = document.getElementById("usernameBox") let optionsCoverDiv = document.getElementById("optionsCoverDiv") @@ -51,6 +46,7 @@ let storageProgressThing = document.getElementById("storageProgressThing") let usernameThing = document.getElementById("usernameThing") let logOutButton = document.getElementById("logOutButton") let notesBar = document.getElementById("notesBar") +let topBar = document.getElementById("topBar") let notesDiv = document.getElementById("notesDiv") let newNote = document.getElementById("newNote") let noteBox = document.getElementById("noteBox") @@ -72,6 +68,102 @@ let indiv = false let mobile = false let selectLatestNote = false +if (/Android|iPhone|iPod/i.test(navigator.userAgent)) { + mobile = true + noteBoxDiv.classList.add("mobile"); + noteBoxDiv.style.width = "0px"; + notesBar.style.width = "100%" + topBar.style.width = "100%" + noteBoxDiv.readOnly = true + noteBoxDiv.classList.add("hidden") + + let touchstartX, touchstartY, touchendX, touchendY + + notesBar.addEventListener("touchstart", function (event) { + touchstartX = event.changedTouches[0].screenX; + touchstartY = event.changedTouches[0].screenY; + }, false); + + notesBar.addEventListener("touchend", function (event) { + touchendX = event.changedTouches[0].screenX; + touchendY = event.changedTouches[0].screenY; + if (touchendX < touchstartX - 75) { + handleGesture(); + } + }, false); + + noteBox.addEventListener("touchstart", function (event) { + touchstartX = event.changedTouches[0].screenX; + touchstartY = event.changedTouches[0].screenY; + }, false); + + noteBox.addEventListener("touchend", function (event) { + touchendX = event.changedTouches[0].screenX; + touchendY = event.changedTouches[0].screenY; + if (touchendX > touchstartX + 75) { + handleGesture(); + } else if (touchendX < touchstartX - 75) { + enableMarkdown(); + } + }, false); + + markdown.addEventListener("touchstart", function (event) { + touchstartX = event.changedTouches[0].screenX; + touchstartY = event.changedTouches[0].screenY; + }, false); + + noteBox.addEventListener("touchend", function (event) { + touchendX = event.changedTouches[0].screenX; + touchendY = event.changedTouches[0].screenY; + if (touchendX > touchstartX + 75) { + handleGesture(); + } else if (touchendX < touchstartX - 75) { + enableMarkdown(); + } + }, false); + + markdown.addEventListener("touchstart", function (event) { + touchstartX = event.changedTouches[0].screenX; + touchstartY = event.changedTouches[0].screenY; + }, false); + + markdown.addEventListener("touchend", function (event) { + touchendX = event.changedTouches[0].screenX; + touchendY = event.changedTouches[0].screenY; + if (touchendX > touchstartX + 75) { + disableMarkdown(); + } else if (touchendX < touchstartX - 75) { + disableMarkdown(); + } + }, false); +} + +function handleGesture() { + if (indiv) { + indiv = false + notesBar.style.width = "100%"; + noteBoxDiv.style.width = "0px" + if (selectedNote !== 0) { + noteBoxDiv.readOnly = true + } + notesDiv.classList.remove("hidden") + noteBoxDiv.classList.add("hidden") + backButton.classList.add("hidden") + newNote.classList.remove("hidden") + } else { + indiv = true + noteBoxDiv.style.width = "100%"; + notesBar.style.width = "0px" + if (selectedNote !== 0) { + noteBoxDiv.readOnly = false + } + notesDiv.classList.add("hidden") + noteBoxDiv.classList.remove("hidden") + backButton.classList.remove("hidden") + newNote.classList.add("hidden") + } +} + noteBox.value = "" noteBox.readOnly = true @@ -181,19 +273,16 @@ function updateUserInfo() { if (response.status === 500) { displayError("Something went wrong! Signing you out...") closeErrorButton.classList.add("hidden") - //usernameBox.innerText = "" setTimeout(function () { window.location.replace("/logout") }, 2500); } else { let responseData = await response.json() - //usernameBox.innerText = responseData["username"] usernameThing.innerText = "Username: " + responseData["username"] storageThing.innerText = "You've used " + formatBytes(responseData["storageused"]) + " out of " + formatBytes(responseData["storagemax"]) storageProgressThing.value = responseData["storageused"] storageProgressThing.max = responseData["storagemax"] noteCount = responseData["notecount"] - localStorage.setItem("CACHE-username", responseData["username"]) } } doStuff() @@ -719,4 +808,4 @@ if (firstNewVersion()) { checknetwork() -// @license-end \ No newline at end of file +// @license-end