Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Various CSS fixes

Browse Source
This commit is contained in:
JC Brand 2021-01-25 20:54:50 +01:00
parent fd2f253c09
commit d6c0129c86
11 changed files with 512 additions and 471 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
sass/_autocomplete.scss
View File

@ -126,13 +126,13 @@
} }
converse-chats { converse-chats {
.converse-fullscreen { &.converse-fullscreen {
.suggestion-box__results--above { .suggestion-box__results--above {
bottom: 4.5em; bottom: 4.5em;
} }
} }
.converse-overlayed { &.converse-overlayed {
.suggestion-box__results--above { .suggestion-box__results--above {
bottom: 3.5em; bottom: 3.5em;
} }

46
sass/_chatbox.scss
View File

@ -396,8 +396,9 @@
/* ******************* Overlay and embedded styles *************************** */ /* ******************* Overlay and embedded styles *************************** */
converse-chats.converse-embedded, #conversejs {
converse-chats.converse-overlayed { converse-chats.converse-embedded,
converse-chats.converse-overlayed {
.controlbox-head { .controlbox-head {
padding: 0.5em; padding: 0.5em;
} }
@ -414,9 +415,9 @@ converse-chats.converse-overlayed {
width: var(--overlayed-chat-width); width: var(--overlayed-chat-width);
} }
} }
} }
converse-chats.converse-overlayed { converse-chats.converse-overlayed {
.chat-head, .box-flyout { .chat-head, .box-flyout {
border-top-left-radius: var(--chatbox-border-radius); border-top-left-radius: var(--chatbox-border-radius);
@ -464,9 +465,11 @@ converse-chats.converse-overlayed {
} }
} }
} }
}
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
#conversejs {
converse-chats.converse-overlayed { converse-chats.converse-overlayed {
> .row { > .row {
flex-direction: column; flex-direction: column;
@ -475,11 +478,13 @@ converse-chats.converse-overlayed {
} }
} }
} }
}
} }
converse-chats.converse-embedded, #conversejs {
converse-chats.converse-fullscreen { converse-chats.converse-embedded,
converse-chats.converse-fullscreen {
.flyout { .flyout {
border-radius: 0; border-radius: 0;
border:none; border:none;
@ -488,11 +493,24 @@ converse-chats.converse-fullscreen {
.chatbox { .chatbox {
margin: 0; margin: 0;
margin-left: 15px;
.box-flyout { .box-flyout {
box-shadow: none; box-shadow: none;
overflow: hidden; overflow: hidden;
} }
@include make-col-ready(); &:not(#controlbox) {
.box-flyout {
@include media-breakpoint-up(md) {
max-width: 66.666667%;
}
@include media-breakpoint-up(lg) {
max-width: 75%;
}
@include media-breakpoint-up(xl) {
max-width: 83.333333%;
}
}
}
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
@include make-col(8); @include make-col(8);
} }
@ -525,14 +543,14 @@ converse-chats.converse-fullscreen {
} }
} }
} }
} }
converse-chats.converse-embedded { converse-chats.converse-embedded {
.chat-head { .chat-head {
font-size: var(--font-size-huge); font-size: var(--font-size-huge);
} }
.converse-chatboxes { &.converse-chatboxes {
z-index: 1031; // One more than bootstrap navbar z-index: 1031; // One more than bootstrap navbar
position: inherit; position: inherit;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -554,11 +572,13 @@ converse-chats.converse-embedded {
.chat-textarea { .chat-textarea {
max-height: var(--fullpage-max-chat-textarea-height); max-height: var(--fullpage-max-chat-textarea-height);
} }
}
} }
/* ******************* Fullpage styles *************************** */ /* ******************* Fullpage styles *************************** */
converse-chats.converse-fullscreen { #conversejs {
converse-chats.converse-fullscreen {
.chatbox-btn { .chatbox-btn {
font-size: var(--fullpage-chatbox-button-size); font-size: var(--fullpage-chatbox-button-size);
margin: 0 0.3em; margin: 0 0.3em;
@ -592,9 +612,12 @@ converse-chats.converse-fullscreen {
} }
} }
} }
}
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
#conversejs {
converse-chats:not(.converse-embedded) { converse-chats:not(.converse-embedded) {
> .row { > .row {
flex-direction: row-reverse; flex-direction: row-reverse;
@ -635,4 +658,5 @@ converse-chats.converse-fullscreen {
} }
} }
} }
}
} }

16
sass/_chatrooms.scss
View File

@ -396,8 +396,9 @@
/* ******************* Overlay styles *************************** */ /* ******************* Overlay styles *************************** */
converse-chats { #conversejs {
.converse-overlayed { converse-chats {
&.converse-overlayed {
.chatbox { .chatbox {
&.chatroom { &.chatroom {
min-width: var(--chatroom-width) !important; min-width: var(--chatroom-width) !important;
@ -446,9 +447,9 @@ converse-chats {
} }
} }
.converse-embedded, &.converse-embedded,
.converse-fullscreen, &.converse-fullscreen,
.converse-mobile { &.converse-mobile {
.chatroom { .chatroom {
.box-flyout { .box-flyout {
@ -487,7 +488,7 @@ converse-chats {
} }
} }
.converse-embedded { &.converse-embedded {
.chatroom { .chatroom {
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -522,10 +523,12 @@ converse-chats {
} }
} }
} }
}
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
#conversejs {
converse-chats.converse-mobile, converse-chats.converse-mobile,
converse-chats.converse-overlayed, converse-chats.converse-overlayed,
converse-chats.converse-fullscreen { converse-chats.converse-fullscreen {
@ -544,4 +547,5 @@ converse-chats {
} }
} }
} }
}
} }

3
sass/_controlbox.scss
View File

@ -95,6 +95,7 @@
} }
.box-flyout { .box-flyout {
margin-left: 0;
background-color: var(--controlbox-pane-background-color); background-color: var(--controlbox-pane-background-color);
} }
@ -572,7 +573,7 @@
&.converse-fullscreen { &.converse-fullscreen {
.controlbox-panes { .controlbox-panes {
padding-top: 1em; padding-top: 2em;
} }
} }

12
sass/_core.scss
View File

@ -115,21 +115,19 @@ body.converse-fullscreen {
} }
converse-chats { converse-chats {
.converse-overlayed { &.converse-overlayed {
height: 3em; height: 3em;
> .row { > .row {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
} }
.converse-fullscreen, &.converse-fullscreen,
.converse-mobile { &.converse-mobile {
.converse-chatboxes { flex-wrap: nowrap;
width: 100vw; width: 100vw;
left: -15px; // Hack due to padding added by bootstrap
} }
} &.converse-embedded {
.converse-embedded {
box-sizing: border-box; box-sizing: border-box;
*, *:before, *:after { *, *:before, *:after {
box-sizing: border-box; box-sizing: border-box;

10
sass/_emoji.scss
View File

@ -185,8 +185,9 @@
} }
} }
converse-chats { #conversejs {
.converse-overlayed { converse-chats {
&.converse-overlayed {
converse-emoji-dropdown { converse-emoji-dropdown {
.dropdown-menu { .dropdown-menu {
min-width: 18em; min-width: 18em;
@ -232,7 +233,7 @@ converse-chats {
} }
} }
.converse-embedded { &.converse-embedded {
converse-emoji-dropdown { converse-emoji-dropdown {
.dropdown-menu { .dropdown-menu {
min-width: 20em; min-width: 20em;
@ -240,7 +241,7 @@ converse-chats {
} }
} }
.converse-fullscreen { &.converse-fullscreen {
converse-emoji-dropdown { converse-emoji-dropdown {
.dropdown-menu { .dropdown-menu {
min-width: 22em; min-width: 22em;
@ -256,6 +257,7 @@ converse-chats {
} }
} }
} }
}
} }
@include media-breakpoint-up(m) { @include media-breakpoint-up(m) {

6
sass/_headline.scss
View File

@ -31,7 +31,9 @@
} }
} }
#conversejs.converse-fullscreen { #conversejs {
converse-chats {
&.converse-fullscreen {
.chatbox.headlines { .chatbox.headlines {
.box-flyout { .box-flyout {
background-color: var(--headline-head-color); background-color: var(--headline-head-color);
@ -45,4 +47,6 @@
border-color: var(--headline-head-color); border-color: var(--headline-head-color);
} }
} }
}
}
} }

2
sass/_messages.scss
View File

@ -385,7 +385,7 @@
} }
converse-chats { converse-chats {
.converse-overlayed { &.converse-overlayed {
.message { .message {
&.chat-msg { &.chat-msg {
&.chat-msg--followup { &.chat-msg--followup {

6
sass/_minimized_chats.scss
View File

@ -1,5 +1,6 @@
converse-chats { #conversejs {
.converse-overlayed { converse-chats {
&.converse-overlayed {
#minimized-chats { #minimized-chats {
order: 100; order: 100;
@ -89,4 +90,5 @@ converse-chats {
} }
} }
} }
}
} }

2
sass/_toolbar.scss
View File

@ -189,7 +189,7 @@
} }
converse-chats { converse-chats {
.converse-overlayed { &.converse-overlayed {
.chat-toolbar { .chat-toolbar {
li { li {
.toolbar-menu { .toolbar-menu {

6
src/components/converse.js
View File

@ -1,4 +1,5 @@
import tpl_converse from "../templates/converse.js"; import tpl_converse from "../templates/converse.js";
import { api } from '@converse/headless/core';
import { CustomElement } from './element.js'; import { CustomElement } from './element.js';
@ -14,6 +15,11 @@ class ConverseRoot extends CustomElement {
render () { // eslint-disable-line class-methods-use-this render () { // eslint-disable-line class-methods-use-this
return tpl_converse(); return tpl_converse();
} }
connectedCallback () {
super.connectedCallback();
this.classList.add(`converse-${api.settings.get('view_mode')}`);
}
} }
customElements.define('converse-root', ConverseRoot); customElements.define('converse-root', ConverseRoot);