feat: Adjust HTML Element Sizes Based on Window Size

DVL-Sejong · May 29, 2024 · 4fa2bea · 4fa2bea
1 parent 983748e
commit 4fa2bea
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
@@ -161,5 +162,6 @@
     <script src="static/js/article.js"></script>
     <script src="static/js/clickbait.js"></script>
     <script src="static/js/result.js"></script>
+    <script src="static/js/window.js"></script>
 </body>
 </html>
diff --git a/static/js/window.js b/static/js/window.js
@@ -0,0 +1,20 @@
+function scaleDashboard() {
+    const dashboard = document.querySelector('.dashboard');
+    const layoutSidenavContent = document.querySelector('#layoutSidenav_content');
+
+    const scaleX = layoutSidenavContent.offsetWidth / 1330;
+    const scaleY = layoutSidenavContent.offsetHeight / 1045;
+    const scale = Math.min(scaleX, scaleY);
+
+    if (layoutSidenavContent.offsetWidth < 1680) {
+        dashboard.style.transform = `scale(${scale})`;
+    }
+    else {
+        dashboard.style.transform = `scale(${scaleX*0.99}, ${scaleY})`;
+    }
+
+    dashboard.style.transformOrigin = '0 0px';
+}
+
+window.addEventListener('resize', scaleDashboard);
+scaleDashboard();