windows height by css

hetalang · May 16, 2024 · 3e5dca6 · 3e5dca6
1 parent 06e5196
commit 3e5dca6
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 11 deletions.
diff --git a/TODO.md b/TODO.md
@@ -15,5 +15,5 @@
 ? not to display output.log
 ? autocomplete in heta syntax
 ? Matlab highliting support
-? console at the bottom
+- console at the bottom
 ? file content manager
diff --git a/src/app.js b/src/app.js
@@ -254,16 +254,17 @@ async function downloadPlatform() {
   a.click();
 }
 
-function updateWindowHeight(){
-    let h = document.documentElement.clientHeight - $('#topDiv').outerHeight();
-    $('#mainDiv').height(h + 'px');
+function updateWindowHeight() {
+/*
+    //let h = document.documentElement.clientHeight - $('#topDiv').outerHeight();
+    //$('#mainDiv').height(h + 'px');
 
     let h2 = $('#mainDiv').outerHeight() - $('#leftPanel .codeNavigation').outerHeight() - 2;
     $('#leftPanel .codeContainer').height(h2 + 'px');
 
     let h3 = $('#mainDiv').outerHeight() - $('#rightPanel .codeNavigation').outerHeight() - 2;
     $('#rightPanel .codeContainer').height(h3 + 'px');
-
+*/
     // update editors
     leftCollection.pagesStorage
       .forEach((x) => $(x.editorContainer).css('display') === 'block' && x.monacoEditor?.layout());

diff --git a/src/dropping.css b/src/dropping.css
@@ -20,4 +20,27 @@ svg#i-lightning {
     width: 90%;
     height: 600px;
     border: 5px dashed red;
+}
+
+html {
+    height: 100%;
+}
+body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+#topDiv {
+    min-height: 50px;
+}
+#mainDiv {
+    flex-grow: 1;
+}
+#leftPanel, #rightPanel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.codeContainer {
+    flex-grow: 1;
 }
diff --git a/src/index.html b/src/index.html
@@ -11,7 +11,7 @@
           gtag('config', 'G-3D4WTJ03NM');
         </script>
         <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
         <meta property="og:title" content="Heta compiler online" />
         <meta property="og:description" content="Online tool for Heta code compilation." />
         <meta property="og:url" content="https://heta-online.insysbio.com/" />
@@ -38,7 +38,7 @@ <h2>Info</h2>
           </div>
         </div>
 
-        <!-- DnD Modal -->
+        <!-- Drag and Drop Modal for files -->
         <div id="modalDnD" class="w3-modal">
           <div class="w3-modal-content">
             <div class="w3-center">
@@ -49,7 +49,7 @@ <h1>Add files or directories here</h1>
 
         <!-- The Header -->
         <div id="topDiv" class="w3-row">
-            <div class="w3-rest w3-deep-purple w3-display-container" style="height:50px;">
+            <div class="w3-rest w3-deep-purple w3-display-container" style="height:100%;">
                 <div class="w3-display-left" >
                     <span class="w3-xlarge">Heta compiler <i style="font-size: 80%;">Online</i></span>
                 </div>
@@ -87,7 +87,7 @@ <h1>Add files or directories here</h1>
         </div>
 
         <div id="mainDiv" class="w3-row">
-            <div id="leftPanel" class="w3-half w3-light-grey w3-border-right w3-border-top w3-border-deep-purple" style="border-width: 2px; height:100%">
+            <div id="leftPanel" class="w3-half w3-light-grey w3-border-right w3-border-top w3-border-deep-purple" style="border-width: 2px;">
               <div class="w3-border-bottom w3-border-deep-purple">
                 <div class="codeNavigation w3-bar">
                   <!-- navigating elements inside -->
@@ -116,7 +116,7 @@ <h1>Add files or directories here</h1>
               </div>
             </div>
 
-            <div id="rightPanel" class="w3-half w3-light-grey w3-border-top w3-border-deep-purple" style="height:100%">
+            <div id="rightPanel" class="w3-half w3-light-grey w3-border-top w3-border-deep-purple">
               <div class="w3-border-bottom w3-border-deep-purple">
                 <div class="codeNavigation w3-bar">
                   <!-- navigating elements inside -->

diff --git a/webpack.config.js b/webpack.config.js
@@ -82,7 +82,7 @@ module.exports = () => {
             minimize: true,
             minimizer: [
                 new TerserPlugin({
-                    terserOptions: {keep_classnames: true}
+                    terserOptions: {keep_classnames: true} // important because of Classes in heta-compiler, fix there first
                 }),
                 new CssMinimizerPlugin(),
             ],