Merge pull request #9 from anishjangra-dev/anish/sessions-page-ux

UX updates
SourabhJaz · Sep 28, 2024 · 365ffc1 · 365ffc1
2 parents 70d0fd4 + 29d77a5
commit 365ffc1
Show file tree

Hide file tree

Showing 14 changed files with 378 additions and 189 deletions.
diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "/upskill-club-web/static/js/main.60c33a45.js",
+    "main.js": "/upskill-club-web/static/js/main.3f1019cb.js",
     "index.html": "/upskill-club-web/index.html",
-    "main.60c33a45.js.map": "/upskill-club-web/static/js/main.60c33a45.js.map"
+    "main.3f1019cb.js.map": "/upskill-club-web/static/js/main.3f1019cb.js.map"
   },
   "entrypoints": [
-    "static/js/main.60c33a45.js"
+    "static/js/main.3f1019cb.js"
   ]
 }
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/upskill-club-web/favicon.ico"/><meta name="viewport" content="initial-scale=1,width=device-width"/><title>Upskill Club</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/><script type="text/javascript">!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="/upskill-club-web/static/js/main.60c33a45.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/upskill-club-web/favicon.ico"/><meta name="viewport" content="initial-scale=1,width=device-width"/><title>Upskill Club</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/><script type="text/javascript">!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="/upskill-club-web/static/js/main.3f1019cb.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/docs/static/js/main.3f1019cb.js b/docs/static/js/main.3f1019cb.js
diff --git a/docs/static/js/main.60c33a45.js.LICENSE.txt → docs/static/js/main.3f1019cb.js.LICENSE.txt b/docs/static/js/main.60c33a45.js.LICENSE.txt → docs/static/js/main.3f1019cb.js.LICENSE.txt
@@ -49,7 +49,7 @@
  */
 
 /**
- * @mui/styled-engine v6.1.0
+ * @mui/styled-engine v6.1.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

diff --git a/docs/static/js/main.3f1019cb.js.map b/docs/static/js/main.3f1019cb.js.map
diff --git a/docs/static/js/main.60c33a45.js b/docs/static/js/main.60c33a45.js
diff --git a/docs/static/js/main.60c33a45.js.map b/docs/static/js/main.60c33a45.js.map
diff --git a/src/App.js b/src/App.js
@@ -1,18 +1,18 @@
 import Container from '@mui/material/Container';
 import CssBaseline from '@mui/material/CssBaseline';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createTheme, ThemeProvider, responsiveFontSizes } from '@mui/material/styles';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Blog from './components/Blog';
 import Footer from './components/Footer';
 import CoursePage from './components/CoursePage';
 import SessionPage from './components/SessionPage';
 import { AuthorProfile } from './components/AuthorProfile';
-import AppAppBar from './components/AppAppBar'
+import AppAppBar from './components/AppAppBar';
 import About from './components/About';
 
 export default function App() {
   const mode = 'dark';
-  const defaultTheme = createTheme({ palette: { mode } });
+  const defaultTheme = responsiveFontSizes(createTheme({ palette: { mode } }));
 
   return (
     <ThemeProvider theme={defaultTheme}>

diff --git a/src/components/Author.tsx b/src/components/Author.tsx
@@ -1,10 +1,12 @@
+import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import AvatarGroup from '@mui/material/AvatarGroup';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { ParsedAuthor } from '../entities/interface';
 import { Utils } from '../common';
 import { SxProps, Theme } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
 
 const Author = (props: { authors: ParsedAuthor[]; createdAt: string; styleProps?: SxProps<Theme> }) => {
   const { authors, createdAt, styleProps } = props;
@@ -15,15 +17,15 @@ const Author = (props: { authors: ParsedAuthor[]; createdAt: string; styleProps?
     gap: 2,
     alignItems: 'center',
     justifyContent: 'space-between',
-    padding: '16px'
+    padding: '16px',
   };
 
   return (
     <Box sx={boxStyleProps}>
       <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center' }}>
         <AvatarGroup max={3}>
           {authors.map((author, index) => (
-            <Avatar key={index} alt={author.name} src={author.avatar} sx={{ width: 24, height: 24 }} />
+            <Avatar key={index} alt={author.name} src={author.avatar} sx={{ width: 30, height: 30 }} />
           ))}
         </AvatarGroup>
         <Typography variant="caption">{authors.map((author) => author.name).join(', ')}</Typography>
@@ -33,4 +35,68 @@ const Author = (props: { authors: ParsedAuthor[]; createdAt: string; styleProps?
   );
 };
 
-export { Author };
+const AuthorCard = (props: { authors: ParsedAuthor[]; createdAt: string; styleProps?: SxProps<Theme> }) => {
+  const { authors, createdAt, styleProps } = props;
+
+  const navigate = useNavigate();
+
+  const boxStyleProps: SxProps<Theme> = styleProps ?? {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 2,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '16px',
+  };
+
+  return (
+    <Box sx={boxStyleProps}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center' }}>
+        <AvatarGroup max={3}>
+          {authors.map((author, index) => (
+            <Avatar
+              key={index}
+              alt={author.name}
+              src={author.avatar}
+              sx={{ width: 44, height: 44, '&:hover': { cursor: 'pointer', opacity: 0.9 } }}
+              onClick={() => navigate(`/author/${author.id}`)}
+            />
+          ))}
+        </AvatarGroup>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }} gap={0.3}>
+          <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+            {authors.map((author, index) => {
+              return (
+                <React.Fragment key={author.id}>
+                  <Typography
+                    key={`{authorcard_${author.name}}`}
+                    variant="body1"
+                    color="text.secondary"
+                    sx={{
+                      '&:hover': { cursor: 'pointer', textDecoration: 'underline' },
+                      fontWeight: 'medium',
+                    }}
+                    onClick={() => navigate(`/author/${author.id}`)}
+                  >
+                    {index === authors.length - 1 ? (
+                      <Typography component={'span'} color="text.primary">
+                        {author.name}
+                      </Typography>
+                    ) : (
+                      <Typography component={'span'} style={{ marginRight: 2 }}>{`${author.name},`}</Typography>
+                    )}
+                  </Typography>
+                </React.Fragment>
+              );
+            })}
+          </Box>
+          <Typography variant="body2" color="text.secondary">
+            {Utils.getFormattedDate(createdAt)}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export { Author, AuthorCard };
diff --git a/src/components/AuthorProfile.tsx b/src/components/AuthorProfile.tsx
@@ -83,7 +83,7 @@ const AuthorProfile = () => {
               {authorProfileData.image_url ? undefined : Utils.getAuthorInitials(authorProfileData.name)}
             </Avatar>
             <Box>
-              <Typography variant="h3" marginBottom="5px">
+              <Typography variant="h3" marginBottom="5px" sx={{ fontWeight: 'medium' }}>
                 {authorProfileData.name}
               </Typography>
               <Typography variant="body1" color="text.secondary" gutterBottom fontStyle="italic">
@@ -109,7 +109,7 @@ const AuthorProfile = () => {
               {authorProfileData.image_url ? undefined : Utils.getAuthorInitials(authorProfileData.name)}
             </Avatar>
             <Box>
-              <Typography variant="h3" marginBottom="5px">
+              <Typography variant="h3" sx={{ fontWeight: 'medium' }} marginBottom="5px">
                 {authorProfileData.name}
               </Typography>
               <Typography variant="body1" color="text.secondary" gutterBottom fontStyle="italic">
@@ -123,7 +123,7 @@ const AuthorProfile = () => {
             </Box>
           </Box>
           <Box>
-            <Latest title="Latest Sessions" authorId={authorId} />
+            <Latest title="Latest Sessions" authorId={authorId} headingVariant="h3" />
           </Box>
         </Box>
       </Container>

diff --git a/src/components/Blog.tsx b/src/components/Blog.tsx
@@ -8,7 +8,7 @@ export default function Blog() {
     <Container maxWidth="lg" component="main">
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
         <MainContent />
-        <Latest title="Latest Sessions" order="desc" />
+        <Latest title="Latest Sessions" order="desc" headingVariant="h3" />
       </Box>
     </Container>
   );

diff --git a/src/components/CoursePage.tsx b/src/components/CoursePage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 import Box from '@mui/material/Box';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
 import Typography from '@mui/material/Typography';
 import CardMedia from '@mui/material/CardMedia';
 import Container from '@mui/material/Container';
@@ -10,7 +11,7 @@ import { useNavigate } from 'react-router-dom';
 import { UpskillClubApi } from '../apis';
 import { Utils } from '../common';
 import { ParsedCourse } from '../entities/interface';
-import { Author } from './Author';
+import { AuthorCard } from './Author';
 import { EntityParser } from '../entities';
 
 const renderCourseLoading = () => {
@@ -65,9 +66,52 @@ export default function CoursePage() {
     course && (
       <Container>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-          <Typography variant="h2" gutterBottom>
-            {course.title}
-          </Typography>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            <Breadcrumbs separator="›" aria-label="breadcrumb" sx={{ marginBottom: 1 }}>
+              <Typography
+                variant="body2"
+                color="text.secondary"
+                sx={{
+                  '&:hover': { cursor: 'pointer', textDecoration: 'underline' },
+                  fontWeight: 'medium',
+                }}
+                onClick={() => navigate(`/`)}
+              >
+                Home
+              </Typography>
+              <Typography
+                variant="body2"
+                color="text.secondary"
+                sx={{
+                  '&:hover': { cursor: 'pointer', textDecoration: 'underline' },
+                  fontWeight: 'medium',
+                }}
+                onClick={() => navigate(`/course/${course.id}`)}
+              >
+                {course.title}
+              </Typography>
+            </Breadcrumbs>
+            <Box>
+              <Typography variant="h2" sx={{ fontWeight: 'bold' }} gutterBottom>
+                {course.title}
+              </Typography>
+              <Typography variant="h6" color="text.secondary" gutterBottom>
+                {course.outline}
+              </Typography>
+            </Box>
+            <Box>
+              <AuthorCard
+                authors={course.authors}
+                createdAt={course.createdAt}
+                styleProps={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              />
+            </Box>
+          </Box>
           <Skeleton
             variant="rectangular"
             animation="wave"
@@ -81,31 +125,13 @@ export default function CoursePage() {
             image={course.image}
             alt={course.title}
             sx={{
-              height: 325,
+              height: 400,
               objectFit: 'cover',
               display: courseImageLoaded ? 'block' : 'none',
             }}
             onLoad={() => setCourseImageLoaded(true)}
           />
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-            <Box
-              sx={{ '&:hover': { cursor: 'pointer', borderBottom: '1px solid', borderColor: 'divider' } }}
-              onClick={() => navigate(`/author/${course.authors[0].id}`)}
-            >
-              <Author
-                authors={course.authors}
-                createdAt={course.createdAt}
-                styleProps={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                }}
-              />
-            </Box>
-            <Typography variant="body1">{course.outline}</Typography>
-          </Box>
-          <Latest courseId={id} title="Sessions" />
+          <Latest courseId={id} title="Sessions" displayTag={false} headingVariant="h3" />
         </Box>
       </Container>
     )

diff --git a/src/components/Latest.tsx b/src/components/Latest.tsx
@@ -5,8 +5,8 @@ import CardContent from '@mui/material/CardContent';
 import Grid from '@mui/material/Grid2';
 import Pagination from '@mui/material/Pagination';
 import Skeleton from '@mui/material/Skeleton';
-import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
+import Typography, { TypographyOwnProps } from '@mui/material/Typography';
+import { styled, SxProps } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 import { UpskillClubApi } from '../apis';
 import { useNavigate } from 'react-router-dom';
@@ -117,10 +117,20 @@ export default function Latest(props: {
   courseId?: string;
   authorId?: string;
   title: string;
-  style?: React.CSSProperties;
+  style?: SxProps;
   order?: string;
+  displayTag?: boolean;
+  headingVariant?: TypographyOwnProps['variant'];
 }) {
-  const { courseId, authorId, title, style, order } = props;
+  const {
+    courseId,
+    authorId,
+    title,
+    style = { marginTop: 5 },
+    order,
+    displayTag = true,
+    headingVariant = 'h2',
+  } = props;
 
   const [sessions, setSessions] = React.useState<ParsedSession[]>([]);
   const [totalCount, setTotalCount] = React.useState(0);
@@ -162,22 +172,24 @@ export default function Latest(props: {
   };
 
   return (
-    <div style={style}>
-      <Typography variant="h2" gutterBottom>
+    <Box sx={style}>
+      <Typography variant={headingVariant} sx={{ fontWeight: 'bold' }} gutterBottom>
         {title}
       </Typography>
       {sessionsLoading ? (
         renderSessionsLoading()
       ) : (
         <React.Fragment>
-          <Grid container spacing={8} columns={12} sx={{ my: 4 }}>
+          <Grid container spacing={8} columns={12} sx={{ marginBottom: 4 }}>
             {sessions.map((session, index) => (
               <Grid key={index} size={{ xs: 12, sm: 6 }}>
                 <SyledCard onClick={() => navigate(`/session/${session.id}`)}>
                   <SyledCardContent>
-                    <Typography gutterBottom variant="caption" component="div">
-                      {session.tag}
-                    </Typography>
+                    {displayTag && (
+                      <Typography gutterBottom variant="caption" component="div">
+                        {session.tag}
+                      </Typography>
+                    )}
                     <TitleTypography
                       gutterBottom
                       variant="h6"
@@ -219,6 +231,6 @@ export default function Latest(props: {
           </Box>
         </React.Fragment>
       )}
-    </div>
+    </Box>
   );
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/upskill-club-web/favicon.ico"/><meta name="viewport" content="initial-scale=1,width=device-width"/><title>Upskill Club</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/><script type="text/javascript">!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="/upskill-club-web/static/js/main.60c33a45.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/upskill-club-web/favicon.ico"/><meta name="viewport" content="initial-scale=1,width=device-width"/><title>Upskill Club</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/><script type="text/javascript">!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="/upskill-club-web/static/js/main.3f1019cb.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>