63d34d2315
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
214 lines
6.7 KiB
Plaintext
214 lines
6.7 KiB
Plaintext
---
|
|
/**
|
|
* this page is meant to be directly included on a service page via the gaufre script tag
|
|
*
|
|
* This is not rendered in an iframe! it's included directly in the host page with a fetch request.
|
|
* Every css rule is scoped and marked as important to avoid style conflicts with the host page.
|
|
*/
|
|
import { Image } from "astro:assets"
|
|
const logos = import.meta.glob<{ default: ImageMetadata }>("/src/assets/logos/*.{svg,png,jpg}")
|
|
const { services } = Astro.props
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Services de La Suite numérique</title>
|
|
</head>
|
|
<body>
|
|
<div class="lagaufre">
|
|
<style is:inline>
|
|
@font-face {
|
|
font-family: "La Gaufre";
|
|
src: url("/fonts/Marianne-Regular-subset.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "La Gaufre fallback";
|
|
src: local("Arial");
|
|
ascent-override: 103.16%;
|
|
descent-override: 23.35%;
|
|
line-gap-override: 0%;
|
|
size-adjust: 109.64%;
|
|
}
|
|
|
|
.lagaufre,
|
|
:where(.lagaufre) * {
|
|
all: revert !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.lagaufre {
|
|
height: 22rem !important;
|
|
max-height: 22rem !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: 3px !important;
|
|
width: 100% !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;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.lagaufre-sr-only {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
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;
|
|
}
|
|
|
|
.lagaufre-service {
|
|
position: relative !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
padding: 1rem 2rem !important;
|
|
border-top: 1px solid transparent !important;
|
|
border-bottom: 1px solid transparent !important;
|
|
}
|
|
|
|
.lagaufre-service a {
|
|
background-image: none !important;
|
|
outline-width: 0 !important;
|
|
}
|
|
|
|
.lagaufre-service a::before {
|
|
content: "" !important;
|
|
display: block !important;
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
right: 0 !important;
|
|
bottom: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
outline-offset: 2px !important;
|
|
outline-style: inherit !important;
|
|
outline-color: inherit !important;
|
|
outline-width: 2px !important;
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
.lagaufre-service:hover,
|
|
.lagaufre-service:focus-within {
|
|
background-color: #f0f0fa !important;
|
|
border-top: 1px solid #8989cd !important;
|
|
border-bottom: 1px solid #8989cd !important;
|
|
}
|
|
|
|
.lagaufre-service__icon {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
}
|
|
|
|
.lagaufre-service__name {
|
|
margin-left: 1.5rem !important;
|
|
text-decoration: none !important;
|
|
color: #161616 !important;
|
|
}
|
|
|
|
.lagaufre-service__name:focus {
|
|
outline: 0 !important;
|
|
}
|
|
|
|
.lagaufre-scrollbars {
|
|
scrollbar-width: thin !important;
|
|
scrollbar-color: #aaa transparent !important;
|
|
}
|
|
|
|
.lagaufre-scrollbars::-webkit-scrollbar {
|
|
width: 5px !important;
|
|
height: 5px !important;
|
|
}
|
|
|
|
.lagaufre-scrollbars::-webkit-scrollbar-track {
|
|
background: 0 0 !important;
|
|
}
|
|
|
|
.lagaufre-scrollbars::-webkit-scrollbar-thumb {
|
|
background-color: #ddd !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
.lagaufre-scrollbars:not(:hover, :focus) {
|
|
scrollbar-color: transparent transparent !important;
|
|
}
|
|
|
|
.lagaufre-scrollbars:not(:hover, :focus):-webkit-scrollbar-thumb {
|
|
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>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|