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;
}

426
sass/_chatbox.scss
View File

@ -396,239 +396,263 @@
/* ******************* Overlay and embedded styles *************************** */
converse-chats.converse-embedded,
converse-chats.converse-overlayed {
.controlbox-head {
padding: 0.5em;
}
.chat-head {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.chatbox {
min-width: var(--overlayed-chat-width) !important;
width: var(--overlayed-chat-width);
.box-flyout {
min-width: var(--overlayed-chat-width) !important;
width: var(--overlayed-chat-width);
}
}
}
converse-chats.converse-overlayed {
.chat-head, .box-flyout {
border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius);
@media screen and (max-height: $mobile-landscape-height) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
@media screen and (max-width: $mobile-portrait-length) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
.flyout {
bottom: var(--overlayed-chatbox-hover-height);
}
.box-flyout {
height: var(--overlayed-chat-height);
min-height: calc(var(--overlayed-chat-height) / 2);
}
.chat-head {
min-height: var(--overlayed-chat-head-height);
}
.minimized-chats-flyout .chat-head {
cursor: default;
}
.chat-textarea {
max-height: var(--overlayed-max-chat-textarea-height);
}
.chatbox {
.chat-body {
height: calc(100% - var(--overlayed-chat-head-height));
}
.chatbox-title {
padding: 0.5rem 0.75rem 0 0.75rem;
}
.chatbox-title--no-desc {
padding: 0.5rem 0.75rem;
}
converse-dropdown {
.btn--standalone {
padding: 0 0.2em;
margin: 0 0 0 0.5em;
}
}
}
}
@include media-breakpoint-down(sm) {
#conversejs {
converse-chats.converse-embedded,
converse-chats.converse-overlayed {
> .row {
flex-direction: column;
&.no-gutters {
margin: -1em;
}
}
}
}
converse-chats.converse-embedded,
converse-chats.converse-fullscreen {
.flyout {
border-radius: 0;
border:none;
bottom: 0;
}
.chatbox {
margin: 0;
.box-flyout {
box-shadow: none;
overflow: hidden;
}
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(8);
}
@include media-breakpoint-up(lg) {
@include make-col(9);
}
@include media-breakpoint-up(xl) {
@include make-col(10);
}
}
&.converse-singleton {
.flyout {
border: none !important;
}
.chat-head {
.controlbox-head {
padding: 0.5em;
}
.chat-head {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.chatbox {
margin: 0;
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(12);
}
@include media-breakpoint-up(lg) {
@include make-col(12);
}
@include media-breakpoint-up(xl) {
@include make-col(12);
min-width: var(--overlayed-chat-width) !important;
width: var(--overlayed-chat-width);
.box-flyout {
min-width: var(--overlayed-chat-width) !important;
width: var(--overlayed-chat-width);
}
}
}
}
converse-chats.converse-embedded {
.chat-head {
font-size: var(--font-size-huge);
}
converse-chats.converse-overlayed {
.converse-chatboxes {
z-index: 1031; // One more than bootstrap navbar
position: inherit;
flex-wrap: nowrap;
bottom: auto;
height: 100%;
width: 100%;
margin-left: -15px;
}
.chat-head, .box-flyout {
border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius);
@media screen and (max-height: $mobile-landscape-height) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
@media screen and (max-width: $mobile-portrait-length) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
.chatbox {
.flyout {
bottom: var(--overlayed-chatbox-hover-height);
}
.box-flyout {
bottom: 0;
height: 100%;
min-width: auto;
width: 100%;
height: var(--overlayed-chat-height);
min-height: calc(var(--overlayed-chat-height) / 2);
}
}
.chat-textarea {
max-height: var(--fullpage-max-chat-textarea-height);
}
}
/* ******************* Fullpage styles *************************** */
converse-chats.converse-fullscreen {
.chatbox-btn {
font-size: var(--fullpage-chatbox-button-size);
margin: 0 0.3em;
}
.chat-head {
font-size: var(--font-size-huge);
}
.chat-textarea {
max-height: var(--fullpage-max-chat-textarea-height);
}
.chatbox {
.box-flyout {
box-shadow: none;
height: var(--fullpage-chat-height);
min-height: calc(var(--fullpage-chat-height) / 2);
width: var(--fullpage-chat-width);
overflow: hidden;
.chat-head {
min-height: var(--overlayed-chat-head-height);
}
.chat-body {
height: inherit;
overflow: hidden;
background-color: var(--chat-head-color);
.minimized-chats-flyout .chat-head {
cursor: default;
}
.chat-title {
font-size: var(--font-size-huge);
line-height: var(--line-height-huge);
.chat-textarea {
max-height: var(--overlayed-max-chat-textarea-height);
}
.sendXMPPMessage {
ul {
width: 100%;
.chatbox {
.chat-body {
height: calc(100% - var(--overlayed-chat-head-height));
}
.chatbox-title {
padding: 0.5rem 0.75rem 0 0.75rem;
}
.chatbox-title--no-desc {
padding: 0.5rem 0.75rem;
}
converse-dropdown {
.btn--standalone {
padding: 0 0.2em;
margin: 0 0 0 0.5em;
}
}
}
}
}
@include media-breakpoint-down(sm) {
converse-chats:not(.converse-embedded) {
> .row {
flex-direction: row-reverse;
}
#converse-login-panel {
.converse-form {
padding: 3em 2em 3em;
#conversejs {
converse-chats.converse-overlayed {
> .row {
flex-direction: column;
&.no-gutters {
margin: -1em;
}
}
}
}
}
#conversejs {
converse-chats.converse-embedded,
converse-chats.converse-fullscreen {
.flyout {
border-radius: 0;
border:none;
bottom: 0;
}
.chatbox {
width: calc(100% - 50px);
.row {
margin: 0;
margin-left: 15px;
.box-flyout {
box-shadow: none;
overflow: hidden;
}
&:not(#controlbox) {
.box-flyout {
left: 50px;
bottom: 0;
height: var(--fullpage-chat-height);
box-shadow: none;
@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);
}
@include media-breakpoint-up(lg) {
@include make-col(9);
}
@include media-breakpoint-up(xl) {
@include make-col(10);
}
}
&.converse-singleton {
.flyout {
border: none !important;
}
.chat-head {
padding: 0.5em;
}
.chatbox {
margin: 0;
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(12);
}
@include media-breakpoint-up(lg) {
@include make-col(12);
}
@include media-breakpoint-up(xl) {
@include make-col(12);
}
}
}
}
converse-chats.converse-mobile,
converse-chats.converse-overlayed,
converse-chats.converse-fullscreen {
converse-chats.converse-embedded {
.chat-head {
font-size: var(--font-size-huge);
}
&.converse-chatboxes {
z-index: 1031; // One more than bootstrap navbar
position: inherit;
flex-wrap: nowrap;
bottom: auto;
height: 100%;
width: 100%;
margin-left: -15px;
}
.chatbox {
.box-flyout {
.chatbox-navback {
margin: auto 0;
margin-right: 1em;
display: flex;
.fa-arrow-left {
&:before {
color: white;
bottom: 0;
height: 100%;
min-width: auto;
width: 100%;
}
}
.chat-textarea {
max-height: var(--fullpage-max-chat-textarea-height);
}
}
}
/* ******************* Fullpage styles *************************** */
#conversejs {
converse-chats.converse-fullscreen {
.chatbox-btn {
font-size: var(--fullpage-chatbox-button-size);
margin: 0 0.3em;
}
.chat-head {
font-size: var(--font-size-huge);
}
.chat-textarea {
max-height: var(--fullpage-max-chat-textarea-height);
}
.chatbox {
.box-flyout {
box-shadow: none;
height: var(--fullpage-chat-height);
min-height: calc(var(--fullpage-chat-height) / 2);
width: var(--fullpage-chat-width);
overflow: hidden;
}
.chat-body {
height: inherit;
overflow: hidden;
background-color: var(--chat-head-color);
}
.chat-title {
font-size: var(--font-size-huge);
line-height: var(--line-height-huge);
}
.sendXMPPMessage {
ul {
width: 100%;
}
}
}
}
}
@include media-breakpoint-down(sm) {
#conversejs {
converse-chats:not(.converse-embedded) {
> .row {
flex-direction: row-reverse;
}
#converse-login-panel {
.converse-form {
padding: 3em 2em 3em;
}
}
.chatbox {
width: calc(100% - 50px);
.row {
.box-flyout {
left: 50px;
bottom: 0;
height: var(--fullpage-chat-height);
box-shadow: none;
}
}
}
}
converse-chats.converse-mobile,
converse-chats.converse-overlayed,
converse-chats.converse-fullscreen {
.chatbox {
.box-flyout {
.chatbox-navback {
margin: auto 0;
margin-right: 1em;
display: flex;
.fa-arrow-left {
&:before {
color: white;
}
}
}
}

230
sass/_chatrooms.scss
View File

@ -396,127 +396,129 @@
/* ******************* Overlay styles *************************** */
converse-chats {
.converse-overlayed {
.chatbox {
&.chatroom {
min-width: var(--chatroom-width) !important;
width: var(--chatroom-width);
.box-flyout {
#conversejs {
converse-chats {
&.converse-overlayed {
.chatbox {
&.chatroom {
min-width: var(--chatroom-width) !important;
width: var(--chatroom-width);
}
.chatbox-title__text {
@include make-col(7);
}
.chatbox-title__buttons {
@include make-col(5);
}
.box-flyout {
min-width: var(--chatroom-width) !important;
width: var(--chatroom-width);
}
.chatbox-title__text {
@include make-col(7);
}
.chatbox-title__buttons {
@include make-col(5);
}
.chat-head__desc {
font-size: 80%;
margin-bottom: 1em;
}
.chatroom-body {
.occupants {
.occupants-heading {
padding: 0;
}
.occupant-list {
border-bottom: none;
}
ul {
.occupant {
.occupant-nick-badge {
.occupant-badges {
display: none;
.chat-head__desc {
font-size: 80%;
margin-bottom: 1em;
}
.chatroom-body {
.occupants {
.occupants-heading {
padding: 0;
}
.occupant-list {
border-bottom: none;
}
ul {
.occupant {
.occupant-nick-badge {
.occupant-badges {
display: none;
}
}
.occupant-status {
margin-top: 6px;
}
}
.occupant-status {
margin-top: 6px;
}
}
}
}
.chat-area {
min-width: var(--overlayed-chat-width);
.chat-area {
min-width: var(--overlayed-chat-width);
}
}
}
}
}
}
.converse-embedded,
.converse-fullscreen,
.converse-mobile {
&.converse-embedded,
&.converse-fullscreen,
&.converse-mobile {
.chatroom {
.box-flyout {
width: 100%;
.chatroom {
.box-flyout {
width: 100%;
.chatroom-body {
.chat-area {
&.full {
.new-msgs-indicator {
max-width: 100%;
.chatroom-body {
.chat-area {
&.full {
.new-msgs-indicator {
max-width: 100%;
}
}
}
.occupants {
padding: var(--occupants-padding);
.occupants-heading {
font-size: var(--font-size-large);
}
ul {
&.occupant-list {
li {
font-size: var(--font-size-small);
}
}
}
}
}
}
.room-invite {
span {
.invited-contact {
margin: 0 0 0.5em -1px;
}
}
}
}
}
&.converse-embedded {
.chatroom {
margin: 0;
width: 100%;
.box-flyout {
.occupants-heading {
font-size: 120%;
}
.chat-content {
.chat-message {
margin: 0.5em;
font-size: 120%;
}
}
.sendXMPPMessage {
.chat-textarea {
padding: 0.5em;
font-size: 110%;
}
}
.chatroom-body {
height: 100%;
.chatroom-form-container {
height: 100%;
position: relative;
}
}
.occupants {
padding: var(--occupants-padding);
.occupants-heading {
font-size: var(--font-size-large);
.occupant-list {
padding-left: 0.3em;
}
ul {
&.occupant-list {
li {
font-size: var(--font-size-small);
}
}
}
}
}
}
.room-invite {
span {
.invited-contact {
margin: 0 0 0.5em -1px;
}
}
}
}
}
.converse-embedded {
.chatroom {
margin: 0;
width: 100%;
.box-flyout {
.occupants-heading {
font-size: 120%;
}
.chat-content {
.chat-message {
margin: 0.5em;
font-size: 120%;
}
}
.sendXMPPMessage {
.chat-textarea {
padding: 0.5em;
font-size: 110%;
}
}
.chatroom-body {
height: 100%;
.chatroom-form-container {
height: 100%;
position: relative;
}
}
.occupants {
.occupant-list {
padding-left: 0.3em;
}
}
}
@ -526,17 +528,19 @@ converse-chats {
@include media-breakpoint-down(sm) {
converse-chats.converse-mobile,
converse-chats.converse-overlayed,
converse-chats.converse-fullscreen {
.chatbox {
.box-flyout {
.chat-head-chatroom {
.chatbox-navback {
margin-right: 0 !important;
.fa-arrow-left {
&:before {
color: var(--chatroom-head-color);
#conversejs {
converse-chats.converse-mobile,
converse-chats.converse-overlayed,
converse-chats.converse-fullscreen {
.chatbox {
.box-flyout {
.chat-head-chatroom {
.chatbox-navback {
margin-right: 0 !important;
.fa-arrow-left {
&:before {
color: var(--chatroom-head-color);
}
}
}
}

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;
}
}

14
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 {
width: 100vw;
left: -15px; // Hack due to padding added by bootstrap
}
&.converse-fullscreen,
&.converse-mobile {
flex-wrap: nowrap;
width: 100vw;
}
.converse-embedded {
&.converse-embedded {
box-sizing: border-box;
*, *:before, *:after {
box-sizing: border-box;

108
sass/_emoji.scss
View File

@ -185,73 +185,75 @@
}
}
converse-chats {
.converse-overlayed {
converse-emoji-dropdown {
.dropdown-menu {
min-width: 18em;
}
}
.chatbox {
.emoji-picker__header {
.emoji-category {
img {
height: var(--font-size) !important;
width: var(--font-size) !important;
}
#conversejs {
converse-chats {
&.converse-overlayed {
converse-emoji-dropdown {
.dropdown-menu {
min-width: 18em;
}
}
converse-emoji-picker {
.emoji-picker {
.insert-emoji {
a {
font-size: var(--font-size);
line-height: calc(var(--font-size) * 1.5);
padding: 0;
height: calc(var(--font-size) * 1.5);
width: calc(var(--font-size) * 1.5);
}
img {
height: var(--font-size);
width: var(--font-size);
}
}
}
.emoji-skintone-picker {
font-size: var(--font-size-small);
}
.chatbox {
.emoji-picker__header {
.emoji-category {
font-size: var(--font-size-small);
img {
height: var(--font-size) !important;
width: var(--font-size) !important;
}
}
}
.emoji-picker__lists {
height: 7em;
converse-emoji-picker {
.emoji-picker {
.insert-emoji {
a {
font-size: var(--font-size);
line-height: calc(var(--font-size) * 1.5);
padding: 0;
height: calc(var(--font-size) * 1.5);
width: calc(var(--font-size) * 1.5);
}
img {
height: var(--font-size);
width: var(--font-size);
}
}
}
.emoji-skintone-picker {
font-size: var(--font-size-small);
}
.emoji-picker__header {
.emoji-category {
font-size: var(--font-size-small);
}
}
.emoji-picker__lists {
height: 7em;
}
}
}
}
}
.converse-embedded {
converse-emoji-dropdown {
.dropdown-menu {
min-width: 20em;
&.converse-embedded {
converse-emoji-dropdown {
.dropdown-menu {
min-width: 20em;
}
}
}
}
.converse-fullscreen {
converse-emoji-dropdown {
.dropdown-menu {
min-width: 22em;
&.converse-fullscreen {
converse-emoji-dropdown {
.dropdown-menu {
min-width: 22em;
}
}
}
.chatbox {
.toggle-smiley {
}
converse-emoji-picker {
.emoji-picker__lists {
height: 12em;
.chatbox {
.toggle-smiley {
}
converse-emoji-picker {
.emoji-picker__lists {
height: 12em;
}
}
}
}

26
sass/_headline.scss
View File

@ -31,18 +31,22 @@
}
}
#conversejs.converse-fullscreen {
.chatbox.headlines {
.box-flyout {
background-color: var(--headline-head-color);
}
.chat-head {
&.chat-head-chatbox {
background-color: var(--headline-head-color);
#conversejs {
converse-chats {
&.converse-fullscreen {
.chatbox.headlines {
.box-flyout {
background-color: var(--headline-head-color);
}
.chat-head {
&.chat-head-chatbox {
background-color: var(--headline-head-color);
}
}
.flyout {
border-color: var(--headline-head-color);
}
}
}
.flyout {
border-color: var(--headline-head-color);
}
}
}

2
sass/_messages.scss
View File

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

162
sass/_minimized_chats.scss
View File

@ -1,91 +1,93 @@
converse-chats {
.converse-overlayed {
#minimized-chats {
order: 100;
#conversejs {
converse-chats {
&.converse-overlayed {
#minimized-chats {
order: 100;
width: var(--minimized-chats-width);
margin-bottom: 0;
border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius);
color: var(--inverse-link-color);
margin-right: var(--chat-gutter);
padding: 0;
.badge {
bottom: 8px;
border: 1px solid var(--overlayed-badge-color);
}
#toggle-minimized-chats {
width: var(--minimized-chats-width);
margin-bottom: 0;
border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius);
background-color: var(--link-color);
padding: 1em 0 0 0;
text-align: center;
color: white;
white-space: nowrap;
overflow-y: hidden;
text-overflow: ellipsis;
display: block;
height: 45px;
width: 9em;
}
color: var(--inverse-link-color);
margin-right: var(--chat-gutter);
padding: 0;
a.restore-chat {
cursor: pointer;
padding: 1px 0 1px 5px;
color: var(--chat-head-text-color);
line-height: 15px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
text-decoration: none;
.badge {
bottom: 8px;
border: 1px solid var(--overlayed-badge-color);
}
}
a.restore-chat:visited {
color: var(--chat-head-text-color);
}
.minimized-chats-flyout {
flex-direction: column-reverse;
bottom: 45px;
width: var(--minimized-chats-width);
.chat-head {
min-height: 0;
padding: 0.3em;
border-radius: var(--chatbox-border-radius);
height: 35px;
margin-bottom: 0.2em;
width: 100%;
max-width: 9em;
flex-wrap: nowrap;
#toggle-minimized-chats {
border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius);
background-color: var(--link-color);
padding: 1em 0 0 0;
text-align: center;
color: white;
white-space: nowrap;
overflow-y: hidden;
text-overflow: ellipsis;
display: block;
height: 45px;
width: 9em;
}
&.minimized {
height: auto;
}
}
.unread-message-count {
font-weight: bold;
background-color: white;
border: 1px solid;
text-shadow: 1px 1px 0 var(--text-shadow-color);
color: var(--warning-color);
border-radius: 5px;
padding: 2px 4px;
font-size: 16px;
text-align: center;
position: absolute;
right: 116px;
bottom: 10px;
}
.unread-message-count-hidden,
.chat-head-message-count-hidden {
display: none;
a.restore-chat {
cursor: pointer;
padding: 1px 0 1px 5px;
color: var(--chat-head-text-color);
line-height: 15px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
text-decoration: none;
}
}
a.restore-chat:visited {
color: var(--chat-head-text-color);
}
.minimized-chats-flyout {
flex-direction: column-reverse;
bottom: 45px;
width: var(--minimized-chats-width);
.chat-head {
min-height: 0;
padding: 0.3em;
border-radius: var(--chatbox-border-radius);
height: 35px;
margin-bottom: 0.2em;
width: 100%;
max-width: 9em;
flex-wrap: nowrap;
}
&.minimized {
height: auto;
}
}
.unread-message-count {
font-weight: bold;
background-color: white;
border: 1px solid;
text-shadow: 1px 1px 0 var(--text-shadow-color);
color: var(--warning-color);
border-radius: 5px;
padding: 2px 4px;
font-size: 16px;
text-align: center;
position: absolute;
right: 116px;
bottom: 10px;
}
.unread-message-count-hidden,
.chat-head-message-count-hidden {
display: none;
}
}
}
}

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);