feat(#vil-489): responsive vrac

Inclus les pages suivantes: * creer reportage * lancer un defi * jeu mimic * creer enigme * reagir une activité * poser une auestion * parametrer hymne * creer une histoire * re-inventer histoire * chanter un couplet
parlemonde · Jul 3, 2024 · 3028e02 · 3028e02
1 parent 6a5bc5e
commit 3028e02
Show file tree

Hide file tree

Showing 81 changed files with 416 additions and 255 deletions.
diff --git a/src/components/Steps.tsx b/src/components/Steps.tsx
@@ -58,10 +58,26 @@ export const Steps = ({ steps, urls, activeStep = 0, errorSteps = [], onBeforeLe
             }}
           />
         }
-        sx={{ zIndex: 1, position: 'relative', background: 'none', p: 3 }}
+        sx={{
+          zIndex: 1,
+          position: 'relative',
+          background: 'none',
+          p: {
+            xs: '24px 0',
+            md: 3,
+          },
+        }}
       >
         {steps.map((label, index) => (
-          <Step key={label}>
+          <Step
+            sx={{
+              px: {
+                xs: 0,
+                md: 1,
+              },
+            }}
+            key={label}
+          >
             <StepLabel
               StepIconComponent={StepIcon}
               StepIconProps={{

diff --git a/src/components/StepsButtons.tsx b/src/components/StepsButtons.tsx
@@ -22,34 +22,46 @@ export const StepsButton = ({ prev, next }: StepsButtonProps) => {
           xs: '0.2rem',
           sm: '1rem',
         },
-        margin: '3rem 0',
+        margin: '1rem 0',
         minHeight: '2rem',
       }}
     >
       {prev !== undefined &&
         (typeof prev === 'string' ? (
           <Link href={prev} passHref>
-            <Button component="a" style={{ maxWidth: '200px', flexBasis: '50%' }} href={prev} variant="outlined" color="primary">
+            <Button
+              component="a"
+              style={{ maxWidth: '200px', flexBasis: '50%', alignItems: 'center' }}
+              href={prev}
+              variant="outlined"
+              color="primary"
+            >
               <ChevronLeftIcon />
               Étape précédente
             </Button>
           </Link>
         ) : (
-          <Button style={{ maxWidth: '200px', flexBasis: '50%' }} onClick={prev} variant="outlined" color="primary">
+          <Button style={{ maxWidth: '200px', flexBasis: '50%', alignItems: 'center' }} 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={{ maxWidth: '200px', flexBasis: '50%' }} color="primary">
+            <Button
+              component="a"
+              href={next}
+              variant="outlined"
+              style={{ maxWidth: '200px', flexBasis: '50%', alignItems: 'center' }}
+              color="primary"
+            >
               Étape suivante
               <ChevronRightIcon />
             </Button>
           </Link>
         ) : (
-          <Button onClick={next} variant="outlined" style={{ maxWidth: '200px', flexBasis: '50%' }} color="primary">
+          <Button onClick={next} variant="outlined" style={{ maxWidth: '200px', flexBasis: '50%', alignItems: 'center' }} color="primary">
             Étape suivante
             <ChevronRightIcon />
           </Button>

diff --git a/src/components/activities/ActivitySelect.tsx b/src/components/activities/ActivitySelect.tsx
@@ -79,9 +79,9 @@ export const ActivitySelect = ({ value, onChange, onSelect, style, label = 'Sél
         }}
         additionalContent={
           selectedActivity !== null ? (
-            <div style={{ height: '50vh', overflow: 'auto' }}>
+            <div style={{ minHeight: '50px', overflow: 'auto', overflowX: 'hidden' }}>
               <Activities activities={[selectedActivity]} noButtons />
-              <div style={{ width: '100%', margin: '3rem 0', minHeight: '2rem' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', width: '100%', minHeight: '2rem' }}>
                 <Button
                   variant="outlined"
                   color="primary"
@@ -98,7 +98,7 @@ export const ActivitySelect = ({ value, onChange, onSelect, style, label = 'Sél
               </div>
             </div>
           ) : (
-            <div style={{ height: '50vh', overflow: 'auto' }}>
+            <div style={{ minHeight: '50px', overflow: 'auto', overflowX: 'hidden' }}>
               <Activities
                 activities={activities}
                 noButtons

diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import type { SelectChangeEvent } from '@mui/material';
-import { Button } from '@mui/material';
+import { Typography, Button } from '@mui/material';
 
 import PaginationNav from '../PaginationNav/PaginationNav';
 import { ActivityCard } from './ActivityCard';
@@ -60,6 +60,10 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
   const startIdx = (page - 1) * activitiesPerPage;
   const endIdx = startIdx + activitiesPerPage;
 
+  if (activities.length === 0) {
+    return <Typography>Aucune activité existante.</Typography>;
+  }
+
   return (
     <div>
       {activities

diff --git a/src/components/activities/anthem/AnthemTrack/AnthemTrack.module.css b/src/components/activities/anthem/AnthemTrack/AnthemTrack.module.css
@@ -1,9 +1,3 @@
-.trackContainer {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-    gap: 2rem;
-}
 .trackLabel input, .trackLabel > span {
     box-sizing: border-box;
     width: 180px;
@@ -16,14 +10,10 @@
 }
 
 .sampleControlsContainer {
-    display: flex;
 }
 
 .sampleAudioControl {
-    width: 250px;
-    height: 30px;
 }
 
 .sampleControlsContainer button {
-    margin-left: 6px;
 }
diff --git a/src/components/activities/anthem/AnthemTrack/AnthemTrack.tsx b/src/components/activities/anthem/AnthemTrack/AnthemTrack.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 
-import { Alert, TextField } from '@mui/material';
+import { Alert, Box, TextField } from '@mui/material';
 
 import type { DisplayableInstrumentsType } from '../../../../utils/instruments';
 import AudioEditor from '../../content/editors/AudioEditor/AudioEditor';
 import AnthemTrackIcon from '../AnthemTrackIcon/AnthemTrackIcon';
-import styles from './AnthemTrack.module.css';
 import AddAudioButton from 'src/components/buttons/AddAudioButton';
 import { DeleteButton } from 'src/components/buttons/DeleteButton';
 import { EditButton } from 'src/components/buttons/EditButton';
@@ -30,40 +29,67 @@ const AnthemTrack = ({ track, instruments, handleTrackUpdate }: AnthemTrackProps
   };
 
   return (
-    <div className={styles.trackContainer}>
-      <div className={styles.trackContainer}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: {
+          xs: track.sampleUrl ? 'column' : 'row',
+          sm: 'row',
+        },
+        alignItems: {
+          xs: track.sampleUrl ? 'start' : 'center',
+          sm: 'center',
+        },
+        justifyContent: 'space-between',
+        marginBottom: '10px',
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          marginBottom: {
+            xs: track.sampleUrl && '10px',
+            sm: '0',
+          },
+        }}
+      >
         <AnthemTrackIcon track={track} handleIconUpdate={handleIconUpdate} instruments={instruments} />
-      </div>
-
-      <div className={styles.trackLabel}>
-        {isEditingLabel ? (
-          <TextField
-            defaultValue={track.label}
-            onBlur={(e) => {
-              setIsEditingLabel(false);
-              if (e.target.value.length > 0) handleTrackUpdate({ ...track, label: e.target.value });
-            }}
-            autoFocus
-          ></TextField>
-        ) : (
-          <span onClick={() => setIsEditingLabel(true)}>{track.label}</span>
-        )}
-      </div>
+        <div style={{ marginLeft: '10px' }}>
+          {isEditingLabel ? (
+            <TextField
+              defaultValue={track.label}
+              onBlur={(e) => {
+                setIsEditingLabel(false);
+                if (e.target.value.length > 0) handleTrackUpdate({ ...track, label: e.target.value });
+              }}
+              autoFocus
+            ></TextField>
+          ) : (
+            <span onClick={() => setIsEditingLabel(true)}>{track.label}</span>
+          )}
+        </div>
+      </Box>
 
       {!track.sampleUrl ? (
         <AddAudioButton onClick={() => setIsAudioEditorOpen(true)} />
       ) : (
-        <div className={styles.sampleControlsContainer}>
-          <audio controls src={track.sampleUrl} className={styles.sampleAudioControl}>
-            <Alert severity="error">{'Erreur: impossible de charger le son.'}</Alert>
-          </audio>
+        <div style={{ display: 'flex' }}>
+          <Box component="audio" controls src={'track.sampleUrl'} sx={{ width: { xs: '220px', sm: '250px', md: '300px' }, height: '30px' }}>
+            <Alert sx={{ padding: '0 16px' }} severity="error">
+              {'Erreur: impossible de charger le son.'}
+            </Alert>
+          </Box>
           <EditButton //add edit condition ??
+            style={{ marginLeft: '6px' }}
             size="small"
             onClick={() => {
               setIsAudioEditorOpen(true);
             }}
           />
           <DeleteButton
+            style={{ marginLeft: '6px' }}
             color="red"
             confirmTitle="Supprimer ce son ?"
             confirmLabel="Voulez-vous vraiment supprimer ce son ?"
@@ -82,7 +108,7 @@ const AnthemTrack = ({ track, instruments, handleTrackUpdate }: AnthemTrackProps
           setIsAudioEditorOpen={setIsAudioEditorOpen}
         />
       )}
-    </div>
+    </Box>
   );
 };
 

diff --git a/src/components/buttons/ThemeChoiceButton.tsx b/src/components/buttons/ThemeChoiceButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ButtonBase } from '@mui/material';
+import { Box, ButtonBase } from '@mui/material';
 
 import ArrowRight from 'src/svg/arrow-right.svg';
 
@@ -41,9 +41,17 @@ export const ThemeChoiceButton = ({ label, isOpen, description, additionalConten
         </div>
       </ButtonBase>
       {showAdd && additionalContent && (
-        <div className="bg-grey" style={{ padding: '0.8rem 1.4rem' }}>
+        <Box
+          className="bg-grey"
+          sx={{
+            padding: {
+              sx: '5px',
+              sm: '0.8rem 1.4rem',
+            },
+          }}
+        >
           {additionalContent}
-        </div>
+        </Box>
       )}
     </div>
   );

diff --git a/src/components/selectors/MimicSelector.tsx b/src/components/selectors/MimicSelector.tsx
@@ -76,21 +76,33 @@ const MimicSelector = ({ MimicData, mimicNumber, onDataChange, onVideoChange, on
             {isFieldValid(MimicData.video as string | null) && (
               <div style={{ width: '100%', height: '100%', marginTop: '0.2rem' }}>
                 <ReactPlayer width="100%" height="70%" light url={MimicData.video || ''} controls />
-                <Button name="video" style={{ width: '100%', marginTop: '0.4rem' }} onClick={toggleModal} variant="outlined" color="primary">
+                <Button
+                  name="video"
+                  style={{ width: '100%', maxWidth: '320px', marginTop: '0.4rem' }}
+                  onClick={toggleModal}
+                  variant="outlined"
+                  color="primary"
+                >
                   Changer de vidéo
                 </Button>
               </div>
             )}
             {!isFieldValid(MimicData.video as string | null) && (
               <div>
                 {!showError && (
-                  <Button name="video" style={{ width: '100%' }} onClick={toggleModal} variant="outlined" color="primary">
+                  <Button name="video" style={{ width: '100%', maxWidth: '320px' }} onClick={toggleModal} variant="outlined" color="primary">
                     {<UploadIcon style={{ fill: 'currentcolor', width: '3rem', height: '3rem', margin: '30px' }} />}
                   </Button>
                 )}
                 {showError && (
                   <div style={{ marginTop: '1.5rem' }}>
-                    <Button name="video" style={{ width: '100%', borderColor: '#d93939' }} onClick={toggleModal} variant="outlined" color="primary">
+                    <Button
+                      name="video"
+                      style={{ width: '100%', maxWidth: '320px', borderColor: '#d93939' }}
+                      onClick={toggleModal}
+                      variant="outlined"
+                      color="primary"
+                    >
                       {<UploadIcon style={{ color: '#d93939', width: '3rem', height: '3rem', margin: '30px' }} />}
                     </Button>
                     <span style={{ fontSize: '0.7rem', marginLeft: '1rem', color: '#d93939' }}>Ce champ est obligatoire</span>
@@ -114,7 +126,13 @@ const MimicSelector = ({ MimicData, mimicNumber, onDataChange, onVideoChange, on
               value={MimicData.signification || ''}
               label="Signification réelle"
               onChange={onDataChange('signification')}
-              style={{ width: '100%', margin: '10px' }}
+              sx={{
+                width: '100%',
+                margin: {
+                  xs: 0,
+                  md: '10px',
+                },
+              }}
               error={showError && !isFieldValid(MimicData.signification)}
               helperText={showError && !isFieldValid(MimicData.signification) ? 'Ce champ est obligatoire' : ''}
               inputProps={{
@@ -133,7 +151,14 @@ const MimicSelector = ({ MimicData, mimicNumber, onDataChange, onVideoChange, on
               label="Origine"
               value={MimicData.origine || ''}
               onChange={onDataChange('origine')}
-              style={{ width: '100%', margin: '10px', fontStyle: 'italic' }}
+              sx={{
+                width: '100%',
+                margin: {
+                  xs: 0,
+                  md: '10px',
+                },
+                fontStyle: 'italic',
+              }}
               helperText={'Ce champ est optionnel'}
               inputProps={{
                 maxLength: 800,
@@ -155,7 +180,13 @@ const MimicSelector = ({ MimicData, mimicNumber, onDataChange, onVideoChange, on
           label="Signification inventée 1"
           value={MimicData.fakeSignification1 || ''}
           onChange={onDataChange('fakeSignification1')}
-          style={{ width: '100%', margin: '10px' }}
+          sx={{
+            width: '100%',
+            margin: {
+              xs: 0,
+              md: '10px',
+            },
+          }}
           error={showError && !isFieldValid(MimicData.fakeSignification1)}
           helperText={showError && !isFieldValid(MimicData.fakeSignification1) ? 'Ce champ est obligatoire' : ''}
           inputProps={{
@@ -173,7 +204,13 @@ const MimicSelector = ({ MimicData, mimicNumber, onDataChange, onVideoChange, on
           label="Signification inventée 2"
           value={MimicData.fakeSignification2 || ''}
           onChange={onDataChange('fakeSignification2')}
-          style={{ width: '100%', margin: '10px' }}
+          sx={{
+            width: '100%',
+            margin: {
+              xs: 0,
+              md: '10px',
+            },
+          }}
           error={showError && !isFieldValid(MimicData.fakeSignification2)}
           helperText={showError && !isFieldValid(MimicData.fakeSignification2) ? 'Ce champ est obligatoire' : ''}
           inputProps={{