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>
<body>
<div class="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="topBar" id="topBar">
<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 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>
@ -51,10 +50,10 @@
<div class="section"></div>
<p>Device settings</p>
<div class="fontManipulator">
<span>Font size</span>
<button class="textMinusBox" id="textMinusBox">-</button>
<button class="textSizeBox" style="background-color: rgba(0, 0, 0, 0) !important; transform: translateX(-3.5px)" id="textSizeBox">16px</button>
<button class="textPlusBox" id="textPlusBox">+</button>
<div class="vcenter"><text>Font size</text></div>
<div class="vcenter textMinusBox"><button id="textMinusBox">-</button></div>
<div class="vcenter textSizeBox"><text style="background-color: rgba(0, 0, 0, 0) !important; transform: translateX(-3.5px)" id="textSizeBox">16px</text></div>
<div class="vcenter"><button id="textPlusBox">+</button></div>
</div>
<div class="section"></div>
<p>Storage</p>

3
homeserver/index.html
View File

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

2
login/index.html
View File

@ -12,7 +12,6 @@
</head>
<body>
<p class="credit"></p>
<img src="/static/img/background.jpg" class="background" alt="">
<div class="inoutdiv">
<noscript>
@ -34,6 +33,7 @@
<button id="opButton" class="nonimportant">Create account</button>
<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>
<a href="/homeserver/">Change homeserver</a><br><br>
<a href="/privacy/">Privacy &amp; Terms</a>
</div>

2
signup/index.html
View File

@ -12,7 +12,6 @@
</head>
<body>
<p class="credit">Image by perga (@pergagreen on discord)</p>
<img src="/static/img/background.jpg" class="background" alt="">
<div class="inoutdiv">
<h2>Create a Burgernotes Account</h2>
@ -24,6 +23,7 @@
<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>
<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>
</div>
<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);
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;

15
static/js/homeserver.js
View File

@ -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
// @license-end

107
static/js/main.js
View File

@ -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
// @license-end