style updates to message-only

5 years ago · 756311f03c
6 changed files with 15 additions and 13 deletions
--- a/webroot/js/chat/chat-input.js
+++ b/webroot/js/chat/chat-input.js
@ -66,6 +66,8 @@ export default class ChatInput extends Component {
				@@ -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 => {
--- a/webroot/js/chat/chat.js
+++ b/webroot/js/chat/chat.js
@ -182,7 +182,7 @@ export default class Chat extends Component {
				@@ -182,7 +182,7 @@ export default class Chat extends Component {
    if (messagesOnly) {
      return (
        html`
-          <div id="messages-container" class="messages-only">
+          <div id="messages-container">
            ${messageList}
          </div>
      `);
--- a/webroot/js/chat/message.js
+++ b/webroot/js/chat/message.js
@ -28,7 +28,7 @@ export default class Message extends Component {
				@@ -28,7 +28,7 @@ export default class Message extends Component {
              <img src=${avatar} />
            </div>
            <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
                class="message-text text-gray-400 font-thin"
                dangerouslySetInnerHTML=${
--- a/webroot/standalone-chat.html
+++ b/webroot/standalone-chat.html
@ -13,7 +13,7 @@
				@@ -13,7 +13,7 @@

  </head>

-  <body class="bg-gray-300 text-gray-800">
+  <body class="messages-only">

    <div id="chat-container"></div>

@ -21,7 +21,7 @@
				@@ -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"));
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@ -36,10 +36,9 @@
				@@ -36,10 +36,9 @@
  cursor: pointer;
  margin-right: .5em;
 }
-
-.emoji-picker__wrapper {}
-
-
+.emoji-picker__emoji {
+  border-radius: 10px;
+}


 .message {
@ -65,8 +64,6 @@
				@@ -65,8 +64,6 @@



-
-
 /* MESSAGE TEXT CONTENT */
 /* MESSAGE TEXT CONTENT */
 /* MESSAGE TEXT CONTENT */
--- 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
				@@ -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;
 }