LogalDeveloper/owncast
0
Fork 0
Code Activity

reworked slightly main layout

Browse Source
This commit is contained in:
t1enne
2022-05-03 23:55:13 +02:00
parent d65be6013a
commit 502cf4478a
10 changed files with 95 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/components/ui/Content/Content.module.scss Normal file
View File

@@ -0,0 +1,14 @@
.root {
display: grid;
grid-template-columns: 8fr 4fr;
}
.leftCol {
display: grid;
// -64px, which is the header
grid-template-rows: 50vh calc(50vh - 64px);
}
.lowerRow {
display: grid;
grid-template-rows: 1fr 64px;
}

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

@@ -1,10 +1,15 @@
import { useRecoilValue } from 'recoil';
import { Layout, Row, Col, Tabs } from 'antd';
import { clientConfigStateAtom } from '../../stores/ClientConfigStore';
import { chatVisibilityAtom, clientConfigStateAtom } from '../../stores/ClientConfigStore';
import { ClientConfig } from '../../../interfaces/client-config.model';
import CustomPageContent from '../../CustomPageContent';
import OwncastPlayer from '../../video/OwncastPlayer';
import FollowerCollection from '../../FollowersCollection';
import s from './Content.module.scss';
import Sidebar from '../Sidebar';
import { ChatVisibilityState } from '../../../interfaces/application-state';
import Footer from '../Footer';
import Grid from 'antd/lib/card/Grid';
const { TabPane } = Tabs;
@@ -12,29 +17,30 @@ const { Content } = Layout;
export default function FooterComponent() {
const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
const chatOpen = useRecoilValue<ChatVisibilityState>(chatVisibilityAtom);
const { extraPageContent } = clientConfig;
return (
<Content style={{ margin: '80px 16px 0', overflow: 'initial' }}>
<div>
<Row>
<Col span={24}>
<OwncastPlayer source="https://watch.owncast.online" />
</Col>
</Row>
<Row>
<Col span={24}>
<Tabs defaultActiveKey="1" type="card">
<TabPane tab="About" key="1">
<CustomPageContent content={extraPageContent} />
</TabPane>
<TabPane tab="Followers" key="2">
<FollowerCollection />
</TabPane>
</Tabs>
</Col>
</Row>
</div>
<Content className={`${s.root}`}>
<Col className={`${s.leftCol}`}>
<OwncastPlayer source="https://watch.owncast.online" />
<div className={`${s.lowerRow}`}>
<Tabs defaultActiveKey="1" type="card">
<TabPane tab="About" key="1">
<CustomPageContent content={extraPageContent} />
</TabPane>
<TabPane tab="Followers" key="2">
<FollowerCollection />
</TabPane>
</Tabs>
<Footer />
</div>
</Col>
{chatOpen && (
<Col>
<Sidebar />
</Col>
)}
</Content>
);
}