pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix placehodler style, fix chat panel cookieing

pull/120/head
Ginger Wong 5 years ago
parent
42a34df63e
commit
66dc2f84c9
7 changed files with 146 additions and 113 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      webroot/js/app2.js
  2. 1
      webroot/js/chat/chat-input.js
  3. 12
      webroot/js/chat/message.js
  4. 2
      webroot/js/utils.js
  5. 98
      webroot/styles/chat.css
  6. 1
      webroot/styles/layout.css
  7. 128
      webroot/styles/user-content.css

17
webroot/js/app2.js
Unescape View File

@ -1,4 +1,4 @@ @@ -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'; @@ -11,6 +11,8 @@ import { OwncastPlayer } from './player.js';
import {
getLocalStorage,
setLocalStorage,
clearLocalStorage,
generateAvatar,
generateUsername,
URL_OWNCAST,
@ -25,7 +27,7 @@ import { @@ -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 { @@ -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 { @@ -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,
});
}

1
webroot/js/chat/chat-input.js
Unescape View File

@ -239,6 +239,7 @@ export default class ChatInput extends Component { @@ -239,6 +239,7 @@ export default class ChatInput extends Component {
<div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
<${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}

12
webroot/js/chat/message.js
Unescape View File

@ -27,10 +27,10 @@ export default class Message extends Component { @@ -27,10 +27,10 @@ export default class Message extends Component {
>
<img src=${avatar} />
</div>
<div class="message-content">
<div class="message-content text-sm">
<p class="message-author text-white font-bold" style=${authorTextColor}>${author}</p>
<div
class="message-text text-gray-400 font-thin"
class="message-text text-gray-300 font-normal"
dangerouslySetInnerHTML=${
{ __html: formattedMessage }
}
@ -43,9 +43,11 @@ export default class Message extends Component { @@ -43,9 +43,11 @@ export default class Message extends Component {
return (
html`
<div class="message flex">
<img class="mr-2" src=${image} />
<div class="text-white text-center">
<span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
<div class="message-content text-sm">
<img class="mr-2" src=${image} />
<div class="text-white text-center">
<span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
</div>
</div>
</div>
`);

2
webroot/js/utils.js
Unescape View File

@ -15,8 +15,6 @@ export const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAE @@ -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) {

98
webroot/styles/chat.css
Unescape View File

@ -9,11 +9,54 @@ @@ -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 @@ @@ -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;
}

1
webroot/styles/layout.css
Unescape View File

@ -242,7 +242,6 @@ h2 { @@ -242,7 +242,6 @@ h2 {
}
.vjs-airplay .vjs-icon-placeholder::before {
/* content: 'AP'; */
content: url("../img/airplay.png");
}

128
webroot/styles/user-content.css
Unescape View File

@ -55,7 +55,7 @@ @@ -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 @@ @@ -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;
}

Write Preview
Loading…
Cancel
Save