Merge pull request #345 from cofacts/similar-messages

Similar messages side section in article detail
cofacts · Oct 8, 2020 · 5173cbb · 5173cbb
2 parents 1bc6871 + e18c1d3
commit 5173cbb
Showing 1 changed file with 74 additions and 44 deletions.
diff --git a/pages/article/[id].js b/pages/article/[id].js
@@ -31,7 +31,6 @@ import NewReplySection from 'components/NewReplySection';
 import ArticleInfo from 'components/ArticleInfo';
 import ArticleCategories from 'components/ArticleCategories';
 import TrendPlot from 'components/TrendPlot';
-import cx from 'clsx';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -80,45 +79,82 @@ const useStyles = makeStyles(theme => ({
     },
   },
   aside: {
-    flex: 1,
-    background: 'transparent',
-    minWidth: 0,
     [theme.breakpoints.up('md')]: {
-      padding: '21px 19px',
-      background: theme.palette.common.white,
+      minWidth: 0,
+      flex: 1,
+      padding: '0 20px',
+      background: theme.palette.background.paper,
+      borderRadius: theme.shape.borderRadius,
+    },
+  },
+  asideHeader: {
+    lineHeight: '20px',
+    padding: '12px 0',
+    fontWeight: 700,
+    [theme.breakpoints.up('md')]: {
+      padding: '20px 0 12px',
+      borderBottom: `1px solid ${theme.palette.secondary[500]}`,
+    },
+  },
+  asideItems: {
+    display: 'flex',
+    flexFlow: 'row',
+    overflowX: 'auto',
+
+    '--gutter': `${theme.spacing(2)}px`,
+    margin: `0 calc(-1 * var(--gutter))`,
+    padding: `0 var(--gutter)`,
+
+    '&::after': {
+      // Right-most gutter after the last item
+      content: '""',
+      flex: '0 0 var(--gutter)',
     },
-    '& h4': {
-      [theme.breakpoints.up('md')]: {
-        marginBottom: 0,
-        paddingBottom: 16,
-        borderBottom: `1px solid ${theme.palette.secondary[500]}`,
+
+    [theme.breakpoints.up('sm')]: {
+      '--gutter': `${theme.spacing(3)}px`,
+    },
+    [theme.breakpoints.up('md')]: {
+      '--gutter': 0,
+      flexFlow: 'column',
+      overflowX: 'visible',
+      '&::after': {
+        display: 'none',
       },
     },
   },
-  similarMessageContainer: {
-    backgroundColor: theme.palette.common.white,
-    minWidth: '100%',
-    padding: '17px 19px',
-    marginRight: theme.spacing(2),
-    borderRadius: 8,
+  asideItem: {
+    // override <a> defaults
     textDecoration: 'none',
     color: 'inherit',
+
+    [theme.breakpoints.down('sm')]: {
+      padding: 16,
+      background: theme.palette.background.paper,
+      borderRadius: theme.shape.borderRadius,
+      flex: '0 0 320px',
+      maxWidth: '66vw',
+      '& + &': {
+        marginLeft: 12,
+      },
+    },
+
     [theme.breakpoints.up('md')]: {
-      padding: '16px 0 0 0 ',
-      margin: 0,
-      width: 'auto',
-      borderBottom: `1px solid ${theme.palette.secondary[100]}`,
-      '&:last-child': {
-        borderBottom: 'none',
+      padding: '16px 0',
+      '& + &': {
+        borderTop: `1px solid ${theme.palette.secondary[100]}`,
       },
     },
   },
-  text: {
-    display: 'box',
+  asideItemText: {
+    display: '-webkit-box',
     overflow: 'hidden',
     boxOrient: 'vertical',
     textOverflow: 'ellipsis',
     lineClamp: 5,
+
+    // distance between ArticleInfo
+    marginBottom: 12,
   },
   lineFab: {
     position: 'fixed',
@@ -426,33 +462,27 @@ function ArticlePage() {
           </Card>
         </div>
 
-        <div className={cx(classes.aside)}>
-          <h4>{t`Similar messages`}</h4>
+        <aside className={classes.aside}>
+          <header className={classes.asideHeader}>{t`Similar messages`}</header>
           {similarArticles.length ? (
-            <Box
-              display="flex"
-              flexDirection={{ xs: 'row', md: 'column' }}
-              overflow="auto"
-            >
+            <div className={classes.asideItems}>
               {similarArticles.map(({ node }) => (
                 <Link key={node.id} href={`/article/${node.id}`}>
-                  <a className={classes.similarMessageContainer}>
-                    <article className={classes.text}>{node.text}</article>
-                    <Box pt={1.5} pb={2}>
-                      <ArticleInfo article={node} />
-                    </Box>
+                  <a className={classes.asideItem}>
+                    <article className={classes.asideItemText}>
+                      {node.text}
+                    </article>
+                    <ArticleInfo article={node} />
                   </a>
                 </Link>
               ))}
-            </Box>
+            </div>
           ) : (
-            <Box
-              textAlign="center"
-              pt={4}
-              pb={3}
-            >{t`No similar messages found`}</Box>
+            <Box textAlign="center" pt={4} pb={3}>
+              {t`No similar messages found`}
+            </Box>
           )}
-        </div>
+        </aside>
       </div>
       <Snackbar
         open={!!flashMessage}