Browse Source
* - set vars for player container height and status bar height - use them to calculate mobile top spacing to adjust for tab content positioning * give main content section a min height, place footer absolutely at bottom; rm all the fixed footer styling * cleanup; restructure tabbed display logic and css a bit * Prettified Code! * cleanup * fix(story): footer story needs to be wrapped in RecoilRoot if it is to use Recoil * revert adding footer to mobile about section * prevent double scrolling --------- Co-authored-by: gingervitis <gingervitis@users.noreply.github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com>pull/3032/head
gingervitis
2 years ago
committed by
GitHub
11 changed files with 88 additions and 131 deletions
@ -1,27 +1,36 @@
@@ -1,27 +1,36 @@
|
||||
import { FC } from 'react'; |
||||
import { useRecoilValue } from 'recoil'; |
||||
import styles from './Footer.module.scss'; |
||||
import { ServerStatus } from '../../../interfaces/server-status.model'; |
||||
import { serverStatusState } from '../../stores/ClientConfigStore'; |
||||
|
||||
export type FooterProps = { |
||||
version: string; |
||||
dynamicPadding: string; |
||||
dynamicPaddingValue?: string; |
||||
}; |
||||
|
||||
export const Footer: FC<FooterProps> = ({ version, dynamicPadding }) => ( |
||||
<footer className={styles.footer} id="footer" style={{ paddingRight: dynamicPadding }}> |
||||
<span> |
||||
Powered by <a href="https://owncast.online">Owncast v{version}</a> |
||||
</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> |
||||
</footer> |
||||
); |
||||
export const Footer: FC<FooterProps> = ({ dynamicPaddingValue }) => { |
||||
const clientStatus = useRecoilValue<ServerStatus>(serverStatusState); |
||||
const { versionNumber } = clientStatus; |
||||
const dynamicPaddingStyle = dynamicPaddingValue |
||||
? { paddingRight: `calc(${dynamicPaddingValue} + var(--footer-padding-x)` } |
||||
: null; |
||||
return ( |
||||
<footer className={styles.footer} id="footer" style={dynamicPaddingStyle}> |
||||
<span> |
||||
Powered by <a href="https://owncast.online">Owncast v{versionNumber}</a> |
||||
</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> |
||||
</footer> |
||||
); |
||||
}; |
||||
export default Footer; |
||||
|
||||
Loading…
Reference in new issue