mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-26 23:24:29 +03:00
Code Issues Projects Releases Packages Wiki Activity

Position the logo and title components

Browse source
This commit is contained in:
Gabe Kangas 2022-05-17 16:07:56 -07:00
parent 51a12dc905
commit 97b2e64f58
No known key found for this signature in database
GPG key ID: 9A56337728BC81EA
2 changed files with 52 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,11 @@
display: grid;
}
.buttonsLogoTitleSection {
margin-left: 1.5vw;
margin-right: 1.5vw;
}
.pageContentSection {
background-color: var(--theme-background-secondary);
border-radius: var(--theme-rounded-corners);
@ -25,6 +30,29 @@
width: 100%;
}
.logoTitleSection {
display: flex;
flex-direction: row;
}
.titleSection {
display: flex;
flex-direction: column;
margin-top: 20px;
margin-left: 10px;
.title {
font-size: 2.5vw;
font-weight: bold;
color: var(--theme-text-primary);
}
.subtitle {
font-size: 1.6vw;
font-weight: bold;
}
}
@media (min-width: 768px) {
.mobileChat {
display: none;

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

@ -1,5 +1,5 @@
import { useRecoilValue } from 'recoil';
import { Layout, Button, Tabs, Typography } from 'antd';
import { Layout, Button, Tabs } from 'antd';
import {
chatVisibilityAtom,
clientConfigStateAtom,
@ -29,7 +29,6 @@ import ServerLogo from '../Logo/Logo';
const { TabPane } = Tabs;
const { Content } = Layout;
const { Title } = Typography;
export default function ContentComponent() {
const status = useRecoilValue<ServerStatus>(serverStatusState);
@ -74,19 +73,30 @@ export default function ContentComponent() {
lastDisconnectTime={lastDisconnectTime}
viewerCount={viewerCount}
/>
<ActionButtonRow>
{externalActionButtons}
<Button>Follow</Button>
<NotifyReminderPopup visible notificationClicked={() => {}} notificationClosed={() => {}}>
<Button>Notify</Button>
</NotifyReminderPopup>
</ActionButtonRow>
<div className={s.buttonsLogoTitleSection}>
<ActionButtonRow>
{externalActionButtons}
<Button>Follow</Button>
<NotifyReminderPopup
visible
notificationClicked={() => {}}
notificationClosed={() => {}}
>
<Button>Notify</Button>
</NotifyReminderPopup>
</ActionButtonRow>
<div className={`${s.lowerRow}`}>
<div className={s.logoTitleSection}>
<ServerLogo src="/logo" />
<div className={s.titleSection}>
<div className={s.title}>{name}</div>
<div className={s.subtitle}>{title}</div>
<div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>
</div>
</div>
</div>
<div className={`${s.lowerRow}`}>
<ServerLogo src="/logo" />
<Title level={2}>{name}</Title>
{online && title !== '' && <Title level={3}>{title}</Title>}
<div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>
<Tabs defaultActiveKey="1">
<TabPane tab="About" key="1" className={`${s.pageContentSection}`}>
<SocialLinks links={socialHandles} />