📱(lti) improve the responsive on the student deposite file

The deposit files was not displayed correctly on the mobile view. This commit improve the responsive.
openfun · Nov 16, 2023 · adbd563 · adbd563
1 parent 092652c
commit adbd563
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 22 deletions.
diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx
@@ -1,4 +1,5 @@
 import { Grid } from 'grommet';
+import { Breakpoints } from 'lib-common';
 import {
   Box,
   BoxLoader,
@@ -33,12 +34,21 @@ interface DashboardStudentProps {
 }
 
 export const DashboardStudent = ({ fileDepository }: DashboardStudentProps) => {
-  const { isMobile } = useResponsive();
+  const { isSmallerBreakpoint, breakpoint, isMobile } = useResponsive();
   const { data, isError, isLoading } = useDepositedFiles(fileDepository.id);
 
+  const isXsmall = isSmallerBreakpoint(breakpoint, Breakpoints.xsmall);
+  const isSmall = isSmallerBreakpoint(breakpoint, Breakpoints.small);
+
   return (
     <React.Fragment>
-      <Box background="white" elevation fill pad="xlarge" round="xsmall">
+      <Box
+        background="white"
+        elevation
+        fill
+        pad={isXsmall ? 'xsmall' : isSmall ? 'small' : 'xlarge'}
+        round="xsmall"
+      >
         <Heading>{fileDepository.title}</Heading>
         {isMobile ? (
           <React.Fragment>
@@ -57,7 +67,7 @@ export const DashboardStudent = ({ fileDepository }: DashboardStudentProps) => {
         elevation
         fill
         margin={{ top: 'small' }}
-        pad="xlarge"
+        pad={isXsmall ? 'xsmall' : isSmall ? 'small' : 'xlarge'}
         round="xsmall"
       >
         <Heading>
@@ -68,7 +78,7 @@ export const DashboardStudent = ({ fileDepository }: DashboardStudentProps) => {
         ) : isError ? (
           <FormattedMessage {...messages.fetchFilesError} />
         ) : (
-          <Box fill margin={{ top: 'small' }} pad="medium" round="xsmall">
+          <Box fill margin={{ top: 'small' }}>
             {data?.results.map((file) => (
               <DepositedFileRow key={file.id} file={file} />
             ))}

diff --git a/...rontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.tsx b/...rontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.tsx
@@ -65,7 +65,12 @@ export const DepositedFileRow = ({ file }: DepositedFileProps) => {
       }}
       fill
       margin={{ top: 'xxsmall' }}
-      pad="medium"
+      pad={{
+        all: 'small',
+        horizontal: isSmallerBreakpoint(breakpoint, Breakpoints.smedium)
+          ? 'small'
+          : 'medium',
+      }}
       round="xsmall"
     >
       <Box
@@ -76,19 +81,20 @@ export const DepositedFileRow = ({ file }: DepositedFileProps) => {
         justify="space-between"
         flow="wrap"
       >
-        <Text weight="medium">{file.author_name}</Text>
-        {uploadedOn && (
-          <Text size="small" className="mr-t">
-            {uploadedOnDate}&nbsp;{uploadedOnTime}
-          </Text>
-        )}
+        <Box>
+          <Text weight="medium">{file.author_name}</Text>
+          {uploadedOn && (
+            <Text size="small" className="mr-t">
+              {uploadedOnDate}&nbsp;{uploadedOnTime}
+            </Text>
+          )}
+        </Box>
         <Box align="end" justify="end" gap="small">
           {file.upload_state === 'ready' ? (
             <Button
               onClick={markFileAsRead}
               download
               aria-label={intl.formatMessage(messages.labelDownload)}
-              style={{ fontFamily: 'Roboto-Medium' }}
               title={intl.formatMessage(messages.labelDownload)}
               href={file.url}
             >
@@ -106,6 +112,7 @@ export const DepositedFileRow = ({ file }: DepositedFileProps) => {
         align="center"
         justify="space-between"
         margin={{ top: 'xsmall' }}
+        gap="xsmall"
       >
         <Text title={file.filename} weight={file.read ? 'regular' : 'bold'}>
           {isSmallerBreakpoint(breakpoint, Breakpoints.large)

diff --git a/src/frontend/packages/lib_components/src/common/Typo/index.spec.tsx b/src/frontend/packages/lib_components/src/common/Typo/index.spec.tsx
@@ -69,7 +69,7 @@ describe('<Typo />', () => {
     unmount();
 
     render(
-      <Typo pad={{ horizontal: '20px', vertical: '5px', bottom: '2px' }}>
+      <Typo pad={{ horizontal: '20px', all: '5px', bottom: '2px' }}>
         My Typo
       </Typo>,
     );
@@ -88,7 +88,14 @@ describe('<Typo />', () => {
     unmount();
 
     render(
-      <Typo margin={{ horizontal: '20px', vertical: '5px', bottom: '2px' }}>
+      <Typo
+        margin={{
+          horizontal: '20px',
+          vertical: '5px',
+          bottom: '2px',
+          all: '15px',
+        }}
+      >
         My Typo
       </Typo>,
     );

diff --git a/src/frontend/packages/lib_components/src/common/Typo/styleBuilder.ts b/src/frontend/packages/lib_components/src/common/Typo/styleBuilder.ts
@@ -29,6 +29,7 @@ export type MarginPadding =
       bottom?: Spacings;
       left?: Spacings;
       right?: Spacings;
+      all?: Spacings;
     };
 
 type SizesKey = keyof typeof sizes;
@@ -74,10 +75,22 @@ export const stylesTruncate = (truncate: boolean | number) => {
 export const stylesPad = (pad: MarginPadding) => {
   if (typeof pad === 'object') {
     return {
-      paddingTop: spacingValue(pad.top) || spacingValue(pad.vertical),
-      paddingBottom: spacingValue(pad.bottom) || spacingValue(pad.vertical),
-      paddingLeft: spacingValue(pad.left) || spacingValue(pad.horizontal),
-      paddingRight: spacingValue(pad.right) || spacingValue(pad.horizontal),
+      paddingTop:
+        spacingValue(pad.top) ||
+        spacingValue(pad.vertical) ||
+        spacingValue(pad.all),
+      paddingBottom:
+        spacingValue(pad.bottom) ||
+        spacingValue(pad.vertical) ||
+        spacingValue(pad.all),
+      paddingLeft:
+        spacingValue(pad.left) ||
+        spacingValue(pad.horizontal) ||
+        spacingValue(pad.all),
+      paddingRight:
+        spacingValue(pad.right) ||
+        spacingValue(pad.horizontal) ||
+        spacingValue(pad.all),
     };
   } else {
     return {
@@ -89,12 +102,22 @@ export const stylesPad = (pad: MarginPadding) => {
 export const stylesMargin = (margin: MarginPadding) => {
   if (typeof margin === 'object') {
     return {
-      marginTop: spacingValue(margin.top) || spacingValue(margin.vertical),
+      marginTop:
+        spacingValue(margin.top) ||
+        spacingValue(margin.vertical) ||
+        spacingValue(margin.all),
       marginBottom:
-        spacingValue(margin.bottom) || spacingValue(margin.vertical),
-      marginLeft: spacingValue(margin.left) || spacingValue(margin.horizontal),
+        spacingValue(margin.bottom) ||
+        spacingValue(margin.vertical) ||
+        spacingValue(margin.all),
+      marginLeft:
+        spacingValue(margin.left) ||
+        spacingValue(margin.horizontal) ||
+        spacingValue(margin.all),
       marginRight:
-        spacingValue(margin.right) || spacingValue(margin.horizontal),
+        spacingValue(margin.right) ||
+        spacingValue(margin.horizontal) ||
+        spacingValue(margin.all),
     };
   } else {
     return {