From 3457e6f072b2c8f084577515e9aaed377181911c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=99=82=E6=B5=81?= Date: Sat, 20 Jul 2024 07:15:45 +0000 Subject: [PATCH 1/6] Stack link preview cards horizontally on mobile Closes #274. --- components/Hyperlinks.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/components/Hyperlinks.js b/components/Hyperlinks.js index a1eeb7f1..6bfb476a 100644 --- a/components/Hyperlinks.js +++ b/components/Hyperlinks.js @@ -8,6 +8,16 @@ import { HyperlinkIcon } from 'components/icons'; const useStyles = makeStyles(theme => ({ root: { + display: 'flex', + flexFlow: 'row', + flexWrap: 'nowrap', + overflowX: 'auto', + [theme.breakpoints.up('sm')]: { + flexWrap: 'wrap', + overflowX: 'visible' + }, + }, + linkcard: { padding: '12px 16px', margin: '0 8px 8px 0', background: theme.palette.secondary[50], @@ -136,7 +146,7 @@ function Hyperlink({ hyperlink, rel = '' }) { const classes = useStyles({ topImageUrl }); return ( -
+

{title}

@@ -183,12 +193,11 @@ function Hyperlinks({ hyperlinks, pollingType, pollingId, rel }) { if (hyperlinks && hyperlinks.length === 0) return null; + const classes = useStyles(); return ( From fc655bca1d1590de0c10d8f22305f436fa4676fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=99=82=E6=B5=81?= Date: Sat, 20 Jul 2024 07:27:22 +0000 Subject: [PATCH 2/6] Cut off side gutters This allows using the whole horizontal screen space when scrolling horizontally. See #274. --- components/Hyperlinks.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/Hyperlinks.js b/components/Hyperlinks.js index 6bfb476a..7fb00633 100644 --- a/components/Hyperlinks.js +++ b/components/Hyperlinks.js @@ -16,6 +16,11 @@ const useStyles = makeStyles(theme => ({ flexWrap: 'wrap', overflowX: 'visible' }, + '--gutter': `${theme.spacing(2)}px`, + marginLeft: 'calc(-1 * var(--gutter))', + marginRight: 'calc(-1 * var(--gutter))', + paddingLeft: 'var(--gutter)', + paddingRight: 'var(--gutter)' }, linkcard: { padding: '12px 16px', From a40a99530842406b590ddefcae06ae5c1cbd8b68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=99=82=E6=B5=81?= Date: Sat, 20 Jul 2024 07:42:21 +0000 Subject: [PATCH 3/6] Only scroll links when there are two links or more See #274. --- components/Hyperlinks.js | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/components/Hyperlinks.js b/components/Hyperlinks.js index 7fb00633..92d501ae 100644 --- a/components/Hyperlinks.js +++ b/components/Hyperlinks.js @@ -10,17 +10,7 @@ const useStyles = makeStyles(theme => ({ root: { display: 'flex', flexFlow: 'row', - flexWrap: 'nowrap', - overflowX: 'auto', - [theme.breakpoints.up('sm')]: { - flexWrap: 'wrap', - overflowX: 'visible' - }, - '--gutter': `${theme.spacing(2)}px`, - marginLeft: 'calc(-1 * var(--gutter))', - marginRight: 'calc(-1 * var(--gutter))', - paddingLeft: 'var(--gutter)', - paddingRight: 'var(--gutter)' + flexWrap: 'wrap', }, linkcard: { padding: '12px 16px', @@ -38,6 +28,19 @@ const useStyles = makeStyles(theme => ({ fontSize: 14, }, }, + multilink: { + flexWrap: 'nowrap', + overflowX: 'auto', + [theme.breakpoints.up('sm')]: { + flexWrap: 'wrap', + overflowX: 'visible' + }, + '--gutter': `${theme.spacing(2)}px`, + marginLeft: 'calc(-1 * var(--gutter))', + marginRight: 'calc(-1 * var(--gutter))', + paddingLeft: 'var(--gutter)', + paddingRight: 'var(--gutter)' + }, url: { color: theme.palette.secondary[300], display: 'flex', @@ -199,9 +202,13 @@ function Hyperlinks({ hyperlinks, pollingType, pollingId, rel }) { if (hyperlinks && hyperlinks.length === 0) return null; const classes = useStyles(); + var className = `${classes.root}`; + if (hyperlinks.length > 1) { + className += ` ${classes.multilink}`; + } return ( Date: Sat, 20 Jul 2024 07:45:52 +0000 Subject: [PATCH 4/6] Ease scrollability discoverability Make the link a bit shorter so that it is more obvious that there is a another link partially hidden. --- components/Hyperlinks.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/Hyperlinks.js b/components/Hyperlinks.js index 92d501ae..84a1655b 100644 --- a/components/Hyperlinks.js +++ b/components/Hyperlinks.js @@ -39,7 +39,10 @@ const useStyles = makeStyles(theme => ({ marginLeft: 'calc(-1 * var(--gutter))', marginRight: 'calc(-1 * var(--gutter))', paddingLeft: 'var(--gutter)', - paddingRight: 'var(--gutter)' + paddingRight: 'var(--gutter)', + '& article': { + maxWidth: '90%', + } }, url: { color: theme.palette.secondary[300], From 0d044f5bb0fef721bb5e5e6a1c0ab8d0e5ebb76e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=99=82=E6=B5=81?= Date: Sat, 20 Jul 2024 08:02:29 +0000 Subject: [PATCH 5/6] Fix and simplify horizontal scroll for mobile --- components/Hyperlinks.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/components/Hyperlinks.js b/components/Hyperlinks.js index 84a1655b..6270fafb 100644 --- a/components/Hyperlinks.js +++ b/components/Hyperlinks.js @@ -29,20 +29,18 @@ const useStyles = makeStyles(theme => ({ }, }, multilink: { - flexWrap: 'nowrap', - overflowX: 'auto', - [theme.breakpoints.up('sm')]: { - flexWrap: 'wrap', - overflowX: 'visible' + [theme.breakpoints.down('sm')]: { + flexWrap: 'nowrap', + overflowX: 'auto', + '--gutter': `${theme.spacing(2)}px`, + marginLeft: 'calc(-1 * var(--gutter))', + marginRight: 'calc(-1 * var(--gutter))', + paddingLeft: 'var(--gutter)', + paddingRight: 'var(--gutter)', + '& article': { + maxWidth: '90%', + } }, - '--gutter': `${theme.spacing(2)}px`, - marginLeft: 'calc(-1 * var(--gutter))', - marginRight: 'calc(-1 * var(--gutter))', - paddingLeft: 'var(--gutter)', - paddingRight: 'var(--gutter)', - '& article': { - maxWidth: '90%', - } }, url: { color: theme.palette.secondary[300], From ab0688a15036f45c54991dfc50102d565e262e05 Mon Sep 17 00:00:00 2001 From: MrOrz Date: Sun, 21 Jul 2024 17:56:34 +0800 Subject: [PATCH 6/6] fix(Hyperlinks): lint and rule of React hook --- components/Hyperlinks.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/components/Hyperlinks.js b/components/Hyperlinks.js index 6270fafb..6574d051 100644 --- a/components/Hyperlinks.js +++ b/components/Hyperlinks.js @@ -39,7 +39,7 @@ const useStyles = makeStyles(theme => ({ paddingRight: 'var(--gutter)', '& article': { maxWidth: '90%', - } + }, }, }, url: { @@ -196,24 +196,19 @@ function PollingHyperlink({ pollingType, pollingId }) { * @param {string?} props.rel - rel prop for the hyperlink (other than noopener and noreferrer) */ function Hyperlinks({ hyperlinks, pollingType, pollingId, rel }) { + const classes = useStyles(); if (!((pollingId && pollingType) || (!pollingId && !pollingType))) { throw new Error('pollingType and pollingId must be specified together'); } if (hyperlinks && hyperlinks.length === 0) return null; - const classes = useStyles(); - var className = `${classes.root}`; + let className = `${classes.root}`; if (hyperlinks.length > 1) { className += ` ${classes.multilink}`; } return ( - + {(hyperlinks || []).map((hyperlink, idx) => ( ))}