Refine install list and responsive scaling

app/assets/js/scripts/uicore.js

@@ -35,6 +35,69 @@ remote.getCurrentWebContents().on('devtools-opened', () => {
 webFrame.setZoomLevel(0)
 webFrame.setVisualZoomLevelLimits(1, 1)
 
+const BASE_WINDOW_WIDTH = 1400
+const BASE_WINDOW_HEIGHT = 860
+
+let responsiveLayoutFrame = null
+
+function clamp(value, min, max){
+    return Math.min(Math.max(value, min), max)
+}
+
+function syncLaunchDetailWidths(){
+    const launchContent = document.getElementById('launch_content')
+    const launchDetails = document.getElementById('launch_details')
+    const launchButton = document.getElementById('launch_button')
+    const launchProgress = document.getElementById('launch_progress')
+    const launchDetailsRight = document.getElementById('launch_details_right')
+    const launchProgressLabel = document.getElementById('launch_progress_label')
+
+    if(!launchContent || !launchDetails || !launchButton || !launchProgress || !launchDetailsRight || !launchProgressLabel){
+        return
+    }
+
+    const launchContentWidth = launchContent.getBoundingClientRect().width
+    const launchButtonWidth = launchButton.getBoundingClientRect().width
+    const labelWidth = Math.max(64, Math.ceil(launchButtonWidth * 0.48))
+    const progressWidth = Math.max(220, Math.floor(launchContentWidth - labelWidth - 48))
+
+    launchDetails.style.maxWidth = `${Math.ceil(launchContentWidth)}px`
+    launchProgress.style.width = `${progressWidth}px`
+    launchDetailsRight.style.maxWidth = `${progressWidth}px`
+    launchProgressLabel.style.width = `${labelWidth}px`
+    launchProgressLabel.style.minWidth = `${labelWidth}px`
+    launchProgressLabel.style.maxWidth = `${labelWidth}px`
+}
+
+function applyResponsiveLayout(){
+    const scale = clamp(
+        Math.min(window.innerWidth / BASE_WINDOW_WIDTH, window.innerHeight / BASE_WINDOW_HEIGHT),
+        0.72,
+        1.45
+    )
+
+    webFrame.setZoomFactor(scale)
+    document.documentElement.style.setProperty('--launcher-scale', scale.toFixed(3))
+
+    window.requestAnimationFrame(() => {
+        syncLaunchDetailWidths()
+    })
+}
+
+function queueResponsiveLayout(){
+    if(responsiveLayoutFrame != null){
+        cancelAnimationFrame(responsiveLayoutFrame)
+    }
+    responsiveLayoutFrame = requestAnimationFrame(() => {
+        responsiveLayoutFrame = null
+        applyResponsiveLayout()
+    })
+}
+
+window.addEventListener('resize', () => {
+    queueResponsiveLayout()
+})
+
 // Initialize auto updates in production environments.
 let updateCheckListener
 if(!isDev){
@@ -174,20 +237,10 @@ document.addEventListener('readystatechange', function () {
         })
 
     } else if(document.readyState === 'complete'){
-
-        //266.01
-        //170.8
-        //53.21
-        // Bind progress bar length to length of bot wrapper
-        //const targetWidth = document.getElementById("launch_content").getBoundingClientRect().width
-        //const targetWidth2 = document.getElementById("server_selection").getBoundingClientRect().width
-        //const targetWidth3 = document.getElementById("launch_button").getBoundingClientRect().width
-
-        document.getElementById('launch_details').style.maxWidth = 266.01
-        document.getElementById('launch_progress').style.width = 170.8
-        document.getElementById('launch_details_right').style.maxWidth = 170.8
-        document.getElementById('launch_progress_label').style.width = 53.21
-        
+        queueResponsiveLayout()
+        setTimeout(() => {
+            queueResponsiveLayout()
+        }, 150)
     }
 
 }, false)
@@ -210,4 +263,4 @@ document.addEventListener('keydown', function (e) {
         let window = remote.getCurrentWindow()
         window.toggleDevTools()
     }
-})
+})