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

replace margins with padding in the chat container (#3165)

Browse Source 
Virtuoso can't calculate the size of elements that have margins. This causes
strange behaviour with scrolling in chat.

Co-authored-by: janWilejan <>
This commit is contained in:
janWilejan 2023-07-11 20:07:58 +00:00 committed by GitHub
parent f6182229f5
commit 101174f71e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 46 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/components/chat/ChatActionMessage/ChatActionMessage.module.scss
View File

@ -1,6 +1,9 @@
.chatActionPadding {
padding: 4px 1rem;
}
.chatAction { .chatAction {
padding: 8px; padding: 8px;
margin: 4px 1rem;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;

4
web/components/chat/ChatActionMessage/ChatActionMessage.tsx
View File

@ -8,5 +8,7 @@ export type ChatActionMessageProps = {
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
export const ChatActionMessage: FC<ChatActionMessageProps> = ({ body }) => ( export const ChatActionMessage: FC<ChatActionMessageProps> = ({ body }) => (
<div dangerouslySetInnerHTML={{ __html: body }} className={styles.chatAction} /> <div className={styles.chatActionPadding}>
<div dangerouslySetInnerHTML={{ __html: body }} className={styles.chatAction} />
</div>
); );

1
web/components/chat/ChatContainer/ChatContainer.module.scss
View File

@ -45,7 +45,6 @@
flex-grow: 1; flex-grow: 1;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
margin-bottom: 5px;
overscroll-behavior: contain; overscroll-behavior: contain;
} }

1
web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss
View File

@ -3,7 +3,6 @@
.chatModerationNotification { .chatModerationNotification {
background-color: var(--theme-background-primary); background-color: var(--theme-background-primary);
color: var(--theme-color-components-chat-text); color: var(--theme-color-components-chat-text);
margin: 5px;
padding: 10px; padding: 10px;
font-size: var(--chat-message-text-size); font-size: var(--chat-message-text-size);

5
web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss
View File

@ -1,3 +1,7 @@
.followerPadding {
padding: 0.5em;
}
.follower { .follower {
border-color: rgb(0 0 0 / 30%); border-color: rgb(0 0 0 / 30%);
border-width: 1px; border-width: 1px;
@ -5,7 +9,6 @@
padding: 10px; padding: 10px;
border-radius: var(--theme-rounded-corners); border-radius: var(--theme-rounded-corners);
background-color: var(--theme-color-background-main); background-color: var(--theme-color-background-main);
margin: 0.5em;
&:hover { &:hover {
border-color: var(--theme-text-link); border-color: var(--theme-text-link);

32
web/components/chat/ChatSocialMessage/ChatSocialMessage.tsx
View File

@ -39,22 +39,24 @@ export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
} }
return ( return (
<div className={cn([styles.follower, 'chat-message_social'])}> <div className={styles.followerPadding}>
<a href={link} target="_blank" rel="noreferrer"> <div className={cn([styles.follower, 'chat-message_social'])}>
<Row wrap={false}> <a href={link} target="_blank" rel="noreferrer">
<Col span={6} className={styles.avatarColumn}> <Row wrap={false}>
<Avatar src={image} alt="Avatar" className={styles.avatar} size="large"> <Col span={6} className={styles.avatarColumn}>
{title.charAt(0).toUpperCase()} <Avatar src={image} alt="Avatar" className={styles.avatar} size="large">
</Avatar> {title.charAt(0).toUpperCase()}
</Avatar>
<Icon className={styles.icon} /> <Icon className={styles.icon} />
</Col> </Col>
<Col> <Col>
<Row className={styles.account}>{title}</Row> <Row className={styles.account}>{title}</Row>
<Row className={styles.body} dangerouslySetInnerHTML={{ __html: body }} /> <Row className={styles.body} dangerouslySetInnerHTML={{ __html: body }} />
</Col> </Col>
</Row> </Row>
</a> </a>
</div>
</div> </div>
); );
}; };

7
web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
View File

@ -1,3 +1,8 @@
.chatSystemMessagePadding {
padding: 5px;
padding-bottom: 10px;
}
.chatSystemMessage { .chatSystemMessage {
background: var(--theme-color-background-main); background: var(--theme-color-background-main);
background: linear-gradient( background: linear-gradient(
@ -6,8 +11,6 @@
rgb(65 28 139) 40%, rgb(65 28 139) 40%,
rgb(71 50 133) 80% rgb(71 50 133) 80%
); );
margin: 5px;
margin-bottom: 10px;
border-radius: 5px; border-radius: 5px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;

24
web/components/chat/ChatSystemMessage/ChatSystemMessage.tsx
View File

@ -18,17 +18,19 @@ export const ChatSystemMessage: FC<ChatSystemMessageProps> = ({
}, },
highlightString, highlightString,
}) => ( }) => (
<div className={cn([styles.chatSystemMessage, 'chat-message_system'])}> <div className={styles.chatSystemMessagePadding}>
<div className={styles.user}> <div className={cn([styles.chatSystemMessage, 'chat-message_system'])}>
<span className={styles.userName}>{displayName}</span> <div className={styles.user}>
<span className={styles.userName}>{displayName}</span>
</div>
<Interweave
className={styles.message}
content={body}
matchers={[
new UrlMatcher('url', { customTLDs: ['online'] }),
new ChatMessageHighlightMatcher('highlight', { highlightString }),
]}
/>
</div> </div>
<Interweave
className={styles.message}
content={body}
matchers={[
new UrlMatcher('url', { customTLDs: ['online'] }),
new ChatMessageHighlightMatcher('highlight', { highlightString }),
]}
/>
</div> </div>
); );