feat(#vil-493): responsive activities

- Fix layout - Fix pagination
parlemonde · Jun 28, 2024 · e693525 · e693525
1 parent b68d305
commit e693525
Show file tree

Hide file tree

Showing 14 changed files with 46 additions and 46 deletions.
diff --git a/src/components/PaginationNav/PaginationNav.module.css b/src/components/PaginationNav/PaginationNav.module.css
diff --git a/src/components/PaginationNav/PaginationNav.tsx b/src/components/PaginationNav/PaginationNav.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 
 import type { SelectChangeEvent } from '@mui/material';
-import { InputLabel, MenuItem, Pagination, Select } from '@mui/material';
-
-import styles from './PaginationNav.module.css';
+import { Box, InputLabel, MenuItem, Pagination, Select } from '@mui/material';
 
 interface PaginationNavProps {
   page: number;
@@ -15,8 +13,14 @@ interface PaginationNavProps {
 
 const PaginationNav = ({ page, itemsPerPage, totalItems, handlePage, handleItemsPerPage }: PaginationNavProps) => {
   return (
-    <div className={styles.paginationContainer}>
-      <div className={styles.itemsPerPageContainer}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <Box alignSelf="start" mb="1rem">
         <InputLabel id="activities-per-page-label" sx={{ fontSize: '.9rem', marginRight: '18px', display: 'inline' }}>
           Activités par page
         </InputLabel>
@@ -32,17 +36,9 @@ const PaginationNav = ({ page, itemsPerPage, totalItems, handlePage, handleItems
           <MenuItem value={10}>10</MenuItem>
           <MenuItem value={25}>25</MenuItem>
         </Select>
-      </div>
-      {totalItems > itemsPerPage && (
-        <Pagination
-          count={Math.ceil(totalItems / itemsPerPage)}
-          page={page}
-          onChange={handlePage}
-          variant="outlined"
-          sx={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', bottom: '0' }}
-        />
-      )}
-    </div>
+      </Box>
+      {totalItems > itemsPerPage && <Pagination count={Math.ceil(totalItems / itemsPerPage)} page={page} onChange={handlePage} variant="outlined" />}
+    </Box>
   );
 };
 export default PaginationNav;
diff --git a/src/components/activities/ActivityCard/AnthemCard.tsx b/src/components/activities/ActivityCard/AnthemCard.tsx
@@ -18,7 +18,7 @@ export const AnthemCard = ({ activity, isSelf, noButtons, isDraft, showEditButto
   >
     <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
       <h3>Paramétrage de l&apos;hymne du village idéal</h3>
-      <div style={{ margin: '0 0.5rem 1rem', height: `4rem`, textAlign: 'justify' }}>
+      <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
         <div className="text multine-with-ellipsis" style={{ maxHeight: `4rem` }}>
           <p>
             {activity.data.chorusLyrics.map((syllable) =>

diff --git a/src/components/activities/ActivityCard/DefiCard.tsx b/src/components/activities/ActivityCard/DefiCard.tsx
@@ -69,7 +69,7 @@ export const DefiCard = ({ activity, isSelf, noButtons, isDraft, showEditButtons
             ? getLanguageTheme(activity.data)
             : null}
         </h3>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 4 : 2}rem` }}>
             {isCooking(activity)
               ? `${activity.data.history}. ${activity.data.explanation}`

diff --git a/src/components/activities/ActivityCard/EnigmeCard.tsx b/src/components/activities/ActivityCard/EnigmeCard.tsx
@@ -60,7 +60,7 @@ export const EnigmeCard = ({ activity, isSelf, noButtons, isDraft, showEditButto
       )}
       <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
         <h3 style={{ margin: '0 0.5rem 0.5rem' }}>{enigmeTitle}</h3>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 4 : 2}rem` }}>
             {firstText}
           </div>

diff --git a/src/components/activities/ActivityCard/FreeContentCard.tsx b/src/components/activities/ActivityCard/FreeContentCard.tsx
@@ -47,7 +47,7 @@ export const FreeContentCard = ({ activity, isSelf, noButtons, isDraft, showEdit
         </div>
       )}
       <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 4 : 2}rem` }}>
             {activity.data.title}
           </div>

diff --git a/src/components/activities/ActivityCard/IndiceCard.tsx b/src/components/activities/ActivityCard/IndiceCard.tsx
@@ -53,7 +53,7 @@ export const IndiceCard = ({ activity, isSelf, noButtons, isDraft, showEditButto
       )}
       <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
         <h3 style={{ margin: '0 0.5rem 0.5rem' }}>{indiceType.title}</h3>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 4 : 2}rem` }}>
             {firstText}
           </div>

diff --git a/src/components/activities/ActivityCard/MascotteCard.tsx b/src/components/activities/ActivityCard/MascotteCard.tsx
@@ -41,7 +41,7 @@ export const MascotteCard = ({ activity, isSelf, noButtons, isDraft, showEditBut
         <h3 style={{ margin: '0 0.5rem 0.5rem' }}>
           Notre mascotte <strong>{activity.data.mascotteName}</strong>
         </h3>
-        <div style={{ margin: '0 0.5rem 1rem', height: `4rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `4rem` }}>
             {firstText}
           </div>

diff --git a/src/components/activities/ActivityCard/PresentationCard.tsx b/src/components/activities/ActivityCard/PresentationCard.tsx
@@ -53,7 +53,7 @@ export const PresentationCard = ({ activity, isSelf, noButtons, isDraft, showEdi
         {activity.data.theme !== undefined && (
           <h3 style={{ margin: '0 0.5rem 0.5rem' }}>{PRESENTATION_THEMATIQUE[activity.data.theme as number].cardTitle}</h3>
         )}
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 4 : 2}rem` }}>
             {firstText}
           </div>

diff --git a/src/components/activities/ActivityCard/ReportageCard.tsx b/src/components/activities/ActivityCard/ReportageCard.tsx
@@ -79,7 +79,7 @@ export const ReportageCard = ({ activity, isSelf, noButtons, isDraft, showEditBu
       )}
       <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
         <h3 style={{ margin: '0 0.5rem 0.5rem' }}>{reportageType.title}</h3>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${hasPreview ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${hasPreview ? 4 : 2}rem` }}>
             {firstText}
           </div>

diff --git a/src/components/activities/ActivityCard/StoryCard.tsx b/src/components/activities/ActivityCard/StoryCard.tsx
@@ -49,7 +49,7 @@ export const StoryCard = ({ activity, isSelf, noButtons, isDraft, showEditButton
         </div>
       )}
       <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <h3>Une histoire du village idéal</h3>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 2 : 1}rem` }}>
             {firstText}

diff --git a/src/components/activities/ActivityCard/SymbolCard.tsx b/src/components/activities/ActivityCard/SymbolCard.tsx
@@ -53,7 +53,7 @@ export const SymbolCard = ({ activity, isSelf, noButtons, isDraft, showEditButto
       )}
       <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
         <h3 style={{ margin: '0 0.5rem 0.5rem' }}>{symbolType.title}</h3>
-        <div style={{ margin: '0 0.5rem 1rem', height: `${firstImage ? 4 : 2}rem`, textAlign: 'justify' }}>
+        <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
           <div className="text multine-with-ellipsis break-long-words" style={{ maxHeight: `${firstImage ? 4 : 2}rem` }}>
             {firstText}
           </div>

diff --git a/src/components/activities/ActivityCard/VerseRecordCard.tsx b/src/components/activities/ActivityCard/VerseRecordCard.tsx
@@ -1,27 +1,31 @@
 import Link from 'next/link';
 import React from 'react';
 
-import { Button } from '@mui/material';
+import { Box, Button } from '@mui/material';
 
 import { CommentIcon } from './CommentIcon';
 import type { ActivityCardProps } from './activity-card.types';
 import { RedButton } from 'src/components/buttons/RedButton';
 import type { ClassAnthemActivity } from 'types/classAnthem.types';
 
 export const VerseRecordCard = ({ activity, isSelf, noButtons, isDraft, showEditButtons, onDelete }: ActivityCardProps<ClassAnthemActivity>) => (
-  <div
-    style={{
+  <Box
+    sx={{
       display: 'flex',
       alignItems: 'stretch',
       justifyContent: 'flex-start',
+      flexDirection: {
+        xs: 'column',
+        md: 'row',
+      },
     }}
   >
     <div style={{ width: '40%', flexShrink: 0, padding: '0.25rem' }}>
       <audio controls src={activity.data.verseFinalMixUrl} />
     </div>
     <div style={{ margin: '0.25rem', flex: 1, minWidth: 0 }}>
       <h3>Un couplet de l&apos;hymne du village idéal</h3>
-      <div style={{ margin: '0 0.5rem 1rem', height: `4rem`, textAlign: 'justify' }}>
+      <div style={{ margin: '0 0.5rem 1rem', textAlign: 'justify' }}>
         <div className="text multine-with-ellipsis" style={{ maxHeight: `4rem` }}>
           <p>
             {activity.data.verseLyrics.map((syllable, index) =>
@@ -81,5 +85,5 @@ export const VerseRecordCard = ({ activity, isSelf, noButtons, isDraft, showEdit
         </div>
       )}
     </div>
-  </div>
+  </Box>
 );
diff --git a/src/components/activities/ActivityCard/index.tsx b/src/components/activities/ActivityCard/index.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import React from 'react';
 
+import { Box } from '@mui/material';
 import Paper from '@mui/material/Paper';
 
 import { titles, icons, REACTIONS } from '../utils';
@@ -130,21 +131,27 @@ export const ActivityCard = ({
             )}
           </div>
         </div>
-        {!showEditButtons && isEnigme(activity) && (
-          <>
-            <Timer style={{ alignSelf: 'center', height: '1.2rem', width: 'auto', marginRight: '0.25rem' }} />
-            <div style={{ alignSelf: 'center', marginRight: '0.5rem', lineHeight: '0.875rem' }}>
-              <span className="text text--small text--error">{timeLeft > 0 ? `Temps restant: ${timeLeft}j` : 'La réponse est disponible !'}</span>
-            </div>
-          </>
-        )}
         {activity.isPinned && <PinIcon style={{ fill: primaryColor, margin: '0 0.65rem', width: '2rem', height: 'auto', alignSelf: 'center' }} />}
         {ActivityIcon && !isReaction(activity) && (
           <ActivityIcon
             style={{ fill: primaryColor, color: primaryColor, margin: '0 0.65rem', width: '2rem', height: 'auto', alignSelf: 'center' }}
           />
         )}
       </div>
+      {!showEditButtons && isEnigme(activity) && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'end',
+          }}
+        >
+          <Timer style={{ alignSelf: 'center', height: '1.2rem', width: 'auto', marginRight: '0.25rem' }} />
+          <div style={{ alignSelf: 'center', marginRight: '0.5rem', lineHeight: '0.875rem' }}>
+            <span className="text text--small text--error">{timeLeft > 0 ? `Temps restant: ${timeLeft}j` : 'La réponse est disponible !'}</span>
+          </div>
+        </Box>
+      )}
       <div className="activity-card__content">
         <UsedCard
           // eslint-disable-next-line