Skip to content

Commit

Permalink
Merge pull request flathub-infra#96 from razzeee/footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@razzeee @barthalion
razzeee authored and barthalion committed Mar 25, 2022
2 parents 59ead60 + bd8c018 commit 0146f8c
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 71 deletions.
24 changes: 18 additions & 6 deletions frontend/src/components/layout/Footer.module.scss
View file
@@ -1,20 +1,32 @@
#footer {
border-top: 1px solid var(--main-color);
display: flex;
flex-direction: column;
padding: 48px;
margin-top: 60px;
justify-content: center;

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
flex-direction: row;
.footerContainer {
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0px 0px;
justify-items: center;
max-width: 900px;
@media (max-width: 992px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
}

a {
color: inherit;
}

.fullWidth {
grid-column: 1 / -1;
}

.footerSection {
margin: 12px;
min-width: 200px;
Expand Down
145 changes: 80 additions & 65 deletions frontend/src/components/layout/Footer.tsx
View file
Expand Up @@ -3,82 +3,97 @@ import styles from './Footer.module.scss'

const Footer = () => (
<footer id={styles.footer}>
<div className={styles.footerSection}>
<div className={styles.footerTitle}>Applications</div>
<div className={styles.footerItems}>
<div className={styles.footerItem}>
<Link href='/apps/collection/popular'>Popular</Link>
</div>
<div className={styles.footerItem}>
<Link href='/apps/collection/recently-updated'>New & Updated</Link>
</div>
<div className={styles.footerItem}>
<Link href='/apps/collection/editors-choice-apps'>
Editor&apos;s Choice
</Link>
</div>
<div className={styles.footerItem}>
<Link href='/apps/collection/editors-choice-games'>
Editor&apos;s Choice Games
</Link>
</div>
<div className={styles.footerItem}>
<Link href='/apps'>Browse Apps</Link>
</div>
<div className={styles.footerItem}>
<Link href='/feeds'>RSS Feeds</Link>
<div className={styles.footerContainer}>
<div className={styles.footerSection}>
<div className={styles.footerTitle}>Applications</div>
<div className={styles.footerItems}>
<div className={styles.footerItem}>
<Link href='/apps/collection/popular'>Popular</Link>
</div>
<div className={styles.footerItem}>
<Link href='/apps/collection/recently-updated'>New & Updated</Link>
</div>
<div className={styles.footerItem}>
<Link href='/apps/collection/editors-choice-apps'>
Editor&apos;s Choice
</Link>
</div>
<div className={styles.footerItem}>
<Link href='/apps/collection/editors-choice-games'>
Editor&apos;s Choice Games
</Link>
</div>
<div className={styles.footerItem}>
<Link href='/apps'>Browse Apps</Link>
</div>
<div className={styles.footerItem}>
<Link href='/feeds'>RSS Feeds</Link>
</div>
</div>
</div>
</div>

<div className={styles.footerSection}>
<div className={styles.footerTitle}>Community</div>
<div className={styles.footerItems}>
<div className={styles.footerItem}>
<a href='https://flatpak.org/about/'>Get involved</a>
</div>
<div className={styles.footerItem}>
<a href='https://discourse.flathub.org/'>Forum</a>
</div>
<div className={styles.footerItem}>
<a href='https://twitter.com/FlatpakApps'>Follow us</a>
<div className={styles.footerSection}>
<div className={styles.footerTitle}>Community</div>
<div className={styles.footerItems}>
<div className={styles.footerItem}>
<a href='https://flatpak.org/about/'>Get involved</a>
</div>
<div className={styles.footerItem}>
<a href='https://discourse.flathub.org/'>Forum</a>
</div>
<div className={styles.footerItem}>
<a href='https://twitter.com/FlatpakApps'>Follow us</a>
</div>
</div>
</div>
</div>

<div className={styles.footerSection}>
<div className={styles.footerTitle}>Developers</div>
<div className={styles.footerItems}>
<div className={styles.footerItem}>
<a href='https://github.com/flathub/flathub/wiki/App-Submission'>
Publish your app
</a>
</div>
<div className={styles.footerItem}>
<a href='http://docs.flatpak.org/'>Documentation</a>
</div>
<div className={styles.footerItem}>
<a href='https://github.com/flathub/'>Example build files</a>
</div>
<div className={styles.footerItem}>
<Link href='/badges'>Badges</Link>
<div className={styles.footerSection}>
<div className={styles.footerTitle}>Developers</div>
<div className={styles.footerItems}>
<div className={styles.footerItem}>
<a href='https://github.com/flathub/flathub/wiki/App-Submission'>
Publish your app
</a>
</div>
<div className={styles.footerItem}>
<a href='http://docs.flatpak.org/'>Documentation</a>
</div>
<div className={styles.footerItem}>
<a href='https://github.com/flathub/'>Example build files</a>
</div>
<div className={styles.footerItem}>
<Link href='/badges'>Badges</Link>
</div>
</div>
</div>
</div>

<div className={styles.footerSection}>
<div className={styles.footerTitle}>Flathub</div>
<div className={styles.footerItems}>
<div className={styles.footerItem}>
<Link href='/about'>About Flathub</Link>
</div>
<div className={styles.footerItem}>
<Link href='/statistics'>Statistics</Link>
</div>
<div className={styles.footerItem}>
<a href='https://status.flathub.org/'>Flathub Status</a>
<div className={styles.footerSection}>
<div className={styles.footerTitle}>Flathub</div>
<div className={styles.footerItems}>
<div className={styles.footerItem}>
<Link href='/about'>About Flathub</Link>
</div>
<div className={styles.footerItem}>
<Link href='/statistics'>Statistics</Link>
</div>
<div className={styles.footerItem}>
<a href='https://status.flathub.org/'>Flathub Status</a>
</div>
</div>
</div>

<div
className={styles.fullWidth}
style={{ display: 'flex', justifyContent: 'center' }}
>
<a
href='https://github.com/flathub/frontend'
target='_blank'
rel='noreferrer'
>
Find the source code here
</a>
</div>
</div>
</footer>
)
Expand Down

0 comments on commit 0146f8c

Please sign in to comment.