fix: very small screens (#222)

SocialGouv · Sep 20, 2023 · 1822a64 · 1822a64
1 parent 7caf0d9
commit 1822a64
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 21 deletions.
diff --git a/frontend/src/components/dashboard/indicators/Baignades.js b/frontend/src/components/dashboard/indicators/Baignades.js
@@ -90,7 +90,7 @@ export default function Baignades(props) {
             <>
               <div
                 className={[
-                  "flex w-full items-start justify-center gap-x-4",
+                  "flex w-full flex-col items-center justify-center gap-x-4 gap-y-2 xs:flex-row xs:items-start",
                   data?.baignades?.indice?.label === "Pas de sites"
                     ? "items-center md:min-h-[10rem]"
                     : "",

diff --git a/frontend/src/components/dashboard/indicators/IndiceAtmo.js b/frontend/src/components/dashboard/indicators/IndiceAtmo.js
@@ -68,7 +68,7 @@ export default function IndiceAtmo(props) {
           )}
           {!isLoading && !isError && (
             <>
-              <div className="flex w-full items-start justify-center gap-x-4">
+              <div className="flex w-full flex-col items-center justify-center gap-x-4 gap-y-2 xs:flex-row xs:items-start">
                 {!data?.indice_atmo?.advice?.main ? (
                   <p>Les données ne sont pas disponibles pour cette commune.</p>
                 ) : (
@@ -111,15 +111,15 @@ export default function IndiceAtmo(props) {
                   </>
                 )}
               </div>
-              <ul className="mb-0 mt-2 flex w-full justify-between">
+              <ul className="mx-auto mb-0 mt-2 flex flex-col justify-between xs:mx-0 xs:w-full xs:flex-row">
                 {data?.indice_atmo?.indice?.details?.map((element) => (
                   <li
                     key={element?.label}
-                    className="flex shrink-0 grow basis-0"
+                    className=" flex shrink-0 grow basis-0"
                   >
                     <button
                       type="button"
-                      className="relative flex grow cursor-pointer flex-col items-center gap-y-2 underline transition-colors"
+                      className="relative flex grow cursor-pointer items-center gap-x-4 gap-y-2 underline transition-colors xs:flex-col xs:gap-x-0"
                       value={element.indice.value}
                       onClick={() => setModal(element.label.replace(",", ""))}
                     >

diff --git a/frontend/src/components/dashboard/indicators/IndiceUv.js b/frontend/src/components/dashboard/indicators/IndiceUv.js
@@ -42,7 +42,7 @@ export default function IndiceUv(props) {
           onClick={() => setModal("indice_uv")}
         >
           <h2 className="m-0 basis-3/4 text-left text-base font-medium text-main">
-            Indice UV (de 1 à {maxValue})
+            Indice UV (de&nbsp;1&nbsp;à&nbsp;{maxValue})
           </h2>
           <span
             aria-label="Plus d'informations sur l'indice ATMO"
@@ -67,7 +67,7 @@ export default function IndiceUv(props) {
           )}
           {!isLoading && !isError && (
             <>
-              <div className="flex w-full items-start justify-center gap-x-4">
+              <div className="flex w-full flex-col items-center justify-center gap-x-4 gap-y-2 xs:flex-row xs:items-start">
                 {!data?.indice_uv?.advice?.main ? (
                   <p>Les données ne sont pas disponibles pour cette commune.</p>
                 ) : (
@@ -110,11 +110,11 @@ export default function IndiceUv(props) {
                   </>
                 )}
               </div>
-              <ul className="mb-0 mt-2 flex w-full justify-between">
+              <ul className="mx-auto mb-0 mt-2 flex flex-col justify-between xs:mx-0 xs:w-full xs:flex-row">
                 <li className="flex shrink-0 grow basis-0">
                   <button
                     type="button"
-                    className="relative flex grow cursor-pointer flex-col items-center gap-y-2 underline transition-colors"
+                    className="relative flex grow cursor-pointer items-center gap-x-4 gap-y-2 underline transition-colors xs:flex-col xs:gap-x-0"
                     onClick={() => setModal("indice_uv")}
                   >
                     <div
@@ -127,7 +127,7 @@ export default function IndiceUv(props) {
                 <li className="flex shrink-0 grow basis-0">
                   <button
                     type="button"
-                    className="relative flex grow cursor-pointer flex-col items-center gap-y-2 underline transition-colors"
+                    className="relative flex grow cursor-pointer items-center gap-x-4 gap-y-2 underline transition-colors xs:flex-col xs:gap-x-0"
                     onClick={() => setModal("indice_uv")}
                   >
                     <div
@@ -140,7 +140,7 @@ export default function IndiceUv(props) {
                 <li className="flex shrink-0 grow basis-0">
                   <button
                     type="button"
-                    className="relative flex grow cursor-pointer flex-col items-center gap-y-2 underline transition-colors"
+                    className="relative flex grow cursor-pointer items-center gap-x-4 gap-y-2 underline transition-colors xs:flex-col xs:gap-x-0"
                     onClick={() => setModal("indice_uv")}
                   >
                     <div
@@ -153,7 +153,7 @@ export default function IndiceUv(props) {
                 <li className="flex shrink-0 grow basis-0">
                   <button
                     type="button"
-                    className="relative flex grow cursor-pointer flex-col items-center gap-y-2 underline transition-colors"
+                    className="relative flex grow cursor-pointer items-center gap-x-4 gap-y-2 underline transition-colors xs:flex-col xs:gap-x-0"
                     onClick={() => setModal("indice_uv")}
                   >
                     <div
@@ -166,7 +166,7 @@ export default function IndiceUv(props) {
                 <li className="flex shrink-0 grow basis-0">
                   <button
                     type="button"
-                    className="relative flex grow cursor-pointer flex-col items-center gap-y-2 underline transition-colors"
+                    className="relative flex grow cursor-pointer items-center gap-x-4 gap-y-2 underline transition-colors xs:flex-col xs:gap-x-0"
                     onClick={() => setModal("indice_uv")}
                   >
                     <div

diff --git a/frontend/src/components/dashboard/indicators/PotentielRadon.js b/frontend/src/components/dashboard/indicators/PotentielRadon.js
@@ -67,7 +67,7 @@ export default function PotentielRadon(props) {
           )}
           {!isLoading && !isError && (
             <>
-              <div className="flex w-full items-start justify-center gap-x-4">
+              <div className="flex w-full flex-col items-center justify-center gap-x-4 gap-y-2 xs:flex-row xs:items-start">
                 {!data?.potentiel_radon?.advice?.main ? (
                   <p>Les données ne sont pas disponibles pour cette commune.</p>
                 ) : (

diff --git a/frontend/src/components/dashboard/indicators/Raep.js b/frontend/src/components/dashboard/indicators/Raep.js
@@ -103,7 +103,7 @@ export default function Raep(props) {
           )}
           {!isLoading && !isError && (
             <>
-              <div className="flex w-full items-start justify-center gap-x-4">
+              <div className="flex w-full flex-col items-center justify-center gap-x-4 gap-y-2 xs:flex-row xs:items-start">
                 {!data?.raep?.advice?.main ? (
                   <p>Les données ne sont pas disponibles pour cette commune.</p>
                 ) : (

diff --git a/frontend/src/components/dashboard/indicators/VigilanceMeteo.js b/frontend/src/components/dashboard/indicators/VigilanceMeteo.js
@@ -66,7 +66,7 @@ export default function VigilanceMeteo(props) {
           )}
           {!isLoading && !isError && (
             <>
-              <div className="flex w-full items-start justify-center gap-x-4">
+              <div className="flex w-full flex-col items-center justify-center gap-x-4 gap-y-2 xs:flex-row xs:items-start">
                 {!data?.vigilance_meteo?.advice?.main ? (
                   <p>Les données ne sont pas disponibles pour cette commune.</p>
                 ) : (
@@ -114,11 +114,11 @@ export default function VigilanceMeteo(props) {
                   </>
                 )}
               </div>
-              <ul className="mb-0 mt-2 flex w-full justify-between">
+              <ul className="mx-auto mb-0 mt-2 flex flex-col justify-between xs:mx-0 xs:w-full xs:flex-row">
                 <li className="flex shrink-0 grow basis-0">
                   <button
                     type="button"
-                    className="relative flex grow cursor-pointer flex-col items-center gap-y-2 underline transition-colors"
+                    className="relative flex grow cursor-pointer items-center gap-x-4 gap-y-2 underline transition-colors xs:flex-col xs:gap-x-0"
                     onClick={() => setModal("vigilancemeteo")}
                   >
                     <div
@@ -131,7 +131,7 @@ export default function VigilanceMeteo(props) {
                 <li className="flex shrink-0 grow basis-0">
                   <button
                     type="button"
-                    className="relative flex grow cursor-pointer flex-col items-center gap-y-2 underline transition-colors"
+                    className="relative flex grow cursor-pointer items-center gap-x-4 gap-y-2 underline transition-colors xs:flex-col xs:gap-x-0"
                     onClick={() => setModal("vigilancemeteo")}
                   >
                     <div
@@ -144,7 +144,7 @@ export default function VigilanceMeteo(props) {
                 <li className="flex shrink-0 grow basis-0">
                   <button
                     type="button"
-                    className="relative flex grow cursor-pointer flex-col items-center gap-y-2 underline transition-colors"
+                    className="relative flex grow cursor-pointer items-center gap-x-4 gap-y-2 underline transition-colors xs:flex-col xs:gap-x-0"
                     onClick={() => setModal("vigilancemeteo")}
                   >
                     <div
@@ -157,7 +157,7 @@ export default function VigilanceMeteo(props) {
                 <li className="flex shrink-0 grow basis-0">
                   <button
                     type="button"
-                    className="relative flex grow cursor-pointer flex-col items-center gap-y-2 underline transition-colors"
+                    className="relative flex grow cursor-pointer items-center gap-x-4 gap-y-2 underline transition-colors xs:flex-col xs:gap-x-0"
                     onClick={() => setModal("vigilancemeteo")}
                   >
                     <div

diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
@@ -5,12 +5,14 @@
 html {
   box-sizing: border-box;
   font-family: "Marianne", Arial, sans-serif;
+  color-scheme: light;
 }
 
 body {
   @apply bg-white text-text;
   line-height: 1.4;
   overflow-x: hidden;
+  color-scheme: light;
 }
 
 *,

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
@@ -54,6 +55,15 @@ module.exports = {
     "w-5/5",
   ],
   theme: {
+    screens: {
+      // in em
+      xs: "19em", // 304px
+      sm: "40em", // 640px
+      md: "48em", // 768px
+      lg: "64em", // 1024px
+      xl: "80em", // 1280px
+      "2xl": "96em", // 1536px
+    },
     extend: {
       animation: {
         flash: "flash 4s infinite",