tooltips toegevoegd, breedte mainpage gefixt en alignment coursecards

SELab-2 · May 21, 2024 · 9fc1843 · 9fc1843
1 parent 1dbef51
commit 9fc1843
Show file tree

Hide file tree

Showing 12 changed files with 467 additions and 317 deletions.
diff --git a/frontend/frontend/src/components/CourseCard.tsx b/frontend/frontend/src/components/CourseCard.tsx
@@ -318,7 +318,7 @@ export function CourseCard({
                                             </Typography>
                                             <Typography
                                                 id="deadline"
-                                                minWidth={50}
+                                                minWidth={80}
                                             >
                                                 Deadline
                                             </Typography>
@@ -341,7 +341,7 @@ export function CourseCard({
                                             </Typography>
                                             <Typography
                                                 id="deadline"
-                                                minWidth={50}
+                                                minWidth={90}
                                             >
                                                 Deadline
                                             </Typography>
@@ -361,6 +361,20 @@ export function CourseCard({
                                         }}
                                     >
                                         <List disablePadding={true}>
+                                            {assignments.length === 0 && (
+                                                <Box
+                                                    display={'flex'}
+                                                    alignItems={'center'}
+                                                    justifyContent={'center'}
+                                                    py={6}
+                                                    flexGrow={1}
+                                                    height={'100%'}
+                                                >
+                                                    <Typography>
+                                                        {t('no_projects')}
+                                                    </Typography>
+                                                </Box>
+                                            )}
                                             {assignments
                                                 .filter(
                                                     (assignment) =>
@@ -377,9 +391,9 @@ export function CourseCard({
                                                         dueDate={
                                                             assignment.deadline
                                                                 ? dayjs(
-                                                                    assignment.deadline
+                                                                      assignment.deadline
                                                                   ).format(
-                                                                    'DD/MM/YYYY HH:mm'
+                                                                      'DD/MM/YYYY HH:mm'
                                                                   )
                                                                 : undefined
                                                         }
@@ -418,9 +432,9 @@ export function CourseCard({
                                                                 dueDate={
                                                                     assignment.deadline
                                                                         ? dayjs(
-                                                                            assignment.deadline
+                                                                              assignment.deadline
                                                                           ).format(
-                                                                            'DD/MM/YYYY HH:mm'
+                                                                              'DD/MM/YYYY HH:mm'
                                                                           )
                                                                         : undefined
                                                                 }

diff --git a/frontend/frontend/src/components/Header.tsx b/frontend/frontend/src/components/Header.tsx
@@ -167,16 +167,18 @@ export const Header = ({ variant, title }: Props) => {
                                 {title}
                             </Typography>
                             {variant === 'editable' && (
-                                <IconButton
-                                    onClick={handleEdit}
-                                    disableRipple={true}
-                                    sx={{
-                                        marginBottom: 1,
-                                        color: 'text.secondary',
-                                    }}
-                                >
-                                    <EditIcon />
-                                </IconButton>
+                                <Tooltip title={t('edit')}>
+                                    <IconButton
+                                        onClick={handleEdit}
+                                        disableRipple={true}
+                                        sx={{
+                                            marginBottom: 1,
+                                            color: 'background.default',
+                                        }}
+                                    >
+                                        <EditIcon />
+                                    </IconButton>
+                                </Tooltip>
                             )}
                         </Box>
 

diff --git a/frontend/frontend/src/components/TabSwitcher.tsx b/frontend/frontend/src/components/TabSwitcher.tsx
@@ -38,6 +38,7 @@ export default function TabSwitcher({
         <>
             <Tabs defaultValue={0} color={'background.default'}>
                 <Box
+                    width={'100%'}
                     display={'flex'}
                     flexDirection={'row'}
                     justifyContent={'space-between'}
@@ -84,7 +85,12 @@ export default function TabSwitcher({
                     )}
                 </Box>
                 {nodes.map((node, index) => (
-                    <TabPanel id={`node${index}`} key={index} value={index}>
+                    <TabPanel
+                        id={`node${index}`}
+                        key={index}
+                        value={index}
+                        sx={{ width: '100%' }}
+                    >
                         {node}
                     </TabPanel>
                 ))}
@@ -131,7 +137,7 @@ const Tab = styled(BaseTab)`
 
 const TabPanel = styled(BaseTabPanel)(
     ({ theme }) => `
-  width: "15%";
+  width: "100%";
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   padding: 20px 12px;

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
@@ -135,6 +135,10 @@ const english = {
     openinUi: 'Open in UI',
     openInEditor: 'Open in editor',
     no_params: 'No parameters where found in the template.',
+    save_scores: 'Save Scores',
+    add_course: 'Add course',
+    add_project: 'Add project',
+    no_projects: 'No projects',
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
@@ -135,6 +135,10 @@ const dutch = {
     openinUi: 'Open in UI',
     openInEditor: 'Open in editor',
     no_params: 'Geen parameters gevonden in de template.',
+    save_scores: 'Scores Opslaan',
+    add_course: 'Voeg vak toe',
+    add_project: 'Voeg project toe',
+    no_projects: 'Geen projecten',
 }
 
 export default dutch