LogalDeveloper/owncast
0
Fork 0
Code Activity

Move footer to not be sticky. Closes #2288

Browse Source
This commit is contained in:
Gabe Kangas
2022-12-05 21:04:03 -08:00
parent f1e0816347
commit 0c3d3f1c17
4 changed files with 9 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/layouts/Main.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable react/no-danger */ /* eslint-disable react/no-danger */
/* eslint-disable react/no-unescaped-entities */ /* eslint-disable react/no-unescaped-entities */
import { Layout } from 'antd'; import { Layout } from 'antd';
import { useRecoilState, useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import Head from 'next/head'; import Head from 'next/head';
import { FC, useEffect, useRef } from 'react'; import { FC, useEffect, useRef } from 'react';
import { import {
@@ -9,7 +9,6 @@ import {
isChatAvailableSelector, isChatAvailableSelector,
clientConfigStateAtom, clientConfigStateAtom,
fatalErrorStateAtom, fatalErrorStateAtom,
isMobileAtom,
} from '../stores/ClientConfigStore'; } from '../stores/ClientConfigStore';
import { Content } from '../ui/Content/Content'; import { Content } from '../ui/Content/Content';
import { Header } from '../ui/Header/Header'; import { Header } from '../ui/Header/Header';
@@ -20,13 +19,11 @@ import setupNoLinkReferrer from '../../utils/no-link-referrer';
import { TitleNotifier } from '../TitleNotifier/TitleNotifier'; import { TitleNotifier } from '../TitleNotifier/TitleNotifier';
import { ServerRenderedHydration } from '../ServerRendered/ServerRenderedHydration'; import { ServerRenderedHydration } from '../ServerRendered/ServerRenderedHydration';
import Footer from '../ui/Footer/Footer';
import { Theme } from '../theme/Theme'; import { Theme } from '../theme/Theme';
export const Main: FC = () => { export const Main: FC = () => {
const [isMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom); const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
const { name, title, customStyles, version } = clientConfig; const { name, title, customStyles } = clientConfig;
const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector); const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
const fatalError = useRecoilValue<DisplayableError>(fatalErrorStateAtom); const fatalError = useRecoilValue<DisplayableError>(fatalErrorStateAtom);
@@ -119,7 +116,6 @@ export const Main: FC = () => {
{fatalError && ( {fatalError && (
<FatalErrorStateModal title={fatalError.title} message={fatalError.message} /> <FatalErrorStateModal title={fatalError.title} message={fatalError.message} />
)} )}
{!isMobile && <Footer version={version} />}
</Layout> </Layout>
</> </>
); );

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

@@ -382,6 +382,7 @@ export const Content: FC = () => {
setShowFollowModal={setShowFollowModal} setShowFollowModal={setShowFollowModal}
/> />
)} )}
<Footer version={version} />
</div> </div>
{showChat && !isMobile && <Sidebar />} {showChat && !isMobile && <Sidebar />}
</AntContent> </AntContent>

22
web/components/ui/CustomPageContent/CustomPageContent.tsx
View File

@@ -1,25 +1,13 @@
/* eslint-disable react/no-danger */ /* eslint-disable react/no-danger */
import { FC } from 'react'; import { FC } from 'react';
import { useRecoilValue } from 'recoil';
import Footer from '../Footer/Footer';
import styles from './CustomPageContent.module.scss'; import styles from './CustomPageContent.module.scss';
import { isMobileAtom, clientConfigStateAtom } from '../../stores/ClientConfigStore';
import { ClientConfig } from '../../../interfaces/client-config.model';
export type CustomPageContentProps = { export type CustomPageContentProps = {
content: string; content: string;
}; };
export const CustomPageContent: FC<CustomPageContentProps> = ({ content }) => { export const CustomPageContent: FC<CustomPageContentProps> = ({ content }) => (
const isMobile = useRecoilValue<boolean | undefined>(isMobileAtom); <div className={styles.pageContentContainer}>
const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom); <div className={styles.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />
const { version } = clientConfig; </div>
return ( );
<>
<div className={styles.pageContentContainer}>
<div className={styles.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />
</div>
{isMobile && <Footer version={version} />}
</>
);
};

2
web/styles/globals.scss
View File

@@ -11,7 +11,7 @@
--module-spacing: 12px; // margin size between lines of stuff, if needed --module-spacing: 12px; // margin size between lines of stuff, if needed
--header-height: 4rem; // needed for making main content scrollable; --header-height: 4rem; // needed for making main content scrollable;
--footer-height: 2.5rem; // needed for making main content scrollable; --footer-height: 2.5rem; // needed for making main content scrollable;
--content-height: calc(100vh - var(--header-height) - var(--footer-height)); --content-height: calc(100vh - var(--header-height));
} }
::selection { ::selection {