mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 12:49:37 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix admin subpages not having a layout

Browse source
This commit is contained in:
Gabe Kangas 2023-01-11 22:43:34 -08:00
parent dd72879d09
commit 2ff4316ee6
No known key found for this signature in database
GPG key ID: 4345B2060657F330
3 changed files with 48 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
web/components/layouts/AdminLayout.tsx Normal file
View file

@ -0,0 +1,37 @@
/* eslint-disable @next/next/no-css-tags */
import { AppProps } from 'next/app';
import { FC } from 'react';
import ServerStatusProvider from '../../utils/server-status-context';
import AlertMessageProvider from '../../utils/alert-message-context';
import { MainLayout } from '../admin/MainLayout';
/*
NOTE: A bunch of compiled css is loaded here for the Admin UI.
These are old stylesheets that were converted from sass and should not be
edited or maintained. Instead we are using css modules everywhere. So if you
need to change a style rewrite the css file as a css module and import it
into the component that needs it, removing it from this global list.
*/
export const AdminLayout: FC<AppProps> = ({ Component, pageProps }) => (
<>
<link rel="stylesheet" href="/styles/admin/main-layout.css" />
<link rel="stylesheet" href="/styles/admin/form-textfields.css" />
<link rel="stylesheet" href="/styles/admin/config-socialhandles.css" />
<link rel="stylesheet" href="/styles/admin/config-storage.css" />
<link rel="stylesheet" href="/styles/admin/config-edit-string-tags.css" />
<link rel="stylesheet" href="/styles/admin/config-video-variants.css" />
<link rel="stylesheet" href="/styles/admin/config-public-details.css" />
<link rel="stylesheet" href="/styles/admin/home.css" />
<link rel="stylesheet" href="/styles/admin/chat.css" />
<link rel="stylesheet" href="/styles/admin/pages.css" />
<link rel="stylesheet" href="/styles/admin/offline-notice.css" />
<ServerStatusProvider>
<AlertMessageProvider>
<MainLayout>
<Component {...pageProps} />
</MainLayout>
</AlertMessageProvider>
</ServerStatusProvider>
</>
);

14
web/pages/_app.tsx
View file

@ -14,6 +14,9 @@ import { AppProps } from 'next/app';
import { ReactElement, ReactNode } from 'react';
import { NextPage } from 'next';
import { RecoilRoot } from 'recoil';
import { Router, useRouter } from 'next/router';
import { AdminLayout } from '../components/layouts/AdminLayout';
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode;
@ -24,10 +27,15 @@ type AppPropsWithLayout = AppProps & {
};
export default function App({ Component, pageProps }: AppPropsWithLayout) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout ?? (page => page);
const router = useRouter() as Router;
const isAdminPage = router.pathname.startsWith('/admin');
if (isAdminPage) {
return <AdminLayout pageProps={pageProps} Component={Component} router={router} />;
}
return getLayout(
const layout = Component.getLayout ?? (page => page);
return layout(
<RecoilRoot>
<Component {...pageProps} />
</RecoilRoot>,

24
web/pages/admin/index.tsx
View file

@ -182,27 +182,3 @@ export default function Home() {
</div>
);
}
Home.getLayout = function getLayout(page: ReactElement) {
return (
<>
<link rel="stylesheet" href="/styles/admin/main-layout.css" />
<link rel="stylesheet" href="/styles/admin/form-textfields.css" />
<link rel="stylesheet" href="/styles/admin/config-socialhandles.css" />
<link rel="stylesheet" href="/styles/admin/config-storage.css" />
<link rel="stylesheet" href="/styles/admin/config-edit-string-tags.css" />
<link rel="stylesheet" href="/styles/admin/config-video-variants.css" />
<link rel="stylesheet" href="/styles/admin/config-public-details.css" />
<link rel="stylesheet" href="/styles/admin/home.css" />
<link rel="stylesheet" href="/styles/admin/chat.css" />
<link rel="stylesheet" href="/styles/admin/pages.css" />
<link rel="stylesheet" href="/styles/admin/offline-notice.css" />
<ServerStatusProvider>
<AlertMessageProvider>
<MainLayout>{page}</MainLayout>
</AlertMessageProvider>
</ServerStatusProvider>
</>
);
};