From 0f2d5f8bc2e13df7a3c7d564628de3503f6b41f7 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Tue, 25 Aug 2020 18:40:13 +0530
Subject: [PATCH] added note to save edits using enter key

---
 index.html | 49 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 17 deletions(-)
diff --git a/index.html b/index.html
index 780d3dc..866dc1c 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 
 <head>
     <title>FLO LogSheet</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
         :root {
             --accent-light: #20a878;
@@ -25,7 +26,7 @@
 
         /* width */
         ::-webkit-scrollbar {
-            width: 0.1rem;
+            width: 0.4rem;
             height: 0.2rem;
         }
 
@@ -36,12 +37,12 @@
 
         /* Handle */
         ::-webkit-scrollbar-thumb {
-            background: rgba(var(--rgb-bw), 0.2);
+            background: rgba(var(--rgb-bw), 0.4);
         }
 
         /* Handle on hover */
         ::-webkit-scrollbar-thumb:hover {
-            background: rgba(var(--rgb-bw), 0.3);
+            background: rgba(var(--rgb-bw), 0.6);
         }
 
         body {
@@ -65,6 +66,10 @@
             z-index: 4;
         }
 
+        .margin{
+            margin: 0.5rem;
+        }
+
         #loading-screen .appName {
             top: 8rem;
             position: fixed;
@@ -356,25 +361,23 @@
             position: relative;
             border-radius: 0.4rem;
         }
+        #main_container{
+            display: grid;
+            grid-template-columns: 16rem 1fr;
+            gap: 1.5rem;
+            padding: 1.5rem
+        }
 
         #leftPanel {
             height: 34rem;
-            width: 16rem;
-            float: left;
-            margin: 0 0 0 2rem;
         }
 
         #leftPanel>div {
             height: 30rem;
-            width: 100%;
-            margin: 2rem 0;
         }
 
         #rightPanel {
             height: 34rem;
-            width: 56rem;
-            float: right;
-            margin: 1.5rem 2rem 0rem 2rem;
         }
 
         #rightPanel>nav {
@@ -419,15 +422,20 @@
             font-size: 1.1rem;
         }
 
+        .horizontal-list{
+           display: flex;
+           overflow-x: auto;
+           max-width: 100%;
+        }
         .horizontal-list div {
             display: inline-block;
             color: var(--alt-light);
         }
 
         #sheet-list {
-            width: 52rem;
-            overflow-x: scroll;
-            white-space: nowrap;
+            display: flex;
+            max-width: 100%;
+            overflow-x: auto;
             margin-right: 1rem;
         }
 
@@ -521,7 +529,7 @@
         .table-container {
             margin: 0 1rem 1rem 1rem;
             overflow: scroll;
-            max-height: 19rem;
+            max-height: 18rem;
         }
 
         table {
@@ -530,6 +538,7 @@
 
         table td {
             padding: 0.25rem;
+            overflow-wrap: break-word;
         }
 
         thead {
@@ -932,7 +941,7 @@
         <button> &#x2716;</span>
     </div>
 
-    <section>
+    <section id="main_container">
 
         <div id="leftPanel">
             <div class="container vertical-list">
@@ -957,6 +966,7 @@
                     <h6></h6>
                     <p></p>
                     <button id="view-group-by">Groupby</button>
+                    <h5 class="margin">*Press ENTER to save your edit.</h5>
                 </div>
                 <form class="table-container" id="sheet-view" onsubmit="enterLog(); return false;"></form>
                 <button type="submit" form="sheet-view" style="display: none;"></button>
@@ -1198,19 +1208,24 @@
         function enterLog() {
             let title = document.getElementById("sheet-details").children[0].textContent;
             let form = document.forms['sheet-view']
+            form.elements.forEach(element => element.disabled = true)
             if (form[0].tagName === 'INPUT') {
                 let floID = form[0].value;
                 let log = []
                 for (let i = 1; i < form.length - 1; i++)
                     log.push(form[i].value)
                 logSheet.enterLog(title, floID, log).then(result => {
+                    form.elements.forEach(element => element.disabled = false)
                     form.reset();
                     showMessage('Log Entry Successful')
                     let row = document.getElementById("sheet-view").getElementsByTagName("tbody")[0].insertRow(1);
                     row.insertCell(0).textContent = floID
                     for (let k = 0; k < log.length; k++)
                         row.insertCell(k + 1).textContent = log[k]
-                }).catch(error => showMessage(error, "error"))
+                }).catch(error => {
+                    showMessage(error, "error")
+                    form.elements.forEach(element => element.disabled = false)
+                })
             }
         }
 
