fix: search for desktop too

frontend/src/components/Search.js

@@ -15,14 +15,16 @@ export default function Search({ handlePlaceSelection }) {
  <div
  iframe={iframe.toString()}
  className={[
- "relative -mx-4 flex flex-col items-center justify-start bg-gradient-to-r from-[#d1edff] via-[#f8fafd] to-[#d6eeff] px-4",
+ "relative box-border flex w-full flex-col items-center justify-start bg-gradient-to-r from-[#d1edff] via-[#f8fafd] to-[#d6eeff]",
  // iframe ? "min-h-[50rem]" : "min-h-screen",
  ].join(" ")}
  >
- <section className="relative flex w-full flex-col pb-6">
- <CloudAnimated />
- <TitleAnimated />
- <div className="relative mb-4 px-2">
+ <section className="relative mx-auto flex w-full max-w-6xl flex-col pb-6 xl:pt-24">
+ <div className="flex flex-col px-6 xl:flex-row-reverse xl:items-start xl:justify-center xl:px-0">
+ <CloudAnimated />
+ <TitleAnimated />
+ </div>
+ <div className="relative mb-4 px-6 xl:my-8 xl:px-0">
  <SearchInput
  handlePlaceSelection={(place) => {
  if (handlePlaceSelection) {

frontend/src/components/base/Section.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { forwardRef } from "react";
 import styled from "styled-components";
 
-const SectionStyled= styled.section`
+const SectionStyled = styled.section`
  position: relative;
  width: ${(props) => (props.small ? 35.5 : props.medium ? 48 : 73)}rem;
  max-width: 100%;
@@ -29,6 +29,8 @@ Section.Subtitle = styled.h3`
  }
 `;
 
-export default function Section(props) {
- return <SectionStyled {...props} />;
+function Section(props, ref) {
+ return <SectionStyled {...props} ref={ref} />;
 }
+
+export default forwardRef(Section);

frontend/src/components/layout/Web.js

@@ -12,7 +12,7 @@ import UXProvider from "components/providers/UXProvider";
 import UserProvider from "components/providers/UserProvider";
 import EmbedWrapper from "components/wrappers/EmbedWrapper";
 import ShareWrapper from "components/wrappers/ShareWrapper";
-import useIframe, { IFrameProvider } from "hooks/useIframe";
+import useIframe from "hooks/useIframe";
 import Footer from "./Footer";
 import Header from "./Header";
 import Seo from "./web/Seo";
@@ -22,17 +22,15 @@ const queryClient = new QueryClient();
 function Providers({ children }) {
  return (
  <QueryClientProvider client={queryClient}>
- <IFrameProvider>
- <UXProvider>
- <StyleProvider>
- <MDXProvider>
- <UserProvider>
- <ModalProvider>{children}</ModalProvider>
- </UserProvider>
- </MDXProvider>
- </StyleProvider>
- </UXProvider>
- </IFrameProvider>
+ <UXProvider>
+ <StyleProvider>
+ <MDXProvider>
+ <UserProvider>
+ <ModalProvider>{children}</ModalProvider>
+ </UserProvider>
+ </MDXProvider>
+ </StyleProvider>
+ </UXProvider>
  </QueryClientProvider>
  );
 }
@@ -43,7 +41,7 @@ function App({ children }) {
  <>
  <div className={iframe ? "" : "min-h-screen"}>
  <Header />
- <main className="flex-1 px-4" role="main">
+ <main className="w-full flex-1" role="main">
  {children}
  </main>
  </div>

frontend/src/components/search/CloudAnimated.js

@@ -37,35 +37,41 @@ const rain = keyframes`
  }
 `;
 const Wrapper = styled.svg`
- margin-left: calc(100% - 7rem);
+ // margin-left: calc(100% - 7rem);
+ transform: translateX(5rem);
  width: 14rem;
  height: auto;
  cursor: ${(props) => (props.animated ? "none" : "pointer")};
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 
  ${(props) => props.theme.mq.medium} {
  margin-left: calc(50% - 2.275rem);
+ transform: translateX(0);
  margin-right: auto;
  width: 10rem;
  }
 `;
 const Bolt = styled.path`
  fill: #fffd53 !important;
  opacity: 0;
- animation: ${(props) => (props.animated && props.animation === 1 ? bolt : "")} 1500ms;
+ animation: ${(props) => (props.animated && props.animation === 1 ? bolt : "")}
+ 1500ms;
 `;
 const Raindrop = styled.path`
  opacity: 0;
- animation: ${(props) => (props.animated && props.animation === 2 ? rain : "")} 1000ms;
+ animation: ${(props) => (props.animated && props.animation === 2 ? rain : "")}
+ 1000ms;
  animation-delay: ${(props) => props.index * 300}ms;
  fill: ${(props) => props.theme.colors.main};
 `;
 const Ray = styled.path`
  stroke-dasharray: ${(props) => props.length * 2};
  stroke-dashoffset: ${(props) =>
- props.animated && props.animation === 3 ? -props.length * 2 : props.length * 2};
- transition: stroke-dashoffset ${(props) => (props.animated ? 1700 : 0)}ms ease-out
- ${(props) => props.index * 50}ms;
+ props.animated && props.animation === 3
+ ? -props.length * 2
+ : props.length * 2};
+ transition: stroke-dashoffset ${(props) => (props.animated ? 1700 : 0)}ms
+ ease-out ${(props) => props.index * 50}ms;
 `;
 export default function Cloud() {
  const [animated, setAnimated] = useState(false);
@@ -77,7 +83,9 @@ export default function Cloud() {
  onClick={() => {
  window._paq?.push(["trackEvent", "Misc", "Nuage"]);
  if (!animated) {
- setAnimation((prevAnimation) => (prevAnimation < 3 ? prevAnimation + 1 : 1));
+ setAnimation((prevAnimation) =>
+ prevAnimation < 3 ? prevAnimation + 1 : 1
+ );
  setAnimated(true);
  setTimeout(() => setAnimated(false), 1900);
  }
@@ -86,7 +94,8 @@ export default function Cloud() {
  width="127"
  height="89"
  viewBox="0 0 127 89"
- fill="none">
+ fill="none"
+ >
  <Bolt
  animated={animated}
  animation={animation}
@@ -153,7 +162,8 @@ export default function Cloud() {
  x="22"
  y="-11"
  width="119"
- height="64">
+ height="64"
+ >
  <path
  d="M50.8389 42.0677C52.5677 32.6373 45.3024 23.9994 35.7976 23.9994C30.3051 23.9994 25.3901 26.9131 22.6816 31.4231L39.0007 -10.5L139.5 -7.5L140.001 52.8861L50.8389 42.0677Z"
  fill="white"

frontend/src/components/search/SearchInput.js

@@ -39,8 +39,8 @@ export default function SearchInput({
  return (
  <form
  className={[
- "z-[100] w-[21rem] border border-b-2 border-main/5 border-b-main bg-white/30 text-[2rem] focus:border-main/20",
- "max-w-full xl:left-auto xl:max-w-none xl:translate-x-0",
+ "z-[100] mx-auto w-full border border-b-2 border-main/5 border-b-main bg-white/30 text-[2rem] focus:border-main/20",
+ "max-w-xs xl:left-auto xl:mx-0 xl:max-w-2xl xl:translate-x-0",
  "text-xl xl:text-base",
  className,
  ]

frontend/src/components/search/SuggestionsButtons.js

@@ -19,18 +19,20 @@ const suggestions = [
 
 export default function SuggestionsButtons() {
  return (
- <div className="-mx-4 overflow-hidden">
- <ul className="m-0 mx-auto flex max-w-xl cursor-all-scroll gap-3 overflow-x-scroll pb-4 xl:mx-0 xl:flex-wrap xl:justify-start [&_li]:list-none">
+ <div className="overflow-hidden xl:pb-40">
+ <ul className="m-0 mx-auto flex gap-3 overflow-x-scroll pb-4 sm:max-w-sm sm:flex-wrap sm:justify-center sm:overflow-auto xl:mx-0 xl:max-w-2xl xl:justify-start xl:pb-0 [&_li]:list-none">
  {suggestions.map((suggestion, index) => {
  return (
- <li key={suggestion.slug}>
+ <li
+ key={suggestion.slug}
+ className={[
+ "inline-flex w-auto rounded-full border-2 border-main",
+ index === 0 ? "ml-6 sm:ml-0" : "",
+ index === suggestions.length - 1 ? "mr-6 sm:mr-0" : "",
+ ].join(" ")}
+ >
  <MagicLink
- className={[
- "w-auto rounded-full border-2 border-main px-4 py-1 text-xs xl:text-base",
- index === 0 ? "ml-6" : "",
- index === suggestions.length - 1 ? "mr-6" : "",
- ].join(" ")}
- hollow
+ className="px-4 py-1 text-xs xl:text-base"
  to={suggestion.slug}
  onClick={() => {
  window?._paq?.push([

frontend/src/components/search/TitleAnimated.js

@@ -165,7 +165,7 @@ export default function TitleAnimated() {
  `niveau de risque radon`,
  ];
  return (
- <h1 className="mb-4 flex flex-wrap justify-center text-[6.5vw] sm:text-[2.5rem] xl:justify-start">
+ <h1 className="mb-4 flex flex-wrap justify-center text-[6.5vw] sm:text-[2.5rem] xl:justify-start xl:text-6xl xl:font-bold">
  <VisuallyHidden>
  Découvrez la pollution de l’air, le risque d’allergie aux pollens, la
  vigilance météo, le rayonnement UV, la qualité des eaux de baignade, le

frontend/src/hooks/useIframe.js

@@ -7,15 +7,18 @@ export function IFrameProvider(props) {
  useEffect(() => {
  setIframe(window.location.search.includes("iframe"));
  }, []);
+ console.log("iframe context", iframe);
  return (
  <IFrameContext.Provider value={iframe}>
  {props.children}
  </IFrameContext.Provider>
  );
 }
 
-export default function useIframe() {
+export default function useIframe(debug = false) {
  const iframe = useContext(IFrameContext);
 
+ if (debug) console.log("iframe", iframe);
+
  return iframe;
 }

frontend/src/pages/index.js

@@ -4,16 +4,15 @@ import About from "components/About";
 import Data from "components/Data";
 import Search from "components/Search";
 import Web from "components/layout/Web";
-import useIframe from "hooks/useIframe";
-import Newsletter from "../components/Newsletter";
-
-export default function Index() {
- const iframe = useIframe();
+import Newsletter from "components/Newsletter";
+import useIframe, { IFrameProvider } from "hooks/useIframe";
 
+function App() {
+ const isIframe = useIframe();
  return (
  <Web>
  <Search />
- {!iframe && (
+ {!isIframe && (
  <>
  <Newsletter />
  <Data />
@@ -23,3 +22,11 @@ export default function Index() {
  </Web>
  );
 }
+
+export default function Index() {
+ return (
+ <IFrameProvider>
+ <App />
+ </IFrameProvider>
+ );
+}