studio/integration
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

api/gaufre: make sure the popup is shown in the viewport

Browse Source 
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
This commit is contained in:
Emmanuel Pelletier
2024-05-07 22:11:54 +02:00
parent 087bc5a889
commit 63d34d2315
3 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/integration/src/dev/dev.tsx
View File

@@ -150,7 +150,11 @@ const routes = [
}} }}
> >
<div style={{ display: "flex", justifyContent: "space-between" }}> <div style={{ display: "flex", justifyContent: "space-between" }}>
<h1>Test de la Gaufre</h1> <h1>À droite</h1>
<Gaufre />
</div>
<div style={{ display: "flex" }}>
<h1>À gauche</h1>
<Gaufre /> <Gaufre />
</div> </div>
<p> <p>

5
website/public/api/v1/gaufre.js
View File

@@ -78,6 +78,8 @@
const getPopupPositionStyle = (button) => { const getPopupPositionStyle = (button) => {
const buttonCoords = button.getBoundingClientRect() const buttonCoords = button.getBoundingClientRect()
const isSmallScreen = window.innerWidth <= 400 const isSmallScreen = window.innerWidth <= 400
let leftPos = buttonCoords.right - 304 + document.documentElement.scrollLeft
leftPos = leftPos < 5 ? 5 : leftPos
return ` return `
position: absolute !important; position: absolute !important;
top: ${buttonCoords.top + buttonCoords.height + 8}px; top: ${buttonCoords.top + buttonCoords.height + 8}px;
@@ -89,7 +91,8 @@
margin: 0 auto; margin: 0 auto;
` `
: ` : `
left: ${buttonCoords.right - 304 + document.documentElement.scrollLeft}px;` left: ${leftPos}px;
width: 304px;`
} }
border: 0 !important; border: 0 !important;
display: block !important; display: block !important;

4
website/src/components/GaufrePage.astro
View File

@@ -17,7 +17,7 @@ const { services } = Astro.props
<title>Services de La Suite numérique</title> <title>Services de La Suite numérique</title>
</head> </head>
<body> <body>
<div id="lagaufre-popup" class="lagaufre"> <div class="lagaufre">
<style is:inline> <style is:inline>
@font-face { @font-face {
font-family: "La Gaufre"; font-family: "La Gaufre";
@@ -50,7 +50,7 @@ const { services } = Astro.props
margin: 0 0 0.5rem !important; margin: 0 0 0.5rem !important;
background-color: #01018fcc !important; background-color: #01018fcc !important;
padding: 3px !important; padding: 3px !important;
width: 19rem !important; width: 100% !important;
border-radius: 8px !important; border-radius: 8px !important;
filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)) !important; filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)) !important;
overflow: hidden !important; overflow: hidden !important;