From 55a7dc738b44137533a4e8624eb635ea2a1054b1 Mon Sep 17 00:00:00 2001
From: beauredj <joseph.beau-reder@univ-grenoble-alpes.fr>
Date: Mon, 25 Nov 2024 14:31:54 +0100
Subject: [PATCH] Better version for phone/tablet

---
 Website/index.html |  3 ---
 Website/index.js   | 15 ++++++++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/Website/index.html b/Website/index.html
index 1e404c8..4b61a79 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -35,9 +35,6 @@
             </ul>
         </div>
     </nav>
-    <button id="toggleButton" style="position: fixed; top: 10px; right: 10px; z-index: 2000;">
-        Hide SVG
-      </button>
     <svg id="chart"></svg>
     <div id="infoCard" class="info-card" style="display: none;"></div>
     <div id="groupInfoCard" class="group-info-card"></div>
diff --git a/Website/index.js b/Website/index.js
index a39e3ad..a3e9503 100644
--- a/Website/index.js
+++ b/Website/index.js
@@ -30,7 +30,7 @@ function normalizeAspectRatio(width, height, targetRatio = 16 / 9, tolerance = 0
 
 
 // Usage in your code
-const { width, height, verticalOffset } = normalizeAspectRatio(window.innerWidth, window.innerHeight);
+const { width, height } = normalizeAspectRatio(window.innerWidth, window.innerHeight);
 
 
 
@@ -137,10 +137,19 @@ const simulation = d3.forceSimulation(nodes)
     .force("y", d3.forceY().y(d => d.y).strength(1))
     .on("tick", ticked);
 
-    const svg = d3.select("#chart")
+
+// Calculate horizontal offset for the viewBox
+const svgHorizontalOffset = window.innerWidth < 1000 ? -width * 0.08 : 0;
+
+// Calculate vertical offset for the viewBox
+const verticalOffset = window.innerWidth < 1000 ? 180 : 0; // 180 for smartphones, 0 otherwise
+
+
+
+const svg = d3.select("#chart")
     .attr("width", window.innerWidth)  // Full screen width
     .attr("height", window.innerHeight)  // Full screen height
-    .attr("viewBox", `0 ${verticalOffset} ${width} ${height}`)
+    .attr("viewBox", `${svgHorizontalOffset} ${verticalOffset} ${width} ${height}`)
     .style("background-color", backgroundColor);
 
 // Add zoom behavior
-- 
GitLab