mirror of
https://github.com/owncast/owncast.git
synced 2024-10-24 13:35:57 +03:00
improv ui: make footer sit at bottom (#2212)
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:
parent
60805ebed0
commit
ee08c42c6d
3 changed files with 12 additions and 8 deletions
|
@ -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 && (
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue