mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-24 13:35:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

improv ui: make footer sit at bottom (#2212)

Browse source 
This commit makes the footer always attach to the bottom of the screen.
This is done by setting the minWidth of the main antd layout component
to 100vh and moving the footer component outside the spinner, since antd
does not allow granular component inside the spin component.

This commit also removes some styles which were not being used due to
invalid antd api.

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
This commit is contained in:
Pranav Joglekar 2022-10-17 11:37:21 +05:30 committed by GitHub
parent 60805ebed0
commit ee08c42c6d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/components/layouts/Main.tsx
View file

@ -77,7 +77,7 @@ export const Main: FC = () => {
</Head> </Head>
<ClientConfigStore /> <ClientConfigStore />
<Layout ref={layoutRef}> <Layout ref={layoutRef} style={{ minHeight: '100vh' }}>
<Header name={title || name} chatAvailable={isChatAvailable} chatDisabled={chatDisabled} /> <Header name={title || name} chatAvailable={isChatAvailable} chatDisabled={chatDisabled} />
<Content /> <Content />
{fatalError && ( {fatalError && (

12
web/components/ui/Content/Content.module.scss
View file

@ -24,8 +24,12 @@
} }
.loadingSpinner { .loadingSpinner {
position: fixed; display: grid;
left: 50%; }
top: 50%;
z-index: 999999; .main {
display: grid;
flex: 1;
height: 100%;
grid-template-rows: 1fr auto;
} }

6
web/components/ui/Content/Content.tsx
View file

@ -212,8 +212,8 @@ export const Content: FC = () => {
const showChat = !chatDisabled && isChatAvailable && isChatVisible; const showChat = !chatDisabled && isChatAvailable && isChatVisible;
return ( return (
<div> <div className={styles.main}>
<Spin className={styles.loadingSpinner} size="large" spinning={appState.appLoading}> <Spin wrapperClassName={styles.loadingSpinner} size="large" spinning={appState.appLoading}>
<AntContent className={styles.root}> <AntContent className={styles.root}>
<div className={styles.leftContent}> <div className={styles.leftContent}>
<div className={styles.topSection}> <div className={styles.topSection}>
@ -286,8 +286,8 @@ export const Content: FC = () => {
</div> </div>
{showChat && !isMobile && <Sidebar />} {showChat && !isMobile && <Sidebar />}
</AntContent> </AntContent>
{(!isMobile || !showChat) && <Footer version={version} />}
</Spin> </Spin>
{(!isMobile || !showChat) && <Footer version={version} />}
</div> </div>
); );
}; };