From a7414d30352580e5cde4ea67f73c6bbf74f06577 Mon Sep 17 00:00:00 2001 From: Andrew Cooks Date: Sun, 3 Aug 2025 16:04:59 +1000 Subject: [PATCH] feat(layout): improve responsive chart layout This commit introduces a more responsive layout for the charts. - The main container is now fluid, allowing the charts to use the full width of the screen. - On screens wider than 1920px, the Throughput and Top Talkers charts are displayed side-by-side. - A bug was fixed where the Top Talkers chart and its grid were not resizing correctly when the window size changed. --- html5-client/src/css/jittertrap.css | 18 ++++++++++++++++++ html5-client/src/html/index.tpl.html | 4 ++-- .../src/js/jittertrap-chart-toptalk.js | 9 +++++++-- 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/html5-client/src/css/jittertrap.css b/html5-client/src/css/jittertrap.css index 851a90a..47a9b74 100644 --- a/html5-client/src/css/jittertrap.css +++ b/html5-client/src/css/jittertrap.css @@ -120,3 +120,21 @@ footer a { color: #4682B4; } + +@media (min-width: 1920px) { + #chartsPanel .tab-content { + display: flex; + flex-direction: row; + } + + #tputPanel, #toptalkPanel { + display: block !important; + opacity: 1 !important; + flex: 0 0 50%; + max-width: 50%; + } + + #showTputPanel, #showTopTalkPanel { + display: none; + } +} diff --git a/html5-client/src/html/index.tpl.html b/html5-client/src/html/index.tpl.html index 8e3ad18..f8bcdfb 100644 --- a/html5-client/src/html/index.tpl.html +++ b/html5-client/src/html/index.tpl.html @@ -21,7 +21,7 @@ -
+
@@ -69,7 +69,7 @@
-