Adjust layout and styles for improved responsiveness; update output g…

…rid for mobile support
Jozo132 · Dec 22, 2024 · 00c102d · 00c102d
1 parent 1a8b75b
commit 00c102d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
         <link rel="stylesheet" href="./src/style.css">
     </head>
 
-    <body>
+    <body style="margin:15px">
         <div>
             <h1>Realtime ZPL to SVG Converter</h1>
             <p>Source code: <a href="https://github.com/Jozo132/zpl2svg">https://github.com/Jozo132/zpl2svg</a> - Author: Jozo132</p>
@@ -36,11 +36,11 @@ <h3>The only dependencies for this project are <a href="https://github.com/metaf
             <p id="touch_value"></p>
         </div>
         <div class="output">
-            <div style="width: 35vw !important; height: 70vh !important;">
+            <div style="width: 100% !important; height: 70vh !important;">
                 <h2 style="margin-top: 16px; margin-bottom: 8px;">ZPL Input:</h2>
                 <div id="code_text"></div>
             </div>
-            <div class="tabs" style="width: 63vw !important; height: 70vh !important;">
+            <div class="tabs" style="width: 100% !important; height: 70vh !important;">
                 <div class="header">
                     <button id="svg-tab" class="active" style="margin-left: 5px; border-radius: 5px 0px 0px 5px;">SVG</button>
                     <button id="raw-tab" style="border-radius: 0px 5px 5px 0px;">RAW</button>
@@ -50,7 +50,7 @@ <h2 style="margin-top: 16px; margin-bottom: 8px;">ZPL Input:</h2>
                     <button id="download-png" class="hidden">Download PNG</button>
                 </div>
                 <div id="svg-div" class="content">
-                    <div id="svg" style="width: 100%; height: 90%; background-color: white;"></div>
+                    <div id="svg" style="width: 100%; height: 90%;"></div>
                 </div>
                 <div id="raw-div" class="content hidden">
                     <div id="svg_text"></div>

diff --git a/src/script.js b/src/script.js
@@ -417,20 +417,23 @@ const svg_editor = monaco.editor.create(svg_text_element, {
 
 const update_sizes = () => {
     const zpl_params = {
-        width: code_text_element.parentElement?.clientWidth || 0 - 10,
-        height: code_text_element.parentElement?.clientHeight || 0 - 130
+        width: (code_text_element.parentElement?.clientWidth || 0) - 10,
+        height: (code_text_element.parentElement?.clientHeight || 0) - 10
     }
     const svg_params = {
-        width: svg_text_element.parentElement?.clientWidth || 0 - 10,
-        height: svg_text_element.parentElement?.clientHeight || 0 - 130
+        width: (svg_text_element.parentElement?.clientWidth || 0) - 10,
+        height: (svg_text_element.parentElement?.clientHeight || 0) - 10
     }
     const body_width = document.body.clientWidth
+    // zpl_editor.layout(zpl_params)
+    // svg_editor.layout(svg_params)
     zpl_editor.layout(zpl_params)
     svg_editor.layout(svg_params)
 
     // show minimap only when body_width >= 1600
     zpl_editor.updateOptions({ minimap: { enabled: body_width >= 1600 } })
     svg_editor.updateOptions({ minimap: { enabled: body_width >= 1600 } })
+
 }
 update_sizes()
 

diff --git a/src/style.css b/src/style.css
@@ -16,9 +16,19 @@ a:hover { color: #0F5; }
 
 div.output {
     display: grid;
-    grid-template-columns: 1fr 2fr !important;
+    grid-template-columns: 1fr 2fr; /* Desktop and larger screens*/
     width: 100%;
     height: 80vh !important;
+    padding-top: 10px;
+    margin-bottom: 15px;
+}
+
+/* handle mobile devices */
+@media (max-width: 1000px) {
+    div.output {
+        grid-template-columns: 1fr !important; /* Mobile and smaller screens */
+        height: 50vh !important;
+    }
 }
 
 .content {
@@ -98,4 +108,6 @@ div.output pre div, div.output pre textarea  {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-} */
+} */
+
+.monaco-editor { position: absolute !important; }