Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix content header not rendering properly on mobile

Browse Source
This commit is contained in:
Gabe Kangas 2022-08-22 21:50:17 -07:00
parent 6f9add15a1
commit f3d611e762
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
3 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/components/common/ContentHeader/ContentHeader.module.scss
View File

@ -20,6 +20,7 @@
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
}
}
}

1
web/components/stores/application-state.ts
View File

@ -70,6 +70,7 @@ const appStateModel =
createMachine({
id: 'appState',
initial: 'loading',
predictableActionArguments: true,
states: {
loading: {
meta: {

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

@ -7,9 +7,9 @@ import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../u
import {
clientConfigStateAtom,
chatMessagesAtom,
chatDisplayNameAtom,
chatUserIdAtom,
// chatMessagesAtom,
// chatDisplayNameAtom,
// chatUserIdAtom,
isChatVisibleSelector,
appStateAtom,
isOnlineSelector,
@ -23,8 +23,8 @@ import FollowerCollection from '../Followers/FollowersCollection';
import s from './Content.module.scss';
import Sidebar from '../Sidebar';
import Footer from '../Footer';
import ChatContainer from '../../chat/ChatContainer';
import { ChatMessage } from '../../../interfaces/chat-message.model';
// import ChatContainer from '../../chat/ChatContainer';
// import { ChatMessage } from '../../../interfaces/chat-message.model';
// import ChatTextField from '../../chat/ChatTextField/ChatTextField';
import ActionButtonRow from '../../action-buttons/ActionButtonRow';
import ActionButton from '../../action-buttons/ActionButton';
@ -47,10 +47,10 @@ export default function ContentComponent() {
const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
const isChatVisible = useRecoilValue<boolean>(isChatVisibleSelector);
const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
// const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
const online = useRecoilValue<boolean>(isOnlineSelector);
const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
const chatUserId = useRecoilValue<string>(chatUserIdAtom);
// const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
// const chatUserId = useRecoilValue<string>(chatUserIdAtom);
const { viewerCount, lastConnectTime, lastDisconnectTime, streamTitle } =
useRecoilValue<ServerStatus>(serverStatusState);
const {
@ -151,6 +151,8 @@ export default function ContentComponent() {
<BrowserNotifyModal />
</Modal>
</div>
</div>
<div className={s.lowerHalf}>
<ContentHeader
name={name}
title={streamTitle}
@ -159,12 +161,10 @@ export default function ContentComponent() {
links={socialHandles}
logo="/logo"
/>
</div>
<div className={s.lowerHalf}>
<Tabs defaultActiveKey="0" style={{ height: '100%' }}>
{isChatVisible && isMobile && (
<TabPane tab="Chat" key="0" style={{ height: '100%' }}>
<div style={{ position: 'relative', height: '100%' }}>
{/* <div style={{ position: 'relative', height: '100%' }}>
<div className={s.mobileChat}>
<ChatContainer
messages={messages}
@ -174,7 +174,7 @@ export default function ContentComponent() {
isModerator={false}
/>
</div>
</div>
</div> */}
</TabPane>
)}
<TabPane tab="About" key="2" className={s.pageContentSection}>