LogalDeveloper/owncast
0
Fork 0
Code Activity

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
2 changed files with 16 additions and 22 deletions
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 { .footer {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
height: var(--footer-height); height: var(--footer-height);
justify-content: space-between; justify-content: space-between;
flex-direction: row; flex-direction: row;
@@ -19,11 +20,10 @@
} }
.links { .links {
column-gap: 2rem;
width: auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: row; 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 }) => ( export const Footer: FC<FooterProps> = ({ version }) => (
<div className={styles.footer}> <div className={styles.footer}>
<div className={styles.text}> <span>
Powered by <a href="https://owncast.online">{version}</a> Powered by <a href="https://owncast.online">{version}</a>
</div> </span>
<div className={styles.links}> <span className={styles.links}>
<div className={styles.item}> <a href="https://owncast.online/docs" target="_blank" rel="noreferrer">
<a href="https://owncast.online/docs" target="_blank" rel="noreferrer"> Documentation
Documentation </a>
</a> <a href="https://owncast.online/help" target="_blank" rel="noreferrer">
</div> Contribute
<div className={styles.item}> </a>
<a href="https://owncast.online/help" target="_blank" rel="noreferrer"> <a href="https://github.com/owncast/owncast" target="_blank" rel="noreferrer">
Contribute Source
</a> </a>
</div> </span>
<div className={styles.item}>
<a href="https://github.com/owncast/owncast" target="_blank" rel="noreferrer">
Source
</a>
</div>
</div>
</div> </div>
); );
export default Footer; export default Footer;