ADD content summaries to post list items

```
AnubisLMS · Jul 20, 2023 · b3d47f6 · b3d47f6
1 parent c2ad04d
commit b3d47f6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/web/src/components/forums/PostListItem/PostListItem.jsx b/web/src/components/forums/PostListItem/PostListItem.jsx
@@ -16,6 +16,7 @@ export default function PostListItem({
   title,
   category,
   user,
+  content,
   date,
   seenCount,
   seen = false,
@@ -35,7 +36,10 @@ export default function PostListItem({
         <Typography className={classes.title}>
           {title}
         </Typography>
-        <Box className={classes.error}>
+        <Typography variant="body2" className={classes.summary}>
+          {content}
+        </Typography>
+        <Box className={classes.dataSummary}>
           <Box className={classes.infoContainer}>
             <VisibilityIcon className={classes.icon} />
             <Typography>

diff --git a/web/src/components/forums/PostListItem/PostListItem.styles.jsx b/web/src/components/forums/PostListItem/PostListItem.styles.jsx
@@ -7,6 +7,7 @@ export const useStyles = makeStyles((theme) => ({
     borderRadius: '3px',
     width: '100%',
     display: 'flex',
+    overflow: 'hidden',
     alignItems: 'center',
     gap: theme.spacing(1.5),
     cursor: 'pointer',
@@ -30,11 +31,20 @@ export const useStyles = makeStyles((theme) => ({
   },
   content: {
     display: 'flex',
+    overflow: 'hidden',
     flexDirection: 'column',
     justifyContent: 'center',
     gap: '5px',
   },
-  error: {
+  summary: { // i want two lines of text
+    margin: 0,
+    opacity: '.8',
+    fontSize: '0.8rem',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  dataSummary: {
     display: 'flex',
     alignItems: 'center',
     gap: '10px',
@@ -48,6 +58,7 @@ export const useStyles = makeStyles((theme) => ({
     display: 'flex',
     alignItems: 'center',
     gap: '5px',
+    fontSize: '0.8rem',
   },
   icon: {
     fontSize: '14px',