LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

On narrow screens, bump the footer links to a second row. Re #2260. (#2267)

Browse Source 
* On narrow screens, bump the footer links to a second row. Re #2260. Thanks to @kittee for CSS assistance.

* Prettified Code!

Co-authored-by: heller <heller@users.noreply.github.com>
This commit is contained in:
Matthew Heller 2022-10-26 17:23:49 -05:00 committed by GitHub
parent 2f03a077f3
commit 8d222860f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/ui/Footer/Footer.module.scss
View File

@ -1,6 +1,7 @@
.footer {
display: flex;
align-items: center;
flex-wrap: wrap;
height: var(--footer-height);
justify-content: space-between;
flex-direction: row;
@ -19,11 +20,10 @@
}
.links {
column-gap: 2rem;
width: auto;
display: flex;
justify-content: space-between;
flex-direction: row;
.item {
margin-left: 1.2em;
}
}
}

32
web/components/ui/Footer/Footer.tsx
View File

@ -7,26 +7,20 @@ export type FooterProps = {
export const Footer: FC<FooterProps> = ({ version }) => (
<div className={styles.footer}>
<div className={styles.text}>
<span>
Powered by <a href="https://owncast.online">{version}</a>
</div>
<div className={styles.links}>
<div className={styles.item}>
<a href="https://owncast.online/docs" target="_blank" rel="noreferrer">
Documentation
</a>
</div>
<div className={styles.item}>
<a href="https://owncast.online/help" target="_blank" rel="noreferrer">
Contribute
</a>
</div>
<div className={styles.item}>
<a href="https://github.com/owncast/owncast" target="_blank" rel="noreferrer">
Source
</a>
</div>
</div>
</span>
<span className={styles.links}>
<a href="https://owncast.online/docs" target="_blank" rel="noreferrer">
Documentation
</a>
<a href="https://owncast.online/help" target="_blank" rel="noreferrer">
Contribute
</a>
<a href="https://github.com/owncast/owncast" target="_blank" rel="noreferrer">
Source
</a>
</span>
</div>
);
export default Footer;