Merge pull request #24 from gokulk16/r-19

fix: editor and output has separate scrolls when the content is too long on y-axis
gokulk16 · Jun 20, 2024 · 0de1bed · 0de1bed
2 parents 9ea6d40 + fb7cfaf
commit 0de1bed
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 41 deletions.
diff --git a/css/editor.css b/css/editor.css
@@ -11,10 +11,11 @@ body {
   overscroll-behavior: none;
 }
 
-.app {
-  display: flex;
-  justify-content: space-between;
-  overflow: visible;
+.calculator {
+  display: grid;
+  grid-template-columns: 1fr 5px var(--output-column);
+  outline: none;
+  overflow: auto !important;
 }
 
 .editor {
@@ -23,13 +24,22 @@ body {
   border: none;
   outline: none;
   resize: none;
-  width: 100%;
+  max-width: 100%;
+  min-width: 15%;
   color: var(--input-number);
 }
 
+.separator {
+  display: flex;
+  justify-content: center;
+  background: var(--history-accent-2);
+  height: 100%;
+  /* cursor: ew-resize; */
+}
+
 .output {
-  border-left: 1px solid var(--tertiary);
-  width: 37%;
+  max-width: 100%;
+  min-width: 15%;
   background-color: var(--output-background);
 }
 
@@ -38,8 +48,7 @@ body {
   padding: 8px;
   white-space: pre;
   min-height: 100vh;
-  overflow-x: hidden;
-  overflow-y: "auto";
+  overflow: auto !important;
 }
 
 .history-editor {
@@ -48,7 +57,8 @@ body {
   border: none;
   outline: none;
   resize: none;
-  width: 100%;
+  min-width: 15%;
+  max-width: 100%;
   flex-direction: column;
 }
 
@@ -60,18 +70,23 @@ body {
   color: var(--input-number);
   font-size: 21px;
   line-height: 28px;
+  text-align: left;
+  overflow: auto !important;
+  white-space: nowrap;
 }
 
 .history-output {
-  border-left: 1px solid var(--tertiary);
-  width: 37%;
+  /* border-left: 1px solid var(--tertiary); */
+  min-width: 15%;
+  max-width: 100%;
   background-color: var(--output-background);
   flex-direction: column;
 }
 
 .history-editor,
 .history-output {
   padding: 8px;
+  overflow: auto !important;
 }
 
 .history-result-btn {
@@ -121,8 +136,9 @@ body {
 
 #history-items {
   border-bottom: 1px solid var(--history-accent-1);
-  flex-direction: row;
-  display: flex;
+  overflow: auto !important;
+  display: grid;
+  grid-template-columns: 1fr 5px var(--output-column);
 }
 
 .result-btn {

diff --git a/css/theme.css b/css/theme.css
@@ -9,6 +9,7 @@
     "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
     "Courier New", monospace;
 
+  --output-column: minmax(150px, 37%);
   --background: #ffffff;
   --surface: #ffffff;
   --surface-shade: rgba(0, 0, 0, 0.15);

diff --git a/html/index.html b/html/index.html
@@ -21,17 +21,21 @@ <h1 class="no-show">
       Fastest calculator you will need.
     </h1>
     <div class="app">
-      <div
-        id="editor"
-        class="editor"
-        contenteditable="plaintext-only"
-        spellcheck="false"
-      ></div>
-      <div
-        id="output"
-        class="output"
-        title="Click to copy &#10;Shift + click to copy & paste"
-      ></div>
+      <div id="calculator" class="calculator">
+        <div
+          id="editor"
+          class="editor"
+          contenteditable="plaintext-only"
+          spellcheck="false"
+        ></div>
+        <div class="separator"></div>
+        <div
+          id="output"
+          class="output"
+          title="Click to copy &#10;Shift + click to copy & paste"
+        ></div>
+      </div>
+
       <div id="calculator-history">
         <div class="history-label">History</div>
       </div>

diff --git a/js/editor.js b/js/editor.js
@@ -246,6 +246,7 @@ function createHistoryItems(historySessionData) {
 function createHistoryElements() {
   let noOfHistoryLines = 0;
   var calculatorHistory = document.getElementById("calculator-history");
+
   for (let history of historyData) {
     if (!("lines" in history)) {
       continue;
@@ -256,8 +257,14 @@ function createHistoryElements() {
     const historyItemsElement = document.createElement("div");
     historyItemsElement.id = "history-items";
     calculatorHistory.appendChild(historyItemsElement);
+
     let [historyItemEditor, historyItemsOutput] = createHistoryItems(history);
+
+    const separatorElement = document.createElement("div");
+    separatorElement.className = "separator";
+
     historyItemsElement.appendChild(historyItemEditor);
+    historyItemsElement.appendChild(separatorElement);
     historyItemsElement.appendChild(historyItemsOutput);
     noOfHistoryLines += history.lines.length;
   }
@@ -267,10 +274,9 @@ function createHistoryElements() {
 function hideCalculatorHistory() {
   var calculatorHistory = document.getElementById("calculator-history");
   calculatorHistory.style.display = "none";
-  editor.style.minHeight = "100vh";
-  editor.style.maxHeight = "100vh";
-  output.style.minHeight = "100vh";
-  output.style.maxHeight = "100vh";
+  var calculator = document.getElementById("calculator");
+  calculator.style.minHeight = "100vh";
+  calculator.style.maxHeight = "100vh";
 }
 
 // Function to display calculator history
@@ -281,26 +287,21 @@ function displayCalculatorHistory() {
   }
   var calculatorHistory = document.getElementById("calculator-history");
   calculatorHistory.style.display = "block";
+  var calculator = document.getElementById("calculator");
   // to add the height based on the number of elements in history
   if (noOfHistoryLines < 3) {
-    editor.style.minHeight = "92vh";
-    editor.style.maxHeight = "92vh";
-    output.style.minHeight = "92vh";
-    output.style.maxHeight = "92vh";
+    calculator.style.minHeight = "92vh";
+    calculator.style.maxHeight = "92vh";
     calculatorHistory.style.minHeight = "8vh";
     calculatorHistory.style.maxHeight = "8vh";
   } else if (noOfHistoryLines < 10) {
-    editor.style.minHeight = "85vh";
-    editor.style.maxHeight = "85vh";
-    output.style.minHeight = "85vh";
-    output.style.maxHeight = "85vh";
+    calculator.style.minHeight = "85vh";
+    calculator.style.maxHeight = "85vh";
     calculatorHistory.style.minHeight = "15vh";
     calculatorHistory.style.maxHeight = "15vh";
   } else {
-    editor.style.minHeight = "70vh";
-    editor.style.maxHeight = "70vh";
-    output.style.minHeight = "70vh";
-    output.style.maxHeight = "70vh";
+    calculator.style.minHeight = "70vh";
+    calculator.style.maxHeight = "70vh";
     calculatorHistory.style.minHeight = "30vh";
     calculatorHistory.style.maxHeight = "30vh";
   }