improved mobile support

This commit is contained in:
maaa 2023-07-21 23:54:43 +02:00
parent 4c39760357
commit 497b25915a
3 changed files with 9 additions and 2 deletions

View File

@ -32,6 +32,7 @@ body {
.topBar .usernameBox { .topBar .usernameBox {
text-align: right; text-align: right;
position: absolute; position: absolute;
cursor: pointer;
right: 12px; right: 12px;
} }
@ -60,6 +61,7 @@ body {
margin: 7px; margin: 7px;
margin-bottom: 0; margin-bottom: 0;
background-color: #ffffff; background-color: #ffffff;
color: black;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@ -73,7 +75,7 @@ body {
} }
.notesBar .selected { .notesBar .selected {
background-color: #157efb; background-color: #157efb !important;
color: white color: white
} }
@ -96,6 +98,7 @@ body {
right: 0; right: 0;
bottom: 0; bottom: 0;
border: none; border: none;
font-size: 16px;
width: calc(100% - 180px - 7px); width: calc(100% - 180px - 7px);
height: calc(100% - 50px - 6px); height: calc(100% - 50px - 6px);
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;

View File

@ -23,6 +23,8 @@ let waitTime = 400
if (/Android|iPhone/i.test(navigator.userAgent)) { if (/Android|iPhone/i.test(navigator.userAgent)) {
noteBox.style.width = "10px"; noteBox.style.width = "10px";
notesBar.style.width = "calc(100% - 10px)" notesBar.style.width = "calc(100% - 10px)"
noteBox.readOnly = true
noteBox.style.fontSize = "18px"
notesBar.addEventListener("touchstart", function (event) { notesBar.addEventListener("touchstart", function (event) {
touchstartX = event.changedTouches[0].screenX; touchstartX = event.changedTouches[0].screenX;
@ -50,6 +52,7 @@ if (/Android|iPhone/i.test(navigator.userAgent)) {
if (touchendX > touchstartX) { if (touchendX > touchstartX) {
notesBar.style.width = "calc(100% - 30px)"; notesBar.style.width = "calc(100% - 30px)";
noteBox.style.width = "30px" noteBox.style.width = "30px"
noteBox.readOnly = true
notesDiv.classList.remove("hidden") notesDiv.classList.remove("hidden")
newNote.classList.remove("hidden") newNote.classList.remove("hidden")
} }
@ -57,6 +60,7 @@ if (/Android|iPhone/i.test(navigator.userAgent)) {
if (touchendX < touchstartX) { if (touchendX < touchstartX) {
noteBox.style.width = "calc(100% - 30px)"; noteBox.style.width = "calc(100% - 30px)";
notesBar.style.width = "30px" notesBar.style.width = "30px"
noteBox.readOnly = false
notesDiv.classList.add("hidden") notesDiv.classList.add("hidden")
newNote.classList.add("hidden") newNote.classList.add("hidden")
} }

View File

@ -19,7 +19,7 @@
</div> </div>
<div id="notesBar" class="notesBar"> <div id="notesBar" class="notesBar">
<button id="newNote" class="newNote"><img src="/static/svg/add.svg">new note</button> <button id="newNote" class="newNote"><img id="newNoteImage" src="/static/svg/add.svg">new note</button>
<div id="notesDiv" class="notesDiv"> <div id="notesDiv" class="notesDiv">
</div> </div>
</div> </div>