Github/ocrcc-chatbox
1
0
Fork 1
mirror of https://github.com/Safe-Support-Chat/ocrcc-chatbox synced 2024-11-01 00:55:26 +00:00
Code Issues Projects Releases Wiki Activity

fix font sizes

Browse Source
This commit is contained in:
Sharon Kennedy 2020-05-06 19:46:59 -04:00
parent bc68a4028c
commit d0d3fa1e01
7 changed files with 68 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
dist/bookmarklet.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/chatbox.js vendored
View File

File diff suppressed because one or more lines are too long

8
dist/index.html vendored
View File

@ -13,17 +13,17 @@
<script src="./chatbox.js"></script> <script src="./chatbox.js"></script>
<script> <script>
var config = { var config = {
matrixServerUrl: 'https://matrix.rhok.space', matrixServerUrl: 'https://matrix.safesupport.chat',
botId: '@help-bot:rhok.space', botId: '@help-bot:safesupport.chat',
roomName: 'Support Chat', roomName: 'Support Chat',
termsUrl: 'https://tosdr.org/', termsUrl: 'https://tosdr.org/',
introMessage: 'This chat application does not collect any of your personal data or any data from your use of this service.', introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
agreementMessage: 'Do you want to continue?', agreementMessage: 'Do you want to continue?',
confirmationMessage: 'Waiting for a facilitator to join the chat...', confirmationMessage: 'Waiting for a facilitator to join the chat...',
exitMessage: 'The chat is closed. You may close this window.', exitMessage: 'The chat is closed. You may close this window.',
chatUnavailableMessage: 'The chat service is not available right now. Please try again later.', chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
anonymousDisplayName: 'Anonymous', anonymousDisplayName: 'Anonymous',
} }
EmbeddableChatbox.mount(config); EmbeddableChatbox.mount(config);
</script> </script>

2
public/index.html
View File

@ -17,7 +17,7 @@
botId: '@help-bot:safesupport.chat', botId: '@help-bot:safesupport.chat',
roomName: 'Support Chat', roomName: 'Support Chat',
termsUrl: 'https://tosdr.org/', termsUrl: 'https://tosdr.org/',
introMessage: "This is just a demo! There is probably no-one at the other end. You should probaby email us instead. But if you're lucky, there might be someone online to say hi!", introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
agreementMessage: 'Do you want to continue?', agreementMessage: 'Do you want to continue?',
confirmationMessage: 'Waiting for a facilitator to join the chat...', confirmationMessage: 'Waiting for a facilitator to join the chat...',
exitMessage: 'The chat is closed. You may close this window.', exitMessage: 'The chat is closed. You may close this window.',

95
src/components/_chat.scss
View File

@ -1,4 +1,6 @@
* { box-sizing: border-box; } * {
box-sizing: border-box;
}
@keyframes slideInUp { @keyframes slideInUp {
from { from {
@ -31,6 +33,7 @@
z-index: 9999; z-index: 9999;
width: 400px; width: 400px;
max-width: 100vw; max-width: 100vw;
font-size: $base-font-size;
} }
.dock { .dock {
@ -42,30 +45,30 @@
max-width: calc(100vw - 10px); max-width: calc(100vw - 10px);
color: $white; color: $white;
font-family: $theme-font; font-family: $theme-font;
font-size: 1rem; font-size: 1em;
border: none; border: none;
color: $white; color: $white;
font-size: 1rem; font-size: 1em;
line-height: 1; line-height: 1;
background-color: transparent; background-color: transparent;
padding: 5px; padding: 0;
#open-chatbox-label { #open-chatbox-label {
background: $theme-color; background: $theme-color;
padding: 0.75rem; padding: 0.75em;
flex: 1 1 auto; flex: 1 1 auto;
text-align: left; text-align: left;
margin-right: 0.25rem; margin-right: 0.25em;
border: 1px solid $white; border: 1px solid $white;
border-radius: 10px; border-radius: 0.625em;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.label-icon { .label-icon {
background: $theme-color; background: $theme-color;
height: 40px; height: 2.625em;
width: 40px; width: 2.625em;
border-radius: 40px; border-radius: 2.625em;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -117,7 +120,7 @@
&-header { &-header {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 0.2rem; margin-bottom: 0.2em;
justify-content: flex-end; justify-content: flex-end;
flex: 0 0 auto; flex: 0 0 auto;
@ -136,9 +139,9 @@
color: $dark-color; color: $dark-color;
flex: 1 1 auto; flex: 1 1 auto;
font-family: $theme-font; font-family: $theme-font;
font-size: 1rem; font-size: 1em;
padding: 0.5rem; padding: 0.5em;
border-radius: 10px; border-radius: 0.625em;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
&:hover { &:hover {
@ -153,18 +156,19 @@
} }
&-close { &-close {
font-size: inherit;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid $dark-color !important; border: 1px solid $dark-color !important;
background: $white; background: $white;
border-radius: 40px; border-radius: 2.625em;
height: 40px; padding: 0.5em;
width: 40px; margin-left: 0.2em;
margin-left: 0.2rem;
color: $dark-color; color: $dark-color;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
width: 2.625em;
&:hover { &:hover {
box-shadow: inset 0px 0px 0px 1px $dark-color; box-shadow: inset 0px 0px 0px 1px $dark-color;
@ -203,23 +207,22 @@
} }
.btn-icon { .btn-icon {
font-size: 1.5rem; font-size: 1.5em;
line-height: 1; line-height: 1;
transform: rotateX(0deg); transform: rotateX(0deg);
transition: all 0.5s linear; transition: all 0.5s linear;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.arrow { .arrow {
margin-right: 0.5rem; margin-right: 0.5em;
transform: translateY(5px); transform: translateY(0.15em);
&.opened { &.opened {
color: $dark-color; color: $dark-color;
transform: rotateX(180deg) translateY(5px); transform: rotateX(180deg) translateY(0.15em);
} }
} }
@ -230,7 +233,6 @@
flex-direction: column; flex-direction: column;
height: calc(40vh + 180px); height: calc(40vh + 180px);
max-height: 100vh; max-height: 100vh;
padding: 5px;
a { a {
color: inherit; color: inherit;
@ -245,28 +247,28 @@
background-color: $white; background-color: $white;
border: 1px solid $dark-color; border: 1px solid $dark-color;
flex: 1 1 auto; flex: 1 1 auto;
padding: 0.5rem; padding: 0.5em;
overflow: scroll; overflow: scroll;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
justify-content: space-between; justify-content: space-between;
margin-bottom: 0.2rem; margin-bottom: 0.2em;
border-radius: 10px; border-radius: 0.625em;
} }
.notices { .notices {
color: $gray-color; color: $gray-color;
font-size: 0.9rem; font-size: 0.9em;
> div { > div {
margin-top: 0.5rem; margin-top: 0.5em;
margin-bottom: 0.5rem; margin-bottom: 0.5em;
} }
} }
.message { .message {
margin-top: 0.5rem; margin-top: 0.5em;
margin-bottom: 0.5rem; margin-bottom: 0.5em;
.text { .text {
width: fit-content; width: fit-content;
@ -279,8 +281,8 @@
button { button {
background-color: transparent; background-color: transparent;
padding: 0.25rem 0.5rem; padding: 0.25em 0.5em;
font-size: 0.9rem; font-size: 0.9em;
color: inherit; color: inherit;
font-weight: bold; font-weight: bold;
font-family: $theme-font; font-family: $theme-font;
@ -289,8 +291,8 @@
flex: 0 1 auto; flex: 0 1 auto;
border: 1px solid $theme-color; border: 1px solid $theme-color;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
border-radius: 10px; border-radius: 0.625em;
margin-left: 4px; margin-left: 0.25em;
&:hover { &:hover {
border: 1px solid $dark-color; border: 1px solid $dark-color;
@ -310,7 +312,7 @@
&.from-bot { &.from-bot {
color: $gray-color; color: $gray-color;
font-size: 0.9rem; font-size: 0.9em;
} }
&.from-me { &.from-me {
@ -327,7 +329,7 @@
color: $white; color: $white;
border-radius: 15px 15px 0 15px; border-radius: 15px 15px 0 15px;
margin-left: 10%; margin-left: 10%;
padding: 0.5rem 0.75rem; padding: 0.5em 0.75em;
} }
a { a {
@ -349,7 +351,7 @@
color: $dark-color; color: $dark-color;
border-radius: 15px 15px 15px 0; border-radius: 15px 15px 15px 0;
margin-right: 10%; margin-right: 10%;
padding: 0.5rem 0.75rem; padding: 0.5em 0.75em;
} }
a { a {
@ -374,8 +376,8 @@
input[type="submit"] { input[type="submit"] {
background-color: $theme-color; background-color: $theme-color;
height: 100%; height: 100%;
padding: 0.5rem 1rem; padding: 0.5em 1em;
font-size: 1rem; font-size: 1em;
color: $white; color: $white;
font-weight: bold; font-weight: bold;
font-family: $theme-font; font-family: $theme-font;
@ -384,7 +386,7 @@
flex: 0 1 auto; flex: 0 1 auto;
border: 1px solid $theme-color; border: 1px solid $theme-color;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
border-radius: 10px; border-radius: 0.625em;
&:hover { &:hover {
border: 1px solid $dark-color; border: 1px solid $dark-color;
@ -405,8 +407,8 @@
position: relative; position: relative;
input[type="text"] { input[type="text"] {
font-size: 1rem; font-size: 1em;
padding: 0.5rem; padding: 0.5em;
padding-right: 32px; padding-right: 32px;
border: none; border: none;
display: flex; display: flex;
@ -414,9 +416,9 @@
background: $white; background: $white;
color: $dark-color; color: $dark-color;
font-family: $theme-font; font-family: $theme-font;
margin-right: 0.2rem; margin-right: 0.2em;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
border-radius: 10px; border-radius: 0.625em;
border: 1px solid $dark-color; border: 1px solid $dark-color;
&:hover { &:hover {
@ -526,6 +528,7 @@
.dock, .widget { .dock, .widget {
width: 100vw; width: 100vw;
max-width: 100vw; max-width: 100vw;
padding: 5px;
} }
#ocrcc-chatbox { #ocrcc-chatbox {

3
src/components/_variables.scss
View File

@ -25,3 +25,6 @@ $light-text-color: #ffffff;
$dark-text-color: #0F1116; $dark-text-color: #0F1116;
$dark-theme-color: #4F4F4F; $dark-theme-color: #4F4F4F;
$dark-theme-highlight-color: #211943; $dark-theme-highlight-color: #211943;
$base-font-size: 16px;

4
src/outputs/bookmarklet.js
View File

@ -1,11 +1,11 @@
import EmbeddableChatbox from './embeddable-chatbox'; import EmbeddableChatbox from './embeddable-chatbox';
var config = { const config = {
matrixServerUrl: 'https://matrix.safesupport.chat', matrixServerUrl: 'https://matrix.safesupport.chat',
botId: '@help-bot:safesupport.chat', botId: '@help-bot:safesupport.chat',
roomName: 'Support Chat', roomName: 'Support Chat',
termsUrl: 'https://tosdr.org/', termsUrl: 'https://tosdr.org/',
introMessage: "This is just a demo! There is probably no-one at the other end. You should probaby email us instead. But if you're lucky, there might be someone online to say hi!", introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
agreementMessage: 'Do you want to continue?', agreementMessage: 'Do you want to continue?',
confirmationMessage: 'Waiting for a facilitator to join the chat...', confirmationMessage: 'Waiting for a facilitator to join the chat...',
exitMessage: 'The chat is closed. You may close this window.', exitMessage: 'The chat is closed. You may close this window.',