Ailur
/
burgernotes-client-web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Add back homeserver changing and fix the mobile layout

This commit is contained in:
Tracker-Friendly 2024-06-25 19:43:24 +01:00
parent b1a0603940
commit ff21e0b198
7 changed files with 153 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/index.html
View File

@ -19,10 +19,9 @@
</noscript> </noscript>
<body> <body>
<div class="topBar"> <div class="topBar" id="topBar">
<p tabindex="0" class="logo" id="burgerButton"></p>
<button tabindex="0" class="logo hidden" style="font-size: 17px;margin-left: 0;" onclick="handleGesture()" id="backButton"><img src="/static/svg/arrow-back.svg"></button>
<div class="modernToolbar"> <div class="modernToolbar">
<button class="usernameBox hidden" onclick="handleGesture()" id="backButton"><div class="vcenter"><img src="/static/svg/arrow-back.svg"></div></button>
<button class="count" id="wordCountBox">0 words</button> <button class="count" id="wordCountBox">0 words</button>
<button onclick="toggleMarkdown()" class="usernameBox"><div class="vcenter"><img src="/static/svg/markdown.svg"></div></button> <button onclick="toggleMarkdown()" class="usernameBox"><div class="vcenter"><img src="/static/svg/markdown.svg"></div></button>
<button id="usernameBox" class="usernameBox"><div class="vcenter"><img src="/static/svg/acct-settings.svg"></div></button> <button id="usernameBox" class="usernameBox"><div class="vcenter"><img src="/static/svg/acct-settings.svg"></div></button>
@ -51,10 +50,10 @@
<div class="section"></div> <div class="section"></div>
<p>Device settings</p> <p>Device settings</p>
<div class="fontManipulator"> <div class="fontManipulator">
<span>Font size</span> <div class="vcenter"><text>Font size</text></div>
<button class="textMinusBox" id="textMinusBox">-</button> <div class="vcenter textMinusBox"><button id="textMinusBox">-</button></div>
<button class="textSizeBox" style="background-color: rgba(0, 0, 0, 0) !important; transform: translateX(-3.5px)" id="textSizeBox">16px</button> <div class="vcenter textSizeBox"><text style="background-color: rgba(0, 0, 0, 0) !important; transform: translateX(-3.5px)" id="textSizeBox">16px</text></div>
<button class="textPlusBox" id="textPlusBox">+</button> <div class="vcenter"><button id="textPlusBox">+</button></div>
</div> </div>
<div class="section"></div> <div class="section"></div>
<p>Storage</p> <p>Storage</p>

3
homeserver/index.html
View File

@ -12,12 +12,11 @@
</head> </head>
<body> <body>
<p class="credit">Image by perga (@pergagreen on discord)</p>
<img src="/static/img/background.jpg" class="background" alt=""> <img src="/static/img/background.jpg" class="background" alt="">
<div class="inoutdiv"> <div class="inoutdiv">
<h2>Homeserver</h2> <h2>Homeserver</h2>
<p>Change your Burgernotes homeserver</p> <p>Change your Burgernotes homeserver</p>
<p id="statusBox"></p> <p id="statusBox">Loading...</p>
<input type="text" value="https://" id="homeserverBox"><br> <input type="text" value="https://" id="homeserverBox"><br>
<button id="changeButton">Change</button><br><br> <button id="changeButton">Change</button><br><br>

2
login/index.html
View File

@ -12,7 +12,6 @@
</head> </head>
<body> <body>
<p class="credit"></p>
<img src="/static/img/background.jpg" class="background" alt=""> <img src="/static/img/background.jpg" class="background" alt="">
<div class="inoutdiv"> <div class="inoutdiv">
<noscript> <noscript>
@ -34,6 +33,7 @@
<button id="opButton" class="nonimportant">Create account</button> <button id="opButton" class="nonimportant">Create account</button>
<br><br><br><br> <br><br><br><br>
<div style="display: flex;"><p class="hidden" id="homeserver">Your homeserver is loading... </p><div style="display: flex;flex-direction: column;justify-content: center;"><a class="hidden" href="/homeserver">Change</a></div></div> <div style="display: flex;"><p class="hidden" id="homeserver">Your homeserver is loading... </p><div style="display: flex;flex-direction: column;justify-content: center;"><a class="hidden" href="/homeserver">Change</a></div></div>
<a href="/homeserver/">Change homeserver</a><br><br>
<a href="/privacy/">Privacy &amp; Terms</a> <a href="/privacy/">Privacy &amp; Terms</a>
</div> </div>

2
signup/index.html
View File

@ -12,7 +12,6 @@
</head> </head>
<body> <body>
<p class="credit">Image by perga (@pergagreen on discord)</p>
<img src="/static/img/background.jpg" class="background" alt=""> <img src="/static/img/background.jpg" class="background" alt="">
<div class="inoutdiv"> <div class="inoutdiv">
<h2>Create a Burgernotes Account</h2> <h2>Create a Burgernotes Account</h2>
@ -24,6 +23,7 @@
<input id="passwordBox" type="password" placeholder="Password"><br> <input id="passwordBox" type="password" placeholder="Password"><br>
<button id="signupButton">Create account</button><button id="opButton" class="nonimportant">Already have an account</button><br><br> <button id="signupButton">Create account</button><button id="opButton" class="nonimportant">Already have an account</button><br><br>
<div style="display: flex;"><p class="hidden" id="homeserver">Your homeserver is loading... </p><div style="display: flex;flex-direction: column;justify-content: center;"><a class="hidden" href="/homeserver">Change</a></div></div> <div style="display: flex;"><p class="hidden" id="homeserver">Your homeserver is loading... </p><div style="display: flex;flex-direction: column;justify-content: center;"><a class="hidden" href="/homeserver">Change</a></div></div>
<a href="/homeserver/">Change homeserver</a><br><br>
<a href="/privacy/">Privacy &amp; Terms</a> <a href="/privacy/">Privacy &amp; Terms</a>
</div> </div>
<script type="text/javascript" src="/static/js/signup.js"></script> <script type="text/javascript" src="/static/js/signup.js"></script>

57
static/css/style.css
View File

@ -166,7 +166,7 @@ body {
width: calc(100% - 181px); width: calc(100% - 181px);
height: 50px; height: 50px;
background-color: rgba(0, 0, 0, 0); background-color: var(--editor);
border: none; border: none;
border-color: var(--border-color); border-color: var(--border-color);
@ -211,18 +211,12 @@ body {
display: inline-block; 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 { .topBar .modernToolbar {
margin-left: auto; margin-left: auto;
margin-right: 5px; margin-right: 5px;
display: flex;
width: 100%;
overflow-x: auto;
} }
.topBar .modernToolbar .count { .topBar .modernToolbar .count {
@ -230,7 +224,7 @@ body {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
border: none; border: none;
font-size: 15px; font-size: 15px;
transform: translateY(-5px); margin-left: auto;
} }
.topBar .modernToolbar .textmod { .topBar .modernToolbar .textmod {
@ -406,6 +400,9 @@ body {
.noteBox.mobile { .noteBox.mobile {
flex-direction: column-reverse; flex-direction: column-reverse;
margin: 0;
margin-top: 15px;
height: calc(100% - 50px);
} }
.noteBoxText { .noteBoxText {
@ -563,6 +560,14 @@ iframe#markdown {
margin-bottom: 10px; margin-bottom: 10px;
} }
.optionsDiv .fontManipulator {
display: flex;
}
.optionsDiv .fontManipulator .vcenter {
height: auto;
}
.optionsDiv .fontManipulator button { .optionsDiv .fontManipulator button {
width: 43.5px; width: 43.5px;
background-color: var(--nonimporant-theme-color); background-color: var(--nonimporant-theme-color);
@ -575,12 +580,18 @@ iframe#markdown {
} }
.optionsDiv .fontManipulator .textMinusBox { .optionsDiv .fontManipulator .textMinusBox {
margin-left: 83.5px margin-left: auto;
}
.optionsDiv .fontManipulator .textSizeBox {
margin-left: 5px;
margin-right: 5px;
} }
.sessionDiv { .sessionDiv {
max-height: 255px; max-height: 255px;
overflow-y: auto; overflow-y: auto;
min-height: 20px;
} }
.sessionDiv div { .sessionDiv div {
@ -696,21 +707,19 @@ iframe#markdown {
text-align: center; text-align: center;
} }
@media only screen and (max-width: 850px) {
.inoutdiv {
min-width: 450px;
}
}
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.inoutdiv { .inoutdiv {
min-width: 100%; position: absolute;
margin-left: 25px; top: 0;
margin-right: 100px; bottom: 0;
left: 0;
right: 0;
border-radius: 0; border-radius: 0;
} min-width: calc(100% - 10px);
.inoutdiv input { min-height: 100%;
width: calc(100% - 165px) transform: none;
padding: 5px;
overflow-y: scroll;
} }
.inoutdiv p { .inoutdiv p {
font-size: 14px; font-size: 14px;

15
static/js/homeserver.js
View File

@ -4,6 +4,17 @@ let homeserverBox = document.getElementById("homeserverBox")
let statusBox = document.getElementById("statusBox") let statusBox = document.getElementById("statusBox")
let changeButton = document.getElementById("changeButton") 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) { function showElements(yesorno) {
if (!yesorno) { if (!yesorno) {
homeserverBox.classList.add("hidden") homeserverBox.classList.add("hidden")
@ -38,7 +49,7 @@ changeButton.addEventListener("click", (event) => {
window.location.href = document.referrer; window.location.href = document.referrer;
} }
else { else {
window.location.href = "https://notes.hectabit.org/login"; window.location.href = "/login";
} }
} }
else if (response.status == 404) { else if (response.status == 404) {
@ -55,4 +66,4 @@ changeButton.addEventListener("click", (event) => {
doStuff() doStuff()
}); });
// @license-end // @license-end

107
static/js/main.js
View File

@ -11,10 +11,6 @@ if (localStorage.getItem("DONOTSHARE-password") === null) {
throw new Error(); throw new Error();
} }
if (localStorage.getItem("CACHE-username") !== null) {
//document.getElementById("usernameBox").innerText = localStorage.getItem("CACHE-username")
}
let remote = localStorage.getItem("homeserverURL") let remote = localStorage.getItem("homeserverURL")
if (remote == null) { if (remote == null) {
localStorage.setItem("homeserverURL", "https://notes.hectabit.org") localStorage.setItem("homeserverURL", "https://notes.hectabit.org")
@ -28,7 +24,6 @@ let password = localStorage.getItem("DONOTSHARE-password")
let currentFontSize = 16 let currentFontSize = 16
let markdowntoggle = false let markdowntoggle = false
let burgerButton = document.getElementById("burgerButton")
let backButton = document.getElementById("backButton") let backButton = document.getElementById("backButton")
let usernameBox = document.getElementById("usernameBox") let usernameBox = document.getElementById("usernameBox")
let optionsCoverDiv = document.getElementById("optionsCoverDiv") let optionsCoverDiv = document.getElementById("optionsCoverDiv")
@ -51,6 +46,7 @@ let storageProgressThing = document.getElementById("storageProgressThing")
let usernameThing = document.getElementById("usernameThing") let usernameThing = document.getElementById("usernameThing")
let logOutButton = document.getElementById("logOutButton") let logOutButton = document.getElementById("logOutButton")
let notesBar = document.getElementById("notesBar") let notesBar = document.getElementById("notesBar")
let topBar = document.getElementById("topBar")
let notesDiv = document.getElementById("notesDiv") let notesDiv = document.getElementById("notesDiv")
let newNote = document.getElementById("newNote") let newNote = document.getElementById("newNote")
let noteBox = document.getElementById("noteBox") let noteBox = document.getElementById("noteBox")
@ -72,6 +68,102 @@ let indiv = false
let mobile = false let mobile = false
let selectLatestNote = 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.value = ""
noteBox.readOnly = true noteBox.readOnly = true
@ -181,19 +273,16 @@ function updateUserInfo() {
if (response.status === 500) { if (response.status === 500) {
displayError("Something went wrong! Signing you out...") displayError("Something went wrong! Signing you out...")
closeErrorButton.classList.add("hidden") closeErrorButton.classList.add("hidden")
//usernameBox.innerText = ""
setTimeout(function () { setTimeout(function () {
window.location.replace("/logout") window.location.replace("/logout")
}, 2500); }, 2500);
} else { } else {
let responseData = await response.json() let responseData = await response.json()
//usernameBox.innerText = responseData["username"]
usernameThing.innerText = "Username: " + responseData["username"] usernameThing.innerText = "Username: " + responseData["username"]
storageThing.innerText = "You've used " + formatBytes(responseData["storageused"]) + " out of " + formatBytes(responseData["storagemax"]) storageThing.innerText = "You've used " + formatBytes(responseData["storageused"]) + " out of " + formatBytes(responseData["storagemax"])
storageProgressThing.value = responseData["storageused"] storageProgressThing.value = responseData["storageused"]
storageProgressThing.max = responseData["storagemax"] storageProgressThing.max = responseData["storagemax"]
noteCount = responseData["notecount"] noteCount = responseData["notecount"]
localStorage.setItem("CACHE-username", responseData["username"])
} }
} }
doStuff() doStuff()
@ -719,4 +808,4 @@ if (firstNewVersion()) {
checknetwork() checknetwork()
// @license-end // @license-end