From 62ca60b4554c02442d71988b77ac24f778bf62a1 Mon Sep 17 00:00:00 2001 From: JannisDommer Date: Tue, 5 Dec 2023 07:46:24 +0100 Subject: [PATCH] style(webpage): improved split handling for editor and configure view --- WebSocketClient/index.html | 27 ++------------------------- WebSocketClient/src/main.ts | 11 ++++++++--- WebSocketClient/style.css | 19 ++++++++++++------- 3 files changed, 22 insertions(+), 35 deletions(-) diff --git a/WebSocketClient/index.html b/WebSocketClient/index.html index 8b35b9e..4b5f151 100644 --- a/WebSocketClient/index.html +++ b/WebSocketClient/index.html @@ -5,37 +5,14 @@ UVL Playground -

UVL Playground

-
-
-
-
-
- -
+
+
diff --git a/WebSocketClient/src/main.ts b/WebSocketClient/src/main.ts index 2ae5158..edf64d4 100644 --- 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 index b2c21eb..768b2cf 100644 --- 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;