From 66dc2f84c9fddb613b02b8a16378db83627dfe9b Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Fri, 21 Aug 2020 15:55:52 -0700 Subject: [PATCH] fix placehodler style, fix chat panel cookieing --- webroot/js/app2.js | 17 ++++- webroot/js/chat/chat-input.js | 1 + webroot/js/chat/message.js | 12 +-- webroot/js/utils.js | 2 - webroot/styles/chat.css | 98 +++++++++++------------- webroot/styles/layout.css | 1 - webroot/styles/user-content.css | 128 ++++++++++++++++++++------------ 7 files changed, 146 insertions(+), 113 deletions(-) diff --git a/webroot/js/app2.js b/webroot/js/app2.js index 894178093..04ef2e5ac 100644 --- a/webroot/js/app2.js +++ b/webroot/js/app2.js @@ -1,4 +1,4 @@ -import { h, Component, Fragment } from 'https://unpkg.com/preact?module'; +import { h, Component } from 'https://unpkg.com/preact?module'; import htm from 'https://unpkg.com/htm?module'; const html = htm.bind(h); @@ -11,6 +11,8 @@ import { OwncastPlayer } from './player.js'; import { getLocalStorage, + setLocalStorage, + clearLocalStorage, generateAvatar, generateUsername, URL_OWNCAST, @@ -25,7 +27,7 @@ import { MESSAGE_OFFLINE, MESSAGE_ONLINE, } from './utils.js'; -import { KEY_USERNAME, KEY_AVATAR, } from './utils/chat.js'; +import { KEY_USERNAME, KEY_AVATAR, KEY_CHAT_DISPLAYED } from './utils/chat.js'; export default class App extends Component { constructor(props, context) { @@ -33,7 +35,7 @@ export default class App extends Component { this.state = { websocket: new Websocket(), - displayChat: false, // chat panel state + displayChat: getLocalStorage(KEY_CHAT_DISPLAYED), // chat panel state chatEnabled: false, // chat input box state username: getLocalStorage(KEY_USERNAME) || generateUsername(), userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`), @@ -274,8 +276,15 @@ export default class App extends Component { handleChatPanelToggle() { const { displayChat: curDisplayed } = this.state; + + const displayChat = !curDisplayed; + if (displayChat) { + setLocalStorage(KEY_CHAT_DISPLAYED, displayChat); + } else { + clearLocalStorage(KEY_CHAT_DISPLAYED); + } this.setState({ - displayChat: !curDisplayed, + displayChat, }); } diff --git a/webroot/js/chat/chat-input.js b/webroot/js/chat/chat-input.js index dcc904ad5..c42eea08d 100644 --- a/webroot/js/chat/chat-input.js +++ b/webroot/js/chat/chat-input.js @@ -239,6 +239,7 @@ export default class ChatInput extends Component {
<${ContentEditable} + id="message-input" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white" placeholderText=${placeholderText} diff --git a/webroot/js/chat/message.js b/webroot/js/chat/message.js index 1e52a76d3..985725581 100644 --- a/webroot/js/chat/message.js +++ b/webroot/js/chat/message.js @@ -27,10 +27,10 @@ export default class Message extends Component { >
-
+

${author}

- -
- ${oldName} is now known as ${newName}. +
+ +
+ ${oldName} is now known as ${newName}. +
`); diff --git a/webroot/js/utils.js b/webroot/js/utils.js index 7beda7a1e..da32a79db 100644 --- a/webroot/js/utils.js +++ b/webroot/js/utils.js @@ -15,8 +15,6 @@ export const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAE export const MESSAGE_OFFLINE = 'Stream is offline.'; export const MESSAGE_ONLINE = 'Stream is online'; - - export const URL_OWNCAST = 'https://github.com/gabek/owncast'; // used in footer export function getLocalStorage(key) { diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css index c291a9a8d..18e026409 100644 --- a/webroot/styles/chat.css +++ b/webroot/styles/chat.css @@ -9,11 +9,54 @@ padding: 1em; } -#message-form { +/******************************/ +/******************************/ +#message-input { + height: 5rem; + font-size: .85em; +} +#message-input img { + display: inline; + vertical-align: middle; + padding: 5px; +} + +#message-input .emoji { + width: 2.2em; +} + + +/* If the div is empty then show the placeholder */ +#message-input:empty:before{ + content: attr(placeholderText); + pointer-events: none; + display: block; /* For Firefox */ + color: rgba(0, 0, 0, 0.5); +} + +/* When chat is enabled (contenteditable=true) */ +#message-input[contenteditable=true]:before { + opacity: 1.0; +} + + +/* When chat is disabled (contenteditable=false) chat input div should appear disabled. */ +#message-input:disabled, +#message-input[contenteditable=false] { + opacity: 0.6; +} +/******************************/ +/******************************/ + + + + + +/* #message-form { flex-direction: column; align-items: flex-end; margin-bottom: 0; -} +} */ @@ -122,56 +165,5 @@ -/* -The chat input has a fake placeholder that is styled below. -It pulls the placeholder text from the div's placeholder attribute. -But really it's just the innerHTML content. -*/ - - - - - - - -#message-body-form { - font-size: 1em; - height: 60px; -} -#message-body-form:disabled{ - opacity: .5; -} -#message-body-form img { - display: inline; - padding-left: 5px; - padding-right: 5px; -} - -#message-body-form .emoji { - width: 40px; -} - - -/* If the div is empty then show the placeholder */ -#message-body-form:empty:before{ - content: attr(placeholder); - pointer-events: none; - display: block; /* For Firefox */ - - /* Style the div's placeholder text color */ - color: rgba(0, 0, 0, 0.5); -} - -/* When chat is enabled (contenteditable=true) */ -#message-body-form[contenteditable=true]:before { - opacity: 1.0; -} - - -/* When chat is disabled (contenteditable=false) chat input div should appear disabled. */ -#message-body-form[contenteditable=false] { - opacity: 0.6; -} - diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index 9eb6a6384..ca914b538 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -242,7 +242,6 @@ h2 { } .vjs-airplay .vjs-icon-placeholder::before { - /* content: 'AP'; */ content: url("../img/airplay.png"); } diff --git a/webroot/styles/user-content.css b/webroot/styles/user-content.css index dea858f08..32a4d99b4 100644 --- a/webroot/styles/user-content.css +++ b/webroot/styles/user-content.css @@ -55,7 +55,7 @@ --icon-width: 40px; height: var(--icon-width); width: var(--icon-width); - background-image: url(../img/social-icons.gif); + background-image: url(/img/social-icons.gif); background-repeat: no-repeat; background-position: calc(var(--imgCol) * var(--icon-width)) calc(var(--imgRow) * var(--icon-width)); transform: scale(.65); @@ -69,105 +69,137 @@ } +/* +EXTRA CUSTOM CONTENT STYLES +Assumes markup converted from markdown input. +*/ - -.extra-user-content { +#extra-user-content { padding: 1em 3em 3em 3em; } -.extra-user-content ol { +#extra-user-content ol { list-style: decimal; } -.extra-user-content ul { +#extra-user-content ul { list-style: unset; } -.extra-user-content h1, .extra-user-content h2, .extra-user-content h3, .extra-user-content h4 { +#extra-user-content h1, +#extra-user-content h2, +#extra-user-content h3, +#extra-user-content h4 { color: #111111; - font-weight: 400; } + font-weight: 400; +} -.extra-user-content h1, .extra-user-content h2, .extra-user-content h3, .extra-user-content h4, .extra-user-content h5, .extra-user-content p { +#extra-user-content h1, +#extra-user-content h2, +#extra-user-content h3, +#extra-user-content h4, +#extra-user-content h5, +#extra-user-content p { margin-bottom: 24px; - padding: 0; } + padding: 0; +} -.extra-user-content h1 { - font-size: 48px; } +#extra-user-content h1 { + font-size: 48px; +} -.extra-user-content h2 { +#extra-user-content h2 { font-size: 36px; - margin: 24px 0 6px; } + margin: 24px 0 6px; +} -.extra-user-content h3 { - font-size: 24px; } +#extra-user-content h3 { + font-size: 24px; +} -.extra-user-content h4 { - font-size: 21px; } +#extra-user-content h4 { + font-size: 21px; +} -.extra-user-content h5 { - font-size: 18px; } +#extra-user-content h5 { + font-size: 18px; +} -.extra-user-content a { +#extra-user-content a { color: #0099ff; margin: 0; padding: 0; - vertical-align: baseline; } + vertical-align: baseline; +} -.extra-user-content ul, .extra-user-content ol { +#extra-user-content ul, #extra-user-content ol { padding: 0; - margin: 0; } + margin: 0; +} -.extra-user-content li { - line-height: 24px; } +#extra-user-content li { + line-height: 24px; +} -.extra-user-content li ul, .extra-user-content li ul { +#extra-user-content li ul, #extra-user-content li ul { margin-left: 24px; } -.extra-user-content p, .extra-user-content ul, .extra-user-content ol { +#extra-user-content p, #extra-user-content ul, #extra-user-content ol { font-size: 16px; line-height: 24px; - } -.extra-user-content pre { +} + +#extra-user-content pre { padding: 0px 24px; max-width: 800px; - white-space: pre-wrap; } + white-space: pre-wrap; +} -.extra-user-content code { +#extra-user-content code { font-family: Consolas, Monaco, Andale Mono, monospace; line-height: 1.5; - font-size: 13px; } + font-size: 13px; +} -.extra-user-content aside { +#extra-user-content aside { display: block; float: right; - width: 390px; } + width: 390px; +} -.extra-user-content blockquote { +#extra-user-content blockquote { margin: 1em 2em; - max-width: 476px; } + max-width: 476px; +} -.extra-user-content blockquote p { +#extra-user-content blockquote p { color: #666; - max-width: 460px; } + max-width: 460px; +} -.extra-user-content hr { +#extra-user-content hr { width: 540px; text-align: left; margin: 0 auto 0 0; - color: #999; } + color: #999; +} -.extra-user-content table { +#extra-user-content table { border-collapse: collapse; margin: 1em 1em; - border: 1px solid #CCC; } + border: 1px solid #CCC; +} -.extra-user-content table thead { - background-color: #EEE; } +#extra-user-content table thead { + background-color: #EEE; +} -.extra-user-content table thead td { - color: #666; } +#extra-user-content table thead td { + color: #666; +} -.extra-user-content table td { +#extra-user-content table td { padding: 0.5em 1em; - border: 1px solid #CCC; } + border: 1px solid #CCC; +}