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>
<LinkFooter />
<LinkFooter context='about' />
<div className='about__footer'>
<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>
<NavigationPanel multiColumn />
<LinkFooter multiColumn />
<LinkFooter context='multi-column' />
<Helmet>
<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 && <div className='compose-form' />}
<LinkFooter multiColumn={!singleColumn} />
<LinkFooter context={singleColumn ? 'default' : 'multi-column'} />
</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,
} 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>
);
};

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 {
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;