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

gaufre: fix popup placement issues, simplify styling

Browse Source 
this is done following up Tchap integration.

- the popup placement script was really dumb and assumed the gaufre
button was always placed at the top right of the page. Tchap can't do
that and uses it at the bottom left. Now the popup places itself
correctly wherever the button is on the page.
On mobile now we have a "modal" mode for the popup where it takes all
the viewport.
- Tchap uses the gaufre inside their own popup component. This was not
something we handled before. Now you can set up a
'lasuite--gaufre-borderless' class on your html or body tag so that the
gaufre doesn't render its box shadow or blue border, making it easier to
integrate in a already made popup.
This commit is contained in:
Emmanuel Pelletier
2024-06-14 15:21:40 +02:00
parent b2b8588ac6
commit 62b74a5445
4 changed files with 246 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
website/src/pages/examples/gaufre/html.astro
View File

@@ -7,6 +7,7 @@ import gaufreCssUrl from "@gouvfr-lasuite/integration/dist/css/gaufre.css?url"
<head>
<meta charset="UTF-8" />
<title>Exemple intégration bouton La Gaufre - La Suite numérique</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style is:inline>
.wrapper {
margin: 2rem auto;
@@ -30,6 +31,12 @@ import gaufreCssUrl from "@gouvfr-lasuite/integration/dist/css/gaufre.css?url"
.example > p {
margin-top: 0;
}
.example > .footer {
display: flex;
gap: 1em;
justify-content: flex-start;
font-style: italic;
}
</style>
<!-- code à ajouter pour faire marcher le bouton Gaufre -->
@@ -60,6 +67,13 @@ import gaufreCssUrl from "@gouvfr-lasuite/integration/dist/css/gaufre.css?url"
</button>
<!-- fin du code à copier -->
</div>
<button
type="button"
class="lasuite-gaufre-btn lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn"
title="Les services de La Suite numérique"
>
Les services de La Suite numérique
</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac diam a libero posuere
ornare facilisis in mi. Nullam eu vulputate augue, in auctor nibh. Praesent ac tempus dui.
@@ -88,6 +102,17 @@ import gaufreCssUrl from "@gouvfr-lasuite/integration/dist/css/gaufre.css?url"
Vestibulum feugiat pulvinar fermentum. Vivamus imperdiet dapibus ornare. Donec venenatis,
lectus id faucibus tempus, sapien urna molestie augue, at egestas enim lectus quis nisi.
</p>
<div class="footer">
<button
type="button"
class="lasuite-gaufre-btn lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn"
title="Les services de La Suite numérique"
>
Les services de La Suite numérique
</button>
<p>la popup s'affiche correctement quelque soit la position du bouton dans la fenêtre</p>
</div>
</div>
</div>
</body>