LogalDeveloper/owncast
0
Fork 0
Code Activity

style updates to message-only

Browse Source
This commit is contained in:
Ginger Wong
2020-08-19 14:46:20 -07:00
parent 0325af3ce7
commit 756311f03c
6 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webroot/js/chat/chat-input.js
View File

@@ -66,6 +66,8 @@ export default class ChatInput extends Component {
custom: json, custom: json,
initialCategory: 'custom', initialCategory: 'custom',
showPreview: false, showPreview: false,
emojiSize: '30px',
emojisPerRow: 6,
position: 'top' position: 'top'
}); });
this.emojiPicker.on('emoji', emoji => { this.emojiPicker.on('emoji', emoji => {

2
webroot/js/chat/chat.js
View File

@@ -182,7 +182,7 @@ export default class Chat extends Component {
if (messagesOnly) { if (messagesOnly) {
return ( return (
html` html`
<div id="messages-container" class="messages-only"> <div id="messages-container">
${messageList} ${messageList}
</div> </div>
`); `);

2
webroot/js/chat/message.js
View File

@@ -28,7 +28,7 @@ export default class Message extends Component {
<img src=${avatar} /> <img src=${avatar} />
</div> </div>
<div class="message-content"> <div class="message-content">
<p class="message-author text-white font-bold">${author}</p> <p class="message-author text-white font-bold" style=${authorTextColor}>${author}</p>
<div <div
class="message-text text-gray-400 font-thin" class="message-text text-gray-400 font-thin"
dangerouslySetInnerHTML=${ dangerouslySetInnerHTML=${

4
webroot/standalone-chat.html
View File

@@ -13,7 +13,7 @@
</head> </head>
<body class="bg-gray-300 text-gray-800"> <body class="messages-only">
<div id="chat-container"></div> <div id="chat-container"></div>
@@ -21,7 +21,7 @@
import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module"; import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module";
import StandaloneChat from './js/chat/standalone.js'; import StandaloneChat from './js/chat/standalone.js';
const messagesOnly = true; const messagesOnly = false;
(function () { (function () {
render(html`<${StandaloneChat} messagesOnly=${messagesOnly} />`, document.getElementById("chat-container")); render(html`<${StandaloneChat} messagesOnly=${messagesOnly} />`, document.getElementById("chat-container"));

9
webroot/styles/chat.css
View File

@@ -36,10 +36,9 @@
cursor: pointer; cursor: pointer;
margin-right: .5em; margin-right: .5em;
} }
.emoji-picker__emoji {
.emoji-picker__wrapper {} border-radius: 10px;
}
.message { .message {
@@ -65,8 +64,6 @@
/* MESSAGE TEXT CONTENT */ /* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */ /* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */ /* MESSAGE TEXT CONTENT */

9
webroot/styles/standalone-chat.css
View File

@@ -4,20 +4,23 @@ The styles in this file mostly ovveride those coming from chat.css
*/ */
#messages-container.messages-only { .messages-only {
/* modify this px number if you want things to be relatively bigger or smaller 8*/ /* modify this px number if you want things to be relatively bigger or smaller 8*/
font-size: 16px; font-size: 16px;
padding: 1em .5em;
background-color: rgba(0,0,0,.4);
} }
.messages-only .message-content { .messages-only .message-content {
text-shadow: 1px 1px 0px rgba(0,0,0,0.25); text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
} }
.message-avatar { .message-avatar {
display: none;
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25); box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
} }
.message-avatar img {
height: 1.8em;
width: 1.8em;
}
.messages-only .message { .messages-only .message {
padding: .5em; padding: .5em;
} }