tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Use headings and lists in footer

Browse Source 
Port 90e505d295792ead6e4dd4f83bc114ed188a4946 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion 2026-05-22 16:08:51 +02:00 committed by Claire
parent f69f8fbb73
commit 40aa81560d
6 changed files with 157 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/features/about/index.jsx
View File

@ -164,7 +164,7 @@ class About extends PureComponent {
))} ))}
</Section> </Section>
<LinkFooter /> <LinkFooter context='about' />
<div className='about__footer'> <div className='about__footer'>
<p><FormattedMessage id='about.fork_disclaimer' defaultMessage='Glitch-soc is free open source software forked from Mastodon.' /></p> <p><FormattedMessage id='about.fork_disclaimer' defaultMessage='Glitch-soc is free open source software forked from Mastodon.' /></p>

2
app/javascript/flavours/glitch/features/getting_started/index.tsx
View File

@ -13,7 +13,7 @@ const GettingStarted: React.FC = () => {
<Column> <Column>
<NavigationPanel multiColumn /> <NavigationPanel multiColumn />
<LinkFooter multiColumn /> <LinkFooter context='multi-column' />
<Helmet> <Helmet>
<title> <title>

2
app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx
View File

@ -51,7 +51,7 @@ export const ComposePanel: React.FC = () => {
{signedIn && !hideComposer && <ComposeFormContainer singleColumn />} {signedIn && !hideComposer && <ComposeFormContainer singleColumn />}
{signedIn && hideComposer && <div className='compose-form' />} {signedIn && hideComposer && <div className='compose-form' />}
<LinkFooter multiColumn={!singleColumn} /> <LinkFooter context={singleColumn ? 'default' : 'multi-column'} />
</div> </div>
); );
}; };

61
app/javascript/flavours/glitch/features/ui/components/link_footer.module.scss Normal file
View File

@ -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;
}

170
app/javascript/flavours/glitch/features/ui/components/link_footer.tsx
View File

@ -11,94 +11,110 @@ import {
termsOfServiceEnabled, termsOfServiceEnabled,
} from 'flavours/glitch/initial_state'; } 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<{ export const LinkFooter: React.FC<{
multiColumn: boolean; context?: 'default' | 'multi-column' | 'about';
}> = ({ multiColumn }) => { }> = ({ context = 'default' }) => {
const multiColumn = context === 'multi-column';
return ( return (
<div className='link-footer'> <footer className={classes.wrapper} data-context={context}>
<p> <section>
<strong>{domain}</strong>:{' '} <h2 className={classes.heading}>{`${domain}:`}</h2>
<Link to='/about' target={multiColumn ? '_blank' : undefined}> <ul className={classes.list}>
<FormattedMessage <li>
id='footer.about_this_server' <Link to='/about' target={multiColumn ? '_blank' : undefined}>
defaultMessage='About'
/>
</Link>
{statusPageUrl && (
<>
<DividingCircle />
<a href={statusPageUrl} target='_blank' rel='noopener'>
<FormattedMessage id='footer.status' defaultMessage='Status' />
</a>
</>
)}
{canProfileDirectory && (
<>
<DividingCircle />
<Link to='/directory'>
<FormattedMessage <FormattedMessage
id='footer.directory' id='footer.about_this_server'
defaultMessage='Profiles directory' defaultMessage='About'
/> />
</Link> </Link>
</> </li>
)} {statusPageUrl && (
<DividingCircle /> <li>
<Link <a href={statusPageUrl} target='_blank' rel='noopener'>
to='/privacy-policy' <FormattedMessage id='footer.status' defaultMessage='Status' />
target={multiColumn ? '_blank' : undefined} </a>
rel='privacy-policy' </li>
> )}
<FormattedMessage {canProfileDirectory && (
id='footer.privacy_policy' <li>
defaultMessage='Privacy policy' <Link to='/directory'>
/> <FormattedMessage
</Link> id='footer.directory'
{termsOfServiceEnabled && ( defaultMessage='Profiles directory'
<> />
<DividingCircle /> </Link>
</li>
)}
<li>
<Link <Link
to='/terms-of-service' to='/privacy-policy'
target={multiColumn ? '_blank' : undefined} target={multiColumn ? '_blank' : undefined}
rel='terms-of-service' rel='privacy-policy'
> >
<FormattedMessage <FormattedMessage
id='footer.terms_of_service' id='footer.privacy_policy'
defaultMessage='Terms of service' defaultMessage='Privacy policy'
/> />
</Link> </Link>
</> </li>
)} {termsOfServiceEnabled && (
</p> <li>
<Link
<p> to='/terms-of-service'
<strong>Mastodon</strong>:{' '} target={multiColumn ? '_blank' : undefined}
<a href='https://joinmastodon.org' target='_blank' rel='noopener'> rel='terms-of-service'
<FormattedMessage id='footer.about' defaultMessage='About' /> >
</a> <FormattedMessage
<DividingCircle /> id='footer.terms_of_service'
<a href='https://joinmastodon.org/apps' target='_blank' rel='noopener'> defaultMessage='Terms of service'
<FormattedMessage id='footer.get_app' defaultMessage='Get the app' /> />
</a> </Link>
<DividingCircle /> </li>
<Link to='/keyboard-shortcuts'> )}
<FormattedMessage </ul>
id='footer.keyboard_shortcuts' </section>
defaultMessage='Keyboard shortcuts' <section>
/> <h2 className={classes.heading}>Mastodon:</h2>
</Link> <ul className={classes.list}>
<DividingCircle /> <li>
<a href={source_url} rel='noopener' target='_blank'> <a href='https://joinmastodon.org' target='_blank' rel='noopener'>
<FormattedMessage <FormattedMessage id='footer.about' defaultMessage='About' />
id='footer.source_code' </a>
defaultMessage='View source code' </li>
/> <li>
</a> <a
<DividingCircle /> href='https://joinmastodon.org/apps'
<span className='version'>v{version}</span> target='_blank'
</p> rel='noopener'
</div> >
<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>
); );
}; };

47
app/javascript/flavours/glitch/styles/mastodon/components.scss
View File

@ -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 { .about {
padding: 20px; padding: 20px;
border-top: 1px solid var(--color-border-primary); 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 { .account {
padding: 0; padding: 0;
border: 0; border: 0;