Initial setup for standalone chat with Preact.

- set up standalone static page and message related components - start separating out css into smaller more manageable files - start separating out utils into smaller modular files - renaming some files for consistency
2020-08-13 01:28:25 -07:00
parent 2c1bc52487
commit dad802f19a
11 changed files with 578 additions and 27 deletions
--- a/webroot/styles/message.css
+++ b/webroot/styles/message.css
@@ -0,0 +1,87 @@
+
+#messages-container {
+  overflow: auto;
+  padding: 1em 0;
+}
+#message-input-container {
+  width: 100%;
+  padding: 1em;
+}
+
+#message-form {
+  flex-direction: column;
+  align-items: flex-end;
+  margin-bottom: 0;
+}
+#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;
+}
+
+#message-form-actions {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.message-text img {
+  display: inline;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.message-text .emoji {
+  width: 60px;
+}
+
+
+.message {
+  padding: .85em;
+  align-items: flex-start;
+}
+.message-avatar {
+  margin-right: .75em;
+}
+.message-avatar img {
+  max-width: unset;
+  height: 3.0em;
+  width: 3.0em;
+  padding: 5px;
+}
+
+.message-content {
+  font-size: .85em;
+  max-width: 85%;
+  word-wrap: break-word;
+}
+.message-content a {
+  color: #7F9CF5; /* indigo-400 */
+}
+.message-content a:hover {
+  text-decoration: underline;
+}
+
+.message-text iframe {
+  width: 100%;
+  height: 170px;
+  border-radius: 15px;
+}
+
+/* Emoji picker */
+#emoji-button {
+  margin: 0 .5em;
+  font-size: 1.5em
+}
--- a/webroot/styles/user-content.css
+++ b/webroot/styles/user-content.css
@@ -0,0 +1,102 @@
+.extra-user-content {
+  padding: 1em 3em 3em 3em;
+}
+
+
+
+.extra-user-content ol {
+  list-style: decimal;
+}
+
+.extra-user-content ul {
+  list-style: unset;
+}
+
+.extra-user-content h1, .extra-user-content h2, .extra-user-content h3, .extra-user-content h4 {
+  color: #111111;
+  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 {
+  margin-bottom: 24px;
+  padding: 0; }
+
+.extra-user-content h1 {
+  font-size: 48px; }
+
+.extra-user-content h2 {
+  font-size: 36px;
+  margin: 24px 0 6px; }
+
+.extra-user-content h3 {
+  font-size: 24px; }
+
+.extra-user-content h4 {
+  font-size: 21px; }
+
+.extra-user-content h5 {
+  font-size: 18px; }
+
+.extra-user-content a {
+  color: #0099ff;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline; }
+
+.extra-user-content ul, .extra-user-content ol {
+  padding: 0;
+  margin: 0; }
+
+.extra-user-content li {
+  line-height: 24px; }
+
+.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 {
+  font-size: 16px;
+  line-height: 24px;
+  }
+
+.extra-user-content pre {
+  padding: 0px 24px;
+  max-width: 800px;
+  white-space: pre-wrap; }
+
+.extra-user-content code {
+  font-family: Consolas, Monaco, Andale Mono, monospace;
+  line-height: 1.5;
+  font-size: 13px; }
+
+.extra-user-content aside {
+  display: block;
+  float: right;
+  width: 390px; }
+
+.extra-user-content blockquote {
+  margin: 1em 2em;
+  max-width: 476px; }
+
+.extra-user-content blockquote p {
+  color: #666;
+  max-width: 460px; }
+
+.extra-user-content hr {
+  width: 540px;
+  text-align: left;
+  margin: 0 auto 0 0;
+  color: #999; }
+
+.extra-user-content table {
+  border-collapse: collapse;
+  margin: 1em 1em;
+  border: 1px solid #CCC; }
+
+.extra-user-content table thead {
+  background-color: #EEE; }
+
+.extra-user-content table thead td {
+  color: #666; }
+
+.extra-user-content table td {
+  padding: 0.5em 1em;
+  border: 1px solid #CCC; }