From 40aa81560d0a7eae87a6a8e9ec687f3a8fb8564b Mon Sep 17 00:00:00 2001 From: diondiondion Date: Fri, 22 May 2026 16:08:51 +0200 Subject: [PATCH] [Glitch] Use headings and lists in footer Port 90e505d295792ead6e4dd4f83bc114ed188a4946 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/features/about/index.jsx | 2 +- .../glitch/features/getting_started/index.tsx | 2 +- .../features/ui/components/compose_panel.tsx | 2 +- .../ui/components/link_footer.module.scss | 61 +++++++ .../features/ui/components/link_footer.tsx | 170 ++++++++++-------- .../glitch/styles/mastodon/components.scss | 47 ----- 6 files changed, 157 insertions(+), 127 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/ui/components/link_footer.module.scss diff --git a/app/javascript/flavours/glitch/features/about/index.jsx b/app/javascript/flavours/glitch/features/about/index.jsx index 2bc89e796c..9b638c2c64 100644 --- a/app/javascript/flavours/glitch/features/about/index.jsx +++ b/app/javascript/flavours/glitch/features/about/index.jsx @@ -164,7 +164,7 @@ class About extends PureComponent { ))} - +

diff --git a/app/javascript/flavours/glitch/features/getting_started/index.tsx b/app/javascript/flavours/glitch/features/getting_started/index.tsx index f30598bb49..73a837969e 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.tsx +++ b/app/javascript/flavours/glitch/features/getting_started/index.tsx @@ -13,7 +13,7 @@ const GettingStarted: React.FC = () => { - + diff --git a/app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx b/app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx index f1c4e508db..54f2730fd4 100644 --- a/app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx +++ b/app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx @@ -51,7 +51,7 @@ export const ComposePanel: React.FC = () => { {signedIn && !hideComposer && <ComposeFormContainer singleColumn />} {signedIn && hideComposer && <div className='compose-form' />} - <LinkFooter multiColumn={!singleColumn} /> + <LinkFooter context={singleColumn ? 'default' : 'multi-column'} /> </div> ); }; diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.module.scss b/app/javascript/flavours/glitch/features/ui/components/link_footer.module.scss new file mode 100644 index 0000000000..f2b094744e --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.module.scss @@ -0,0 +1,61 @@ +.wrapper { + z-index: 1; + flex: 0 0 auto; + display: flex; + flex-direction: column; + gap: 20px; + font-size: 13px; + color: var(--color-text-secondary); + + &[data-context='default'] { + padding: 20px 0; + } + + &[data-context='multi-column'] { + padding: 15px; + } + + &[data-context='about'] { + margin-top: 60px; + text-align: center; + font-size: 15px; + line-height: 22px; + + @media screen and (width >= 1175px) { + display: none; + } + } +} + +.heading { + display: inline; + margin-inline-end: 0.3em; + font-weight: 500; +} + +.list { + display: inline; + + li { + display: inline; + + &:not(:last-child)::after { + content: ' · '; + } + } + + a { + color: var(--color-text-secondary); + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } +} + +.version { + white-space: nowrap; +} diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.tsx b/app/javascript/flavours/glitch/features/ui/components/link_footer.tsx index c5be25ed17..14083f90a4 100644 --- a/app/javascript/flavours/glitch/features/ui/components/link_footer.tsx +++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.tsx @@ -11,94 +11,110 @@ import { termsOfServiceEnabled, } from 'flavours/glitch/initial_state'; -const DividingCircle: React.FC = () => <span aria-hidden>{' · '}</span>; +import classes from './link_footer.module.scss'; export const LinkFooter: React.FC<{ - multiColumn: boolean; -}> = ({ multiColumn }) => { + context?: 'default' | 'multi-column' | 'about'; +}> = ({ context = 'default' }) => { + const multiColumn = context === 'multi-column'; + return ( - <div className='link-footer'> - <p> - <strong>{domain}</strong>:{' '} - <Link to='/about' target={multiColumn ? '_blank' : undefined}> - <FormattedMessage - id='footer.about_this_server' - defaultMessage='About' - /> - </Link> - {statusPageUrl && ( - <> - <DividingCircle /> - <a href={statusPageUrl} target='_blank' rel='noopener'> - <FormattedMessage id='footer.status' defaultMessage='Status' /> - </a> - </> - )} - {canProfileDirectory && ( - <> - <DividingCircle /> - <Link to='/directory'> + <footer className={classes.wrapper} data-context={context}> + <section> + <h2 className={classes.heading}>{`${domain}:`}</h2> + <ul className={classes.list}> + <li> + <Link to='/about' target={multiColumn ? '_blank' : undefined}> <FormattedMessage - id='footer.directory' - defaultMessage='Profiles directory' + id='footer.about_this_server' + defaultMessage='About' /> </Link> - </> - )} - <DividingCircle /> - <Link - to='/privacy-policy' - target={multiColumn ? '_blank' : undefined} - rel='privacy-policy' - > - <FormattedMessage - id='footer.privacy_policy' - defaultMessage='Privacy policy' - /> - </Link> - {termsOfServiceEnabled && ( - <> - <DividingCircle /> + </li> + {statusPageUrl && ( + <li> + <a href={statusPageUrl} target='_blank' rel='noopener'> + <FormattedMessage id='footer.status' defaultMessage='Status' /> + </a> + </li> + )} + {canProfileDirectory && ( + <li> + <Link to='/directory'> + <FormattedMessage + id='footer.directory' + defaultMessage='Profiles directory' + /> + </Link> + </li> + )} + <li> <Link - to='/terms-of-service' + to='/privacy-policy' target={multiColumn ? '_blank' : undefined} - rel='terms-of-service' + rel='privacy-policy' > <FormattedMessage - id='footer.terms_of_service' - defaultMessage='Terms of service' + id='footer.privacy_policy' + defaultMessage='Privacy policy' /> </Link> - </> - )} - </p> - - <p> - <strong>Mastodon</strong>:{' '} - <a href='https://joinmastodon.org' target='_blank' rel='noopener'> - <FormattedMessage id='footer.about' defaultMessage='About' /> - </a> - <DividingCircle /> - <a href='https://joinmastodon.org/apps' target='_blank' rel='noopener'> - <FormattedMessage id='footer.get_app' defaultMessage='Get the app' /> - </a> - <DividingCircle /> - <Link to='/keyboard-shortcuts'> - <FormattedMessage - id='footer.keyboard_shortcuts' - defaultMessage='Keyboard shortcuts' - /> - </Link> - <DividingCircle /> - <a href={source_url} rel='noopener' target='_blank'> - <FormattedMessage - id='footer.source_code' - defaultMessage='View source code' - /> - </a> - <DividingCircle /> - <span className='version'>v{version}</span> - </p> - </div> + </li> + {termsOfServiceEnabled && ( + <li> + <Link + to='/terms-of-service' + target={multiColumn ? '_blank' : undefined} + rel='terms-of-service' + > + <FormattedMessage + id='footer.terms_of_service' + defaultMessage='Terms of service' + /> + </Link> + </li> + )} + </ul> + </section> + <section> + <h2 className={classes.heading}>Mastodon:</h2> + <ul className={classes.list}> + <li> + <a href='https://joinmastodon.org' target='_blank' rel='noopener'> + <FormattedMessage id='footer.about' defaultMessage='About' /> + </a> + </li> + <li> + <a + href='https://joinmastodon.org/apps' + target='_blank' + rel='noopener' + > + <FormattedMessage + id='footer.get_app' + defaultMessage='Get the app' + /> + </a> + </li> + <li> + <Link to='/keyboard-shortcuts'> + <FormattedMessage + id='footer.keyboard_shortcuts' + defaultMessage='Keyboard shortcuts' + /> + </Link> + </li> + <li> + <a href={source_url} rel='noopener' target='_blank'> + <FormattedMessage + id='footer.source_code' + defaultMessage='View source code' + /> + </a> + </li> + <li className={classes.version}>v{version}</li> + </ul> + </section> + </footer> ); }; diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss index eb514988f5..d3d1ed484f 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/components.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss @@ -9977,41 +9977,6 @@ noscript { } } -.link-footer { - flex: 0 0 auto; - padding-top: 20px; - z-index: 1; - font-size: 13px; - - .column & { - padding: 15px; - } - - p { - color: var(--color-text-secondary); - margin-bottom: 20px; - - .version { - white-space: nowrap; - } - - strong { - font-weight: 500; - } - - a { - color: var(--color-text-secondary); - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - } -} - .about { padding: 20px; border-top: 1px solid var(--color-border-primary); @@ -10148,18 +10113,6 @@ noscript { } } - .link-footer { - padding: 0; - margin-top: 60px; - text-align: center; - font-size: 15px; - line-height: 22px; - - @media screen and (min-width: $no-gap-breakpoint) { - display: none; - } - } - .account { padding: 0; border: 0;