diff --git a/webroot/js/chat/chat-input.js b/webroot/js/chat/chat-input.js index 198501f5c..b6f3bf189 100644 --- a/webroot/js/chat/chat-input.js +++ b/webroot/js/chat/chat-input.js @@ -66,6 +66,8 @@ export default class ChatInput extends Component { custom: json, initialCategory: 'custom', showPreview: false, + emojiSize: '30px', + emojisPerRow: 6, position: 'top' }); this.emojiPicker.on('emoji', emoji => { diff --git a/webroot/js/chat/chat.js b/webroot/js/chat/chat.js index 4b9ee9649..54caabc4c 100644 --- a/webroot/js/chat/chat.js +++ b/webroot/js/chat/chat.js @@ -182,7 +182,7 @@ export default class Chat extends Component { if (messagesOnly) { return ( html` -
+
${messageList}
`); diff --git a/webroot/js/chat/message.js b/webroot/js/chat/message.js index 413148576..1e52a76d3 100644 --- a/webroot/js/chat/message.js +++ b/webroot/js/chat/message.js @@ -28,7 +28,7 @@ export default class Message extends Component {
-

${author}

+

${author}

- +
@@ -21,7 +21,7 @@ import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module"; import StandaloneChat from './js/chat/standalone.js'; - const messagesOnly = true; + const messagesOnly = false; (function () { render(html`<${StandaloneChat} messagesOnly=${messagesOnly} />`, document.getElementById("chat-container")); diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css index 289c62363..c291a9a8d 100644 --- a/webroot/styles/chat.css +++ b/webroot/styles/chat.css @@ -36,10 +36,9 @@ cursor: pointer; margin-right: .5em; } - -.emoji-picker__wrapper {} - - +.emoji-picker__emoji { + border-radius: 10px; +} .message { @@ -65,8 +64,6 @@ - - /* MESSAGE TEXT CONTENT */ /* MESSAGE TEXT CONTENT */ /* MESSAGE TEXT CONTENT */ diff --git a/webroot/styles/standalone-chat.css b/webroot/styles/standalone-chat.css index 8a4b40e88..187cf0cd2 100644 --- a/webroot/styles/standalone-chat.css +++ b/webroot/styles/standalone-chat.css @@ -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*/ font-size: 16px; - padding: 1em .5em; - background-color: rgba(0,0,0,.4); } .messages-only .message-content { text-shadow: 1px 1px 0px rgba(0,0,0,0.25); } .message-avatar { + display: none; box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25); } +.message-avatar img { + height: 1.8em; + width: 1.8em; +} .messages-only .message { padding: .5em; }