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-fullscreen {
&.converse-fullscreen {
.suggestion-box__results--above {
bottom: 4.5em;
}
}
.converse-overlayed {
&.converse-overlayed {
.suggestion-box__results--above {
bottom: 3.5em;
}

28
sass/_chatbox.scss
View File

@ -396,6 +396,7 @@
/* ******************* Overlay and embedded styles *************************** */
#conversejs {
converse-chats.converse-embedded,
converse-chats.converse-overlayed {
.controlbox-head {
@ -465,8 +466,10 @@ converse-chats.converse-overlayed {
}
}
}
}
@include media-breakpoint-down(sm) {
#conversejs {
converse-chats.converse-overlayed {
> .row {
flex-direction: column;
@ -476,8 +479,10 @@ converse-chats.converse-overlayed {
}
}
}
}
#conversejs {
converse-chats.converse-embedded,
converse-chats.converse-fullscreen {
.flyout {
@ -488,11 +493,24 @@ converse-chats.converse-fullscreen {
.chatbox {
margin: 0;
margin-left: 15px;
.box-flyout {
box-shadow: none;
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 make-col(8);
}
@ -532,7 +550,7 @@ converse-chats.converse-embedded {
font-size: var(--font-size-huge);
}
.converse-chatboxes {
&.converse-chatboxes {
z-index: 1031; // One more than bootstrap navbar
position: inherit;
flex-wrap: nowrap;
@ -555,9 +573,11 @@ converse-chats.converse-embedded {
max-height: var(--fullpage-max-chat-textarea-height);
}
}
}
/* ******************* Fullpage styles *************************** */
#conversejs {
converse-chats.converse-fullscreen {
.chatbox-btn {
font-size: var(--fullpage-chatbox-button-size);
@ -593,8 +613,11 @@ converse-chats.converse-fullscreen {
}
}
}
}
@include media-breakpoint-down(sm) {
#conversejs {
converse-chats:not(.converse-embedded) {
> .row {
flex-direction: row-reverse;
@ -636,3 +659,4 @@ converse-chats.converse-fullscreen {
}
}
}
}

14
sass/_chatrooms.scss
View File

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

3
sass/_controlbox.scss
View File

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

12
sass/_core.scss
View File

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

8
sass/_emoji.scss
View File

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

6
sass/_headline.scss
View File

@ -31,7 +31,9 @@
}
}
#conversejs.converse-fullscreen {
#conversejs {
converse-chats {
&.converse-fullscreen {
.chatbox.headlines {
.box-flyout {
background-color: var(--headline-head-color);
@ -46,3 +48,5 @@
}
}
}
}
}

2
sass/_messages.scss
View File

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

4
sass/_minimized_chats.scss
View File

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

2
sass/_toolbar.scss
View File

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

6
src/components/converse.js
View File

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