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