Address some layout issues with odd content spacing on mobile, and footer position (#3022)
* - 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>
This commit is contained in:
gingervitis
@@ -4,22 +4,23 @@
|
||||
padding: var(--content-padding);
|
||||
}
|
||||
|
||||
.lowerSectionMobile {
|
||||
.lowerSectionMobileTabbed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
@include screen(tablet) {
|
||||
@include screen(tablet) {
|
||||
top: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@include screen(mobile) {
|
||||
//sets the position of tabbed content for online mode
|
||||
top: 280px;
|
||||
&.online {
|
||||
position: absolute;
|
||||
top: calc(var(--player-container-height) + var(--status-bar-height) + var(--header-height));
|
||||
}
|
||||
}
|
||||
|
||||
:global(.ant-tabs-nav) {
|
||||
@@ -29,15 +30,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.online {
|
||||
@include screen(tablet) {
|
||||
//sets the position of tabbed content for online mode
|
||||
position: absolute;
|
||||
top: 430px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobileNoTabs {
|
||||
.lowerSectionMobileNoTabs {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
@@ -137,10 +137,13 @@ export const MobileContent: FC<MobileContentProps> = ({
|
||||
<ComponentErrorFallback error={error} resetErrorBoundary={resetErrorBoundary} />
|
||||
)}
|
||||
>
|
||||
<div className={classNames([styles.lowerSectionMobile, online && styles.online])}>
|
||||
{items.length > 1 && <Tabs defaultActiveKey="0" items={items} />}
|
||||
</div>
|
||||
<div className={styles.mobileNoTabs}>{items.length <= 1 && aboutTabContent}</div>
|
||||
{items.length > 1 ? (
|
||||
<div className={classNames([styles.lowerSectionMobileTabbed, online && styles.online])}>
|
||||
<Tabs defaultActiveKey="0" items={items} />
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.lowerSectionMobileNoTabs}>{aboutTabContent}</div>
|
||||
)}
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,33 +1,28 @@
|
||||
@import '../../../styles/mixins.scss';
|
||||
|
||||
.footer {
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
height: var(--footer-height);
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
background-color: var(--theme-color-background-header);
|
||||
color: var(--theme-color-components-text-on-dark);
|
||||
font-family: var(--theme-text-body-font-family);
|
||||
|
||||
padding: 0.6rem 1rem;
|
||||
padding: 0.6rem var(--footer-padding-x);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
border-top: 1px solid rgba(214, 211, 211, 0.5);
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
|
||||
@include screen(tablet) {
|
||||
font-size: 10px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@include screen(mobile) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
import { Footer } from './Footer';
|
||||
|
||||
export default {
|
||||
@@ -8,7 +9,11 @@ export default {
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof Footer>;
|
||||
|
||||
const Template: ComponentStory<typeof Footer> = args => <Footer {...args} />;
|
||||
const Template: ComponentStory<typeof Footer> = args => (
|
||||
<RecoilRoot>
|
||||
<Footer {...args} />
|
||||
</RecoilRoot>
|
||||
);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Example = Template.bind({});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 2rem;
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
padding: var(--content-padding);
|
||||
color: var(--theme-color-components-video-status-bar-foreground);
|
||||
|
||||
Reference in New Issue
Block a user