dave/ocrcc-chatbox
1
0
Fork 0
forked from Github/ocrcc-chatbox
Code Issues Pull Requests 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>
var config = {
matrixServerUrl: 'https://matrix.rhok.space',
botId: '@help-bot:rhok.space',
matrixServerUrl: 'https://matrix.safesupport.chat',
botId: '@help-bot:safesupport.chat',
roomName: 'Support Chat',
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?',
confirmationMessage: 'Waiting for a facilitator to join the chat...',
exitMessage: 'The chat is closed. You may close this window.',
chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
anonymousDisplayName: 'Anonymous',
}
}
EmbeddableChatbox.mount(config);
</script>

2
public/index.html
View File

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

3
src/components/_variables.scss
View File

@ -25,3 +25,6 @@ $light-text-color: #ffffff;
$dark-text-color: #0F1116;
$dark-theme-color: #4F4F4F;
$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';
var config = {
const config = {
matrixServerUrl: 'https://matrix.safesupport.chat',
botId: '@help-bot:safesupport.chat',
roomName: 'Support Chat',
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?',
confirmationMessage: 'Waiting for a facilitator to join the chat...',
exitMessage: 'The chat is closed. You may close this window.',