From fd5271c1c45d27741be113489002107860132be4 Mon Sep 17 00:00:00 2001 From: MrOrz Date: Wed, 10 Jan 2024 13:17:12 +0800 Subject: [PATCH 1/3] feat(pages): fallback to link to terms on Github - Facebook terms checker sometimes fail to load terms for unknown reasons --- pages/terms.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/pages/terms.js b/pages/terms.js index 5f5c9257..8950349d 100644 --- a/pages/terms.js +++ b/pages/terms.js @@ -16,6 +16,9 @@ const TERMS_REVISIONS_URL = const TERMS_MARKDOWN_URL = 'https://raw.githubusercontent.com/cofacts/rumors-site/master/LEGAL.md'; +const TERMS_FALLBACK_URL = + 'https://github.com/cofacts/rumors-site/blob/master/LEGAL.md'; + // cdn.js URL and checksum from cdn.js website // const JS_LIBS = [ @@ -69,7 +72,16 @@ function Terms() { const [termsHtml, setTermsHtml] = useState(null); useEffect(() => { - const markdownPromise = fetch(TERMS_MARKDOWN_URL).then(resp => resp.text()); + const markdownPromise = fetch(TERMS_MARKDOWN_URL) + .then(resp => { + if (resp.status !== 200) throw resp.statusText; + return resp.text(); + }) + .catch(error => { + console.error('Failed to fetch terms markdown', error); + window.rollbar.error('Failed to fetch terms markdown', error); + return `Cannot load terms content due to "${error}"; please view the terms [here](${TERMS_FALLBACK_URL}) instead.`; + }); const scriptPromises = JS_LIBS.map(([src, integrity], idx) => { // Don't insert the same script when visit this page the second time @@ -103,13 +115,21 @@ function Terms() { {t`Github`} ); + const termFallbackLink = ( + {t`User Agreement`} + ); + return ( {t`User Agreement`} - {termsHtml ?
: t`Loading`} + {termsHtml ? ( +
+ ) : ( + jt`Loading ${termFallbackLink}...` + )}

{jt`See ${revisionLink} for other revisions of the user agreement.`}

From e681250adbf7165ade368416ab5da80342918968 Mon Sep 17 00:00:00 2001 From: MrOrz Date: Wed, 10 Jan 2024 13:26:52 +0800 Subject: [PATCH 2/3] fix(components): AppFooter always show full content --- components/AppLayout/AppFooter.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/components/AppLayout/AppFooter.js b/components/AppLayout/AppFooter.js index 2c1a5f51..544f6289 100644 --- a/components/AppLayout/AppFooter.js +++ b/components/AppLayout/AppFooter.js @@ -33,10 +33,13 @@ const useStyles = makeStyles(theme => ({ }, }, container: { - width: 800, + width: '100%', + maxWidth: 800, color: theme.palette.text.primary, + gap: 20, margin: 60, display: 'flex', + flexWrap: 'wrap', }, second: { display: 'flex', @@ -49,7 +52,8 @@ const useStyles = makeStyles(theme => ({ height: 'auto', }, column: { - flex: '1 1', + flex: '1 1 auto', + minWidth: 'max-content', // distribute width using longest content in the column }, linkTextWithIcon: { marginLeft: 12, @@ -169,12 +173,11 @@ function AppFooter() { const isDesktop = useMediaQuery('(min-width:768px)'); return ( - //
- {isDesktop && } - {isDesktop && } + +
From b430006d90912a1dfbd91b13e294f8fa49147e95 Mon Sep 17 00:00:00 2001 From: MrOrz Date: Wed, 10 Jan 2024 13:38:01 +0800 Subject: [PATCH 3/3] fix(components): adjust footer columns to distribute space in between - so that columns don't go too left visually --- components/AppLayout/AppFooter.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/AppLayout/AppFooter.js b/components/AppLayout/AppFooter.js index 544f6289..4cf9096a 100644 --- a/components/AppLayout/AppFooter.js +++ b/components/AppLayout/AppFooter.js @@ -40,6 +40,7 @@ const useStyles = makeStyles(theme => ({ margin: 60, display: 'flex', flexWrap: 'wrap', + justifyContent: 'space-between', }, second: { display: 'flex', @@ -52,7 +53,7 @@ const useStyles = makeStyles(theme => ({ height: 'auto', }, column: { - flex: '1 1 auto', + flex: '0 1 auto', minWidth: 'max-content', // distribute width using longest content in the column }, linkTextWithIcon: {