From 63d34d23154648838c832b8e91677e9fe4700dc8 Mon Sep 17 00:00:00 2001 From: Emmanuel Pelletier Date: Tue, 7 May 2024 22:11:54 +0200 Subject: [PATCH] api/gaufre: make sure the popup is shown in the viewport small test that anchors the popup to the left of the viewport, this quickly fixes the popup going out of viewport if the Gaufre button is used on the left of a header bar --- packages/integration/src/dev/dev.tsx | 6 +++++- website/public/api/v1/gaufre.js | 5 ++++- website/src/components/GaufrePage.astro | 4 ++-- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/integration/src/dev/dev.tsx b/packages/integration/src/dev/dev.tsx index b449ac8..67ec198 100644 --- a/packages/integration/src/dev/dev.tsx +++ b/packages/integration/src/dev/dev.tsx @@ -150,7 +150,11 @@ const routes = [ }} >
-

Test de la Gaufre

+

À droite

+ +
+
+

À gauche

diff --git a/website/public/api/v1/gaufre.js b/website/public/api/v1/gaufre.js index 8601ca1..5b12892 100644 --- a/website/public/api/v1/gaufre.js +++ b/website/public/api/v1/gaufre.js @@ -78,6 +78,8 @@ const getPopupPositionStyle = (button) => { const buttonCoords = button.getBoundingClientRect() const isSmallScreen = window.innerWidth <= 400 + let leftPos = buttonCoords.right - 304 + document.documentElement.scrollLeft + leftPos = leftPos < 5 ? 5 : leftPos return ` position: absolute !important; top: ${buttonCoords.top + buttonCoords.height + 8}px; @@ -89,7 +91,8 @@ margin: 0 auto; ` : ` - left: ${buttonCoords.right - 304 + document.documentElement.scrollLeft}px;` + left: ${leftPos}px; + width: 304px;` } border: 0 !important; display: block !important; diff --git a/website/src/components/GaufrePage.astro b/website/src/components/GaufrePage.astro index 7a4ca34..245aa38 100644 --- a/website/src/components/GaufrePage.astro +++ b/website/src/components/GaufrePage.astro @@ -17,7 +17,7 @@ const { services } = Astro.props Services de La Suite numérique -

+