Merge pull request #954 from parlemonde/feat/responsive-indice-culture

feat(#vil-496): indice culture
parlemonde · Jun 24, 2024 · c8ba061 · c8ba061
2 parents 320dae5 + 9cd132e
commit c8ba061
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 24 deletions.
diff --git a/src/components/StepsButtons.tsx b/src/components/StepsButtons.tsx
@@ -3,44 +3,57 @@ import React from 'react';
 
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import { Button } from '@mui/material';
+import { Box, Button } from '@mui/material';
 
 export interface StepsButtonProps {
   prev?: string | (() => void);
   next?: string | (() => void);
 }
 
 export const StepsButton = ({ prev, next }: StepsButtonProps) => {
+  const justifyContent = prev && next ? 'space-between' : prev ? 'start' : 'end';
   return (
-    <div style={{ width: '100%', margin: '3rem 0', minHeight: '2rem' }}>
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        justifyContent: justifyContent,
+        gap: {
+          xs: '0.2rem',
+          sm: '1rem',
+        },
+        margin: '3rem 0',
+        minHeight: '2rem',
+      }}
+    >
       {prev !== undefined &&
         (typeof prev === 'string' ? (
           <Link href={prev} passHref>
-            <Button component="a" href={prev} variant="outlined" color="primary">
+            <Button component="a" style={{ maxWidth: '200px', flexBasis: '50%' }} href={prev} variant="outlined" color="primary">
               <ChevronLeftIcon />
               Étape précédente
             </Button>
           </Link>
         ) : (
-          <Button onClick={prev} variant="outlined" color="primary">
+          <Button style={{ maxWidth: '200px', flexBasis: '50%' }} onClick={prev} variant="outlined" color="primary">
             <ChevronLeftIcon />
             Étape précédente
           </Button>
         ))}
       {next !== undefined &&
         (typeof next === 'string' ? (
           <Link href={next} passHref>
-            <Button component="a" href={next} variant="outlined" style={{ float: 'right' }} color="primary">
+            <Button component="a" href={next} variant="outlined" style={{ maxWidth: '200px', flexBasis: '50%' }} color="primary">
               Étape suivante
               <ChevronRightIcon />
             </Button>
           </Link>
         ) : (
-          <Button onClick={next} variant="outlined" style={{ float: 'right' }} color="primary">
+          <Button onClick={next} variant="outlined" style={{ maxWidth: '200px', flexBasis: '50%' }} color="primary">
             Étape suivante
             <ChevronRightIcon />
           </Button>
         ))}
-    </div>
+    </Box>
   );
 };
diff --git a/src/components/activities/ActivityChoice/index.tsx b/src/components/activities/ActivityChoice/index.tsx
@@ -16,8 +16,17 @@ interface ActivityChoiceProps {
 
 export const ActivityChoice = ({ activities }: ActivityChoiceProps) => {
   return (
-    <div style={{ width: '100%', padding: '1rem' }}>
-      <div style={{ margin: '0 auto', width: '100%', maxWidth: '750px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem 1rem' }}>
+    <div style={{ width: '100%' }}>
+      <div
+        style={{
+          margin: '0 auto',
+          width: '100%',
+          maxWidth: '640px',
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
+          gap: '1rem 1rem',
+        }}
+      >
         {activities.map((activity) => {
           if (activity.disabled && activity.disabledText) {
             return (

diff --git a/src/components/buttons/BackButton.tsx b/src/components/buttons/BackButton.tsx
@@ -20,8 +20,8 @@ export const BackButton = ({ href, label = 'Retour' }: BackButtonProps) => {
   };
 
   return (
-    <div style={{ position: 'relative' }}>
-      <a className="text" style={{ position: 'absolute', left: 0, top: 0, zIndex: 2 }} onClick={onBack}>
+    <div>
+      <a className="text" onClick={onBack}>
         <span style={{ marginRight: '0.5rem' }}>
           <ArrowRight style={{ height: '0.6rem', width: '0.6rem', transform: 'rotate(180deg)' }} />
         </span>

diff --git a/src/pages/indice-culturel/1.tsx b/src/pages/indice-culturel/1.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import { TextField } from '@mui/material';
+import { Box, TextField } from '@mui/material';
 
 import { getIndice } from 'src/activity-types/indice.constants';
 import type { IndiceData } from 'src/activity-types/indice.types';
@@ -60,7 +60,15 @@ const IndiceStep1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <Box
+        sx={{
+          width: '100%',
+          padding: {
+            xs: '0',
+            md: '0.5rem 1rem 1rem 1rem',
+          },
+        }}
+      >
         {!isEdit && <BackButton href="/indice-culturel" />}
         <Steps
           steps={[getIndice(activity.subType, data).step1 || 'Indice', "Créer l'indice", 'Prévisualiser']}
@@ -109,7 +117,7 @@ const IndiceStep1 = () => {
             </div>
           )}
         </div>
-      </div>
+      </Box>
     </Base>
   );
 };

diff --git a/src/pages/indice-culturel/2.tsx b/src/pages/indice-culturel/2.tsx
@@ -1,6 +1,8 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import { Box } from '@mui/material';
+
 import { isIndice } from 'src/activity-types/anyActivity';
 import { getIndice } from 'src/activity-types/indice.constants';
 import type { IndiceData } from 'src/activity-types/indice.types';
@@ -45,7 +47,15 @@ const IndiceStep2 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <Box
+        sx={{
+          width: '100%',
+          padding: {
+            xs: '0',
+            md: '0.5rem 1rem 1rem 1rem',
+          },
+        }}
+      >
         <Steps
           steps={[getIndice(activity.subType, data).step1, "Créer l'indice", 'Prévisualiser']}
           urls={['/indice-culturel/1?edit', '/indice-culturel/2', '/indice-culturel/3']}
@@ -63,7 +73,7 @@ const IndiceStep2 = () => {
           <ContentEditor content={activity.content} updateContent={updateContent} addContent={addContent} deleteContent={deleteContent} />
           <StepsButton prev="/indice-culturel/1?edit" next={onNext} />
         </div>
-      </div>
+      </Box>
     </Base>
   );
 };

diff --git a/src/pages/indice-culturel/3.tsx b/src/pages/indice-culturel/3.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import { Tooltip } from '@mui/material';
+import { Box, Tooltip } from '@mui/material';
 import Backdrop from '@mui/material/Backdrop';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -64,7 +64,15 @@ const IndiceStep3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <Box
+        sx={{
+          width: '100%',
+          padding: {
+            xs: '0',
+            md: '0.5rem 1rem 1rem 1rem',
+          },
+        }}
+      >
         <Steps
           steps={[getIndice(activity.subType, data).step1, "Créer l'indice", 'Prévisualiser']}
           urls={['/indice-culturel/1?edit', '/indice-culturel/2', '/indice-culturel/3']}
@@ -141,7 +149,7 @@ const IndiceStep3 = () => {
 
           <StepsButton prev="/indice-culturel/2" />
         </div>
-      </div>
+      </Box>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>

diff --git a/src/pages/indice-culturel/index.tsx b/src/pages/indice-culturel/index.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Box } from '@mui/material';
+
 import { Base } from 'src/components/Base';
 import { ActivityChoice } from 'src/components/activities/ActivityChoice';
 import ArtIcon from 'src/svg/indice-culturel/art.svg';
@@ -80,7 +82,15 @@ const indices = [
 const Indice = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <Box
+        sx={{
+          width: '100%',
+          padding: {
+            xs: '0',
+            md: '0.5rem 1rem 1rem 1rem',
+          },
+        }}
+      >
         <div className="width-900">
           <h1 style={{ marginTop: '0.5rem' }}>Quel aspect de culture allez-vous présenter ?</h1>
           <p className="text">
@@ -93,7 +103,7 @@ const Indice = () => {
           </p>
           <ActivityChoice activities={indices} />
         </div>
-      </div>
+      </Box>
     </Base>
   );
 };

diff --git a/src/pages/indice-culturel/success.tsx b/src/pages/indice-culturel/success.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import React from 'react';
 
-import { Button } from '@mui/material';
+import { Box, Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
 import { bgPage } from 'src/styles/variables.const';
@@ -10,7 +10,15 @@ import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
 const IndiceSuccess = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <Box
+        sx={{
+          width: '100%',
+          padding: {
+            xs: '0',
+            md: '0.5rem 1rem 1rem 1rem',
+          },
+        }}
+      >
         <div style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}>
           <p className="text">Votre indice culturel a bien été publié !</p>
           <PelicoSouriant style={{ width: '60%', height: 'auto', margin: '0 20%' }} />
@@ -22,7 +30,7 @@ const IndiceSuccess = () => {
             </Button>
           </Link>
         </div>
-      </div>
+      </Box>
     </Base>
   );
 };