LogalDeveloper/owncast
0
Fork 0
Code Activity

Update footer

Browse Source
This commit is contained in:
Gabe Kangas
2022-08-29 23:33:30 -07:00
parent 6954bb5f37
commit 6c06f4fd67
3 changed files with 123 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/ui/Content/Content.tsx
View File

@@ -110,6 +110,7 @@ export default function ContentComponent() {
}); });
return ( return (
<div>
<Content className={rootClassName}> <Content className={rootClassName}>
<div className={s.leftContent}> <div className={s.leftContent}>
<Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} /> <Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
@@ -190,10 +191,11 @@ export default function ContentComponent() {
<FollowerCollection /> <FollowerCollection />
</TabPane> </TabPane>
</Tabs> </Tabs>
{!isMobile && <Footer version={version} />}
</div> </div>
</div> </div>
{isChatVisible && !isMobile && <Sidebar />} {isChatVisible && !isMobile && <Sidebar />}
</Content> </Content>
{!isMobile && <Footer version={version} />}
</div>
); );
} }

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

@@ -1,7 +1,32 @@
.footer { .footer {
font-size: 0.85em; display: flex;
font-weight: 500; justify-content: space-between;
color: var(--theme-color-palette-1); flex-direction: row;
background-color: transparent; background-color: var(--theme-color-background-header);
padding: var(--content-padding); width: 100%;
color: var(--theme-color-components-text-on-dark);
font-family: var(--theme-text-body-font-family);
padding: 0.6em;
font-size: 0.8rem;
font-weight: 600;
opacity: 0.7;
border-top: 1px solid rgba(214, 211, 211, 0.5);
@media (max-width: 768px) {
display: none;
}
a {
color: var(--theme-text-secondary);
}
.links {
display: flex;
justify-content: space-between;
flex-direction: row;
.item {
margin-left: 1.2em;
}
}
} }

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

@@ -1,8 +1,5 @@
import { Layout } from 'antd';
import s from './Footer.module.scss'; import s from './Footer.module.scss';
const { Footer } = Layout;
interface Props { interface Props {
version: string; version: string;
} }
@@ -11,8 +8,27 @@ export default function FooterComponent(props: Props) {
const { version } = props; const { version } = props;
return ( return (
<Footer className={s.footer}> <div className={s.footer}>
<a href="https://owncast.online">{version}</a> <div className={s.text}>
</Footer> Powered by <a href="https://owncast.online">{version}</a>
</div>
<div className={s.links}>
<div className={s.item}>
<a href="https://owncast.online/docs" target="_blank" rel="noreferrer">
Documentation
</a>
</div>
<div className={s.item}>
<a href="https://owncast.online/help" target="_blank" rel="noreferrer">
Contribute
</a>
</div>
<div className={s.item}>
<a href="https://github.com/owncast/owncast" target="_blank" rel="noreferrer">
Source
</a>
</div>
</div>
</div>
); );
} }