ui: make file list more accessible for small screens, adds checkmark …

…for setting file name
lavafroth · Aug 12, 2023 · 4626de8 · 4626de8
1 parent b761c66
commit 4626de8
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 deletions.
diff --git a/src/static/index.html b/src/static/index.html
@@ -11,15 +11,22 @@
 
 <body>
     <div class="container">
-        <div class="files">
+        <div class="hide files">
         </div>
         <div class="sidebar">
             <div class="documents icon"></div>
             <div class="run icon"></div>
             <div class="add icon"></div>
         </div>
         <div class="editorarea">
-            <input class="title" placeholder="new file"></input>
+            <div class="title-bar">
+                <input class="title" placeholder="new file"></input>
+                <button class="title-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
+                      <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+                    </svg>
+                </button>
+            </div>
             <textarea class="editor"></textarea>
         </div>
     </div>

diff --git a/src/static/main.css b/src/static/main.css
@@ -13,8 +13,9 @@ body {
 }
 
 .container {
-    height: calc(70vh);
+    height: 70vh;
     display: flex;
+    overflow: hidden;
     flex-direction: row;
 }
 
@@ -44,8 +45,9 @@ body {
     background: #111;
     display: flex;
     flex-direction: column;
-    width: 25vw;
+    width: 0;
     overflow: scroll;
+    flex-shrink: 0;
 }
 
 .entry {
@@ -90,23 +92,36 @@ body {
  .editorarea {
     display: flex;
     flex-direction: column;
-    width: 100%;
+    flex: 1;
 }
 
-.editorarea > .title {
-    padding: 0.5rem 1rem;
+.editorarea > .title-bar {
     color: #888;
     background: #222;
     outline: none;
-    border: none;
     border-bottom: #444 solid 0.1rem;
+    display: flex;
+    flex-direction: row;
+}
+
+.editorarea > .title-bar > .title {
+    outline: none;
+    border: none;
+    background: #222;
+    flex-grow: 1;
+    padding: 0.5rem 1rem;
+}
+
+.editorarea > .title-bar > .title-btn {
+    border: none;
+    background: #222;
+    padding: 0 0.4rem 0 0.4rem;
 }
 
 .editor {
     background: #222;
     border: none;
     resize: none;
-    min-width: max-content;
     height: calc(70vh - 3rem);
     padding: 0.5rem;
 }
@@ -136,3 +151,9 @@ body {
 .editor:focus {
     outline: none;
 }
+
+@media screen and (orientation: portrait) {
+    .show {
+        width: calc(100vw - 3rem);
+    }
+}
diff --git a/src/static/script.js b/src/static/script.js
@@ -11,7 +11,8 @@ const logs = document.querySelector('.logs')
 const documents_icon = document.querySelector('.documents')
 const run_icon = document.querySelector('.run')
 const add_icon = document.querySelector('.add')
-const title = document.querySelector('.editorarea > .title')
+const title = document.querySelector('.editorarea > .title-bar > .title')
+const title_button = document.querySelector('.editorarea > .title-bar > .title-btn')
 let timer
 
 function doApi(message) {
@@ -74,6 +75,11 @@ title.addEventListener('keypress', (e) => {
     }
 })
 
+title_button.addEventListener('click', () => {
+    title.readOnly = true
+    doApi({"action": "create", "filename": title.value})
+});
+
 add_icon.addEventListener('click', () => {
     editor.value = ''
     title.value = ''