LogalDeveloper/owncast
0
Fork 0
Code Activity

Added chat tab on mobile layouts and other changes to mobile UI

Browse Source
This commit is contained in:
t1enne
2022-07-08 09:10:18 +02:00
parent d47084f257
commit ffc73f2760
20 changed files with 183 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/chat/ChatContainer/ChatContainer.tsx
View File

@@ -67,7 +67,7 @@ export default function ChatContainer(props: Props) {
() => (
<>
<Virtuoso
style={{ height: isMobile ? 500 : '77vh' }}
style={{ height: isMobile ? 500 : '77vh', width: 'auto' }}
ref={chatContainerRef}
initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom
data={messages}
@@ -99,9 +99,11 @@ export default function ChatContainer(props: Props) {
return (
<div>
<div className={s.chatHeader}>
<span>stream chat</span>
</div>
{
// <div className={s.chatHeader}>
// <span>stream chat</span>
// </div>
}
<Spin spinning={loading} indicator={spinIcon}>
{MessagesTable}
</Spin>

11
web/components/chat/ChatTextField/ChatTextField.module.scss
View File

@@ -20,6 +20,17 @@
.inputWrapper {
display: flex;
position: relative;
border-radius: var(--theme-rounded-corners);
outline: 1px solid var(--color-owncast-gray-500);
&:hover {
box-shadow: 0 0 1px 1px var(--color-owncast-gray-300);
}
& > div {
transition: box-shadow .2s ease-in-out;
&:focus {
// box-shadow: 0 0 1px 1px var(--color-owncast-gray-300);
}
}
}
.emojiButton {