/materials page: Greatly improve the margins/padding. Make tighter. M…

…ake ProjectFilesTable less likely to require horizontal scroll
CAII-NCSA · May 15, 2024 · 8ff7394 · 8ff7394
1 parent 602b474
commit 8ff7394
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/src/components/UIUC-Components/EditCourseCard.tsx b/src/components/UIUC-Components/EditCourseCard.tsx
@@ -289,7 +289,8 @@ const EditCourseCard = ({
       shadow="xs"
       padding="none"
       radius="xl"
-      style={{ maxWidth: '85%', width: '100%', marginTop: '4%' }}
+      // style={{ maxWidth: '85%', width: '100%', marginTop: '4%' }}
+      className="mt-[4%] w-[96%] md:w-[90%]"
     >
       <Flex direction={isSmallScreen ? 'column' : 'row'}>
         <div

diff --git a/src/components/UIUC-Components/MakeOldCoursePage.tsx b/src/components/UIUC-Components/MakeOldCoursePage.tsx
@@ -98,7 +98,7 @@ const MakeOldCoursePage = ({
               courseMetadata={metadata}
             />
 
-            <div className="flex w-[85%] flex-col items-center justify-center pb-8 pt-8">
+            <div className="flex w-[95%] flex-col items-center justify-center pb-8 pt-8 md:w-[90%] xl:w-[85%]">
               {metadata && (
                 <>
                   <Blockquote
@@ -172,7 +172,7 @@ const MakeOldCoursePage = ({
             </div>
             {/* Course files header/background */}
             <div
-              className="w-[90%] items-start rounded-2xl shadow-md shadow-purple-600"
+              className="w-[95%] items-start rounded-2xl shadow-md shadow-purple-600 md:w-[93%] xl:w-[85%]"
               style={{ zIndex: 1, background: '#15162c' }}
             >
               <Flex direction="row" justify="space-between">
@@ -199,12 +199,12 @@ const MakeOldCoursePage = ({
                 </div>
               </Flex>
             </div>
-            <div className="w-[85%] pb-8 pt-8">
+            <div className="w-[95%] pb-8 pt-8 md:w-[90%] xl:w-[85%]">
               <DocGroupsTable course_name={course_name} />
             </div>
 
             <div
-              className="w-[90%] items-start rounded-2xl shadow-md shadow-purple-600"
+              className="w-[95%] items-start rounded-2xl shadow-md shadow-purple-600 md:w-[93%] xl:w-[85%]"
               style={{ zIndex: 1, background: '#15162c' }}
             >
               <Flex direction="row" justify="space-between">
@@ -231,7 +231,7 @@ const MakeOldCoursePage = ({
                 </div>
               </Flex>
             </div>
-            <div className="flex w-[85%] max-w-full flex-col items-center justify-center pb-2 pt-8">
+            <div className="flex w-[96%] max-w-full flex-col items-center justify-center pb-2 pt-8 md:w-[90%] xl:w-[85%]">
               {metadata && (
                 <>
                   <Tabs

diff --git a/src/components/UIUC-Components/ProjectFilesTable.tsx b/src/components/UIUC-Components/ProjectFilesTable.tsx
@@ -43,6 +43,7 @@ import {
 } from '~/hooks/docGroupsQueries'
 import { LoadingSpinner } from './LoadingSpinner'
 import { montserrat_heading } from 'fonts'
+import { useMediaQuery } from '@mantine/hooks'
 
 const useStyles = createStyles((theme) => ({}))
 
@@ -83,6 +84,7 @@ export function ProjectFilesTable({
   })
   const [errorModalOpened, setErrorModalOpened] = useState(false)
   const [currentError, setCurrentError] = useState('')
+  const isSmallScreen = useMediaQuery('(max-width: 768px)')
 
   const openModel = (open: boolean, error = '') => {
     setErrorModalOpened(open)
@@ -421,13 +423,14 @@ export function ProjectFilesTable({
             //   readable_filename ? `${readable_filename}` : '',
             render: ({ readable_filename }) =>
               readable_filename ? (
-                <div style={{ wordWrap: 'break-word', maxWidth: '18vw' }}>
+                <div style={{ wordWrap: 'break-word' }} className="">
                   {readable_filename}
                 </div>
               ) : (
                 ''
               ),
-            width: '18vw',
+            // width: '14vw',
+            width: isSmallScreen ? '35vw' : '14vw',
             sortable: true,
             filter: (
               <TextInput
@@ -461,14 +464,14 @@ export function ProjectFilesTable({
             title: 'URL',
             render: ({ url }) =>
               url ? (
-                <div style={{ wordWrap: 'break-word', maxWidth: '18vw' }}>
+                <div style={{ wordWrap: 'break-word', maxWidth: '14vw' }}>
                   {url}
                 </div>
               ) : (
                 ''
               ),
             sortable: true,
-            width: '18vw',
+            width: '14vw',
             filter: (
               <TextInput
                 label="URL"
@@ -501,14 +504,13 @@ export function ProjectFilesTable({
             title: 'The Starting URL of Web Scraping',
             render: ({ base_url }) =>
               base_url ? (
-                <div style={{ wordWrap: 'break-word', maxWidth: '18vw' }}>
-                  {base_url}
-                </div>
+                <div style={{ wordWrap: 'break-word' }}>{base_url}</div>
               ) : (
                 ''
               ),
             sortable: true,
-            width: '18vw',
+            // width: '10vw',
+            width: isSmallScreen ? '12vw' : '12vw',
             filter: (
               <TextInput
                 label="The Starting URL of Web Scraping"
@@ -540,8 +542,15 @@ export function ProjectFilesTable({
             accessor: 'created_at',
             title: 'Date created',
             render: ({ created_at }) =>
-              created_at ? new Date(created_at).toLocaleString() : '',
-            width: 130,
+              created_at ? (
+                <div style={{ wordWrap: 'break-word' }}>
+                  {new Date(created_at).toLocaleString()}
+                </div>
+              ) : (
+                ''
+              ),
+            // width: 130,
+            width: isSmallScreen ? 60 : 130,
             sortable: true,
             // TODO: Think about how to allow filtering on date... need different UI to select date range
             // filter: (