gaufre: fix popup placement issues, simplify styling
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
@@ -42,22 +42,62 @@ const { services } = Astro.props
|
||||
}
|
||||
|
||||
.lagaufre {
|
||||
height: 22rem !important;
|
||||
max-height: 22rem !important;
|
||||
--lagaufre-border-color: #01018f !important;
|
||||
--lagaufre-bg-color: #fff !important;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
font-size: 100% !important;
|
||||
font-family: "La Gaufre", "La Gaufre fallback", BlinkMacSystemFont, "Segoe UI",
|
||||
"Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
|
||||
margin: 0 0 0.5rem !important;
|
||||
background-color: #01018fcc !important;
|
||||
padding: 2px !important;
|
||||
width: 100% !important;
|
||||
/* border-radius: 8px !important; */
|
||||
margin: 0 0 8px !important;
|
||||
border: 2px solid var(--lagaufre-border-color) !important;
|
||||
background-color: var(--lagaufre-bg-color) !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;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
[data-fr-scheme="dark"] .lagaufre {
|
||||
background-color: #8585f6 !important;
|
||||
--lagaufre-bg-color: #1e1e1e !important;
|
||||
--lagaufre-border-color: #8585f6 !important;
|
||||
}
|
||||
|
||||
.lasuite--gaufre-borderless .lagaufre {
|
||||
border-color: var(--lagaufre-bg-color) !important;
|
||||
filter: none !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.lasuite--gaufre-modal-opened body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.lasuite--gaufre-modal .lagaufre {
|
||||
filter: none !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.lagaufre-close-button-container {
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.lagaufre-close-button {
|
||||
display: none !important;
|
||||
padding: 8px !important;
|
||||
margin: 4px !important;
|
||||
border: 1px solid rgb(221, 221, 221) !important;
|
||||
color: rgb(0, 0, 145) !important;
|
||||
font-weight: bold !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.lasuite--gaufre-modal .lagaufre-close-button {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.lagaufre-sr-only {
|
||||
@@ -73,31 +113,20 @@ const { services } = Astro.props
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.lagaufre-border {
|
||||
height: 100% !important;
|
||||
/* border-radius: 6px !important; */
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.lagaufre-list {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
list-style: none !important;
|
||||
/* border-radius: 2px !important; */
|
||||
background-color: white !important;
|
||||
height: 100% !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
[data-fr-scheme="dark"] .lagaufre-list {
|
||||
background-color: #1e1e1e !important;
|
||||
}
|
||||
|
||||
.lagaufre-service {
|
||||
position: relative !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 1rem 2rem !important;
|
||||
padding: 16px 32px !important;
|
||||
border-top: 1px solid transparent !important;
|
||||
border-bottom: 1px solid transparent !important;
|
||||
}
|
||||
@@ -139,6 +168,7 @@ const { services } = Astro.props
|
||||
}
|
||||
|
||||
.lagaufre-service__icon {
|
||||
flex-shrink: 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
width: 40px !important;
|
||||
@@ -157,7 +187,7 @@ const { services } = Astro.props
|
||||
}
|
||||
|
||||
.lagaufre-service__name {
|
||||
margin-left: 1.5rem !important;
|
||||
margin-left: 24px !important;
|
||||
text-decoration: none !important;
|
||||
color: #161616 !important;
|
||||
}
|
||||
@@ -197,47 +227,50 @@ const { services } = Astro.props
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
<div class="lagaufre-border">
|
||||
<h1 id="lagaufre-title" class="lagaufre-sr-only">
|
||||
Liste des services de La Suite numérique
|
||||
</h1>
|
||||
<ul
|
||||
class="lagaufre-list lagaufre-scrollbars js-lagaufre-keyboard-anchor"
|
||||
aria-labelledby="lagaufre-title"
|
||||
tabindex="-1"
|
||||
>
|
||||
{
|
||||
services
|
||||
.filter(({ enabled }) => !!enabled)
|
||||
.map(({ id, name, url }, i) => {
|
||||
const logo =
|
||||
logos[`/src/assets/logos/${id}.svg`] ||
|
||||
logos[`/src/assets/logos/${id}.jpg`] ||
|
||||
logos[`/src/assets/logos/${id}.png`]
|
||||
return (
|
||||
<li>
|
||||
<div class="lagaufre-service lagaufre-enlarge-link">
|
||||
<div class="lagaufre-service__icon">
|
||||
{!!logo ? (
|
||||
<Image src={logo()} width="40" height="40" alt="" loading="eager" />
|
||||
) : null}
|
||||
</div>
|
||||
<a
|
||||
target="_parent"
|
||||
class="lagaufre-service__name"
|
||||
href={url}
|
||||
id={`lagaufre-service-${id}`}
|
||||
{...((i === 0 && { autofocus: true }) || {})}
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
<h1 id="lagaufre-title" class="lagaufre-sr-only">Liste des services de La Suite numérique</h1>
|
||||
<div class="lagaufre-close-button-container">
|
||||
<button type="button" class="lagaufre-close-button">
|
||||
<span class="lagaufre-sr-only">Fermer la liste des services</span>
|
||||
<span aria-hidden="true">✕</span>
|
||||
<span>Fermer</span>
|
||||
</button>
|
||||
</div>
|
||||
<ul
|
||||
class="lagaufre-list lagaufre-scrollbars js-lagaufre-keyboard-anchor"
|
||||
aria-labelledby="lagaufre-title"
|
||||
tabindex="-1"
|
||||
>
|
||||
{
|
||||
services
|
||||
.filter(({ enabled }) => !!enabled)
|
||||
.map(({ id, name, url }, i) => {
|
||||
const logo =
|
||||
logos[`/src/assets/logos/${id}.svg`] ||
|
||||
logos[`/src/assets/logos/${id}.jpg`] ||
|
||||
logos[`/src/assets/logos/${id}.png`]
|
||||
return (
|
||||
<li>
|
||||
<div class="lagaufre-service lagaufre-enlarge-link">
|
||||
<div class="lagaufre-service__icon">
|
||||
{!!logo ? (
|
||||
<Image src={logo()} width="40" height="40" alt="" loading="eager" />
|
||||
) : null}
|
||||
</div>
|
||||
<a
|
||||
target="_parent"
|
||||
class="lagaufre-service__name"
|
||||
href={url}
|
||||
id={`lagaufre-service-${id}`}
|
||||
{...((i === 0 && { autofocus: true }) || {})}
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -167,6 +167,31 @@ burger : aucun HTML n'est proposé pour ça, tant il dépend de votre site.
|
||||
même comportement sur votre propre implémentation, vous pouvez vous appuyer sur la présence de la
|
||||
classe `lasuite--gaufre-loaded` sur la balise `html`.
|
||||
|
||||
### Popup customisée
|
||||
|
||||
Au delà du bouton, suivant votre stack technique, vous voudrez peut-être utiliser un composant de
|
||||
popup déjà en place dans votre app. Dans ce cas, une solution est de ne pas charger le script
|
||||
proposé, et de gérer vous-même le comportement du bouton.
|
||||
|
||||
Le contenu à afficher dans la popup est requêtable directement sur
|
||||
[{import.meta.env.PUBLIC_LASUITE_API_URL}/api/v1/gaufre](/api/v1/gaufre). La liste est déjà
|
||||
construite pour vous en HTML/CSS car son affichage est amené à évoluer au fil du temps suivant le
|
||||
nombre de services. Il n'est pas souhaitable de demander à chaque service de La Suite de devoir se
|
||||
mettre à jour régulièrement. L'idée est donc de requêter cette URL, récupérer son `<body>` et de
|
||||
l'intégrer dans votre DOM dans le contenu de votre composant de popup.
|
||||
|
||||
Appliquez la classe `lasuite--gaufre-borderless` sur votre balise `html` ou `body`. Ceci fera que la
|
||||
liste fournie via l'URL ci-dessus, une fois dans votre DOM, n'affichera pas de bordure bleue avec
|
||||
une ombre, et s'intégrera mieux dans votre composant de popup.
|
||||
|
||||
:::caution
|
||||
|
||||
Il est vivement déconseillé de surcharger les CSS du contenu de la popup de la Gaufre, car les
|
||||
contenus de la popup et leur disposition visuelle évoluent avec le temps.
|
||||
[Contactez-nous](/about/help) si vous avez des besoins particuliers par rapport à votre service.
|
||||
|
||||
:::
|
||||
|
||||
## Exemple
|
||||
|
||||
[La Gaufre : exemple HTML](/examples/gaufre/html).
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user