improved mobile support

static/css/style.css

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

static/js/main.js

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

templates/app.html

@@ -19,7 +19,7 @@
     </div>
 
     <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>
     </div>