style(webpage): improved split handling for editor and configure view

SoftVarE-Group · Dec 5, 2023 · 62ca60b · 62ca60b
1 parent 8026b7b
commit 62ca60b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 35 deletions.
diff --git a/WebSocketClient/index.html b/WebSocketClient/index.html
@@ -5,37 +5,14 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
         <link rel="stylesheet" href="style.css">
         <title>UVL Playground</title>
-        <style>
-            #iframeContainer {
-              height: 1000px;
-              width: '100%';
-              display: none;
-            }
-
-            iframe {
-              height: 100%;
-              width: 100%;
-              border: none; /* Remove iframe border */
-            }
-
-            #embeddedContentContainer {
-      height: 1000px;
-      width: 10000px;
-    }
-          </style>
     </head>
     <body>
     <div class="header">
         <h1>UVL Playground</h1>
         <h2 id="connection" style="color: red;"></h2>
     </div>
-    <div class="flex-container">
-        <div class="container">
-            <div id="container" class="editor"></div>
-        </div>
-        <div id="iframeContainer" class="config-view">
-            <iframe id="myIframe" title="Config"></iframe>
-        </div>
+    <div id="flex-container" class="flex-container">
+        <div id="container" class="editor"></div>
     </div>
 
     <div class="graph"></div>

diff --git a/WebSocketClient/src/main.ts b/WebSocketClient/src/main.ts
@@ -86,9 +86,14 @@ function displayConfigureView(configUri: string) {
         protocol = 'https';
     }
     const newUrl: string = `${protocol}://${config.languageServerHostName}:${url.port}${url.pathname}`;
-    const iframeContainer: any = document.getElementById('iframeContainer');
-    const myIframe: any = document.getElementById('myIframe');
-    iframeContainer.style.display = 'block';
+
+    let myIframe: HTMLIFrameElement | null = document.getElementById('config-view') as HTMLIFrameElement;
+    if(!myIframe){
+        myIframe = document.createElement('iframe') as HTMLIFrameElement;
+        myIframe.id = "config-view";
+        const iframeContainer: any = document.getElementById('flex-container');
+        iframeContainer.appendChild(myIframe);
+    }
     myIframe.src = newUrl;
 }
 

diff --git a/WebSocketClient/style.css b/WebSocketClient/style.css
@@ -11,9 +11,8 @@ body {
 }
 
 .container {
-  width: 40%;
-  padding: 0 40px 0 0;
-  margin: 0 auto;
+  display: flex;
+  width: 50%;
   height: 100%
 }
 
@@ -25,8 +24,8 @@ body {
   text-align: center;
 }
 
-#iframeContainer {
-  min-width: 30%;
+iframe {
+  border: none;
 }
 
 .graph {
@@ -37,8 +36,13 @@ body {
 
 .flex-container {
   display: flex;
-  width: 100%;
   height: 75%;
+  justify-content: space-around;
+}
+
+iframe {
+  flex-grow: 1;
+  max-width: 50%;
 }
 
 h1 {
@@ -52,7 +56,8 @@ h1 {
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-  width:100%;
+  min-width: 50%;
+  max-width: 100%;
   height:80ch;
   border:1px solid grey;
   margin-left: 10px;