Skip to content

C
converse.js
Commit 392a7e8a authored by JC Brand's avatar JC Brand
Browse files
Options

Don't use the bootstrap responsive grid for chats in overlay mode

parent 849d6b26
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 202 additions and 186 deletions
css/converse.css
View file @ 392a7e8a
......@@ -4451,17 +4451,17 @@ body.reset {
#conversejs {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
bottom: 0;
height: auto;
width: 100vw;
color: #777;
direction: ltr;
display: block;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 14px;
position: fixed;
z-index: 1031;
margin-left: -15px; }
direction: ltr;
display: block;
z-index: 1031; }
#conversejs .converse-chatboxes {
position: fixed;
bottom: 0;
height: auto;
width: 100vw; }
#conversejs ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
......@@ -4875,7 +4875,7 @@ body.reset {
border-radius: 25%;
border: none;
cursor: pointer;
font-size: 12px;
font-size: 16px;
margin: 0 0.2em;
padding: 0.3em;
text-decoration: none; }
......@@ -5358,28 +5358,12 @@ body.reset {
border-top-right-radius: 0; } }
#converse-embedded-chat .chatbox,
#conversejs:not(.fullscreen) .chatbox {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 100%;
max-width: 100%; }
@media (min-width: 576px) {
#converse-embedded-chat .chatbox,
#conversejs:not(.fullscreen) .chatbox {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; } }
@media (min-width: 768px) {
#converse-embedded-chat .chatbox,
#conversejs:not(.fullscreen) .chatbox {
flex: 0 0 25%;
max-width: 25%; } }
@media (min-width: 992px) {
#converse-embedded-chat .chatbox,
#conversejs:not(.fullscreen) .chatbox {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
min-width: 250px !important;
width: 250px; }
#converse-embedded-chat .chatbox .box-flyout,
#conversejs:not(.fullscreen) .chatbox .box-flyout {
min-width: 250px !important;
width: 250px; }
#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message {
padding: 0.3em;
......@@ -5737,29 +5721,11 @@ body.reset {
display: block; } }
#conversejs:not(.fullscreen) #controlbox {
order: -1;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 100%;
max-width: 100%; }
@media (min-width: 576px) {
#conversejs:not(.fullscreen) #controlbox {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; } }
@media (min-width: 768px) {
#conversejs:not(.fullscreen) #controlbox {
flex: 0 0 25%;
max-width: 25%; } }
@media (min-width: 992px) {
#conversejs:not(.fullscreen) #controlbox {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
@media (min-width: 1200px) {
#conversejs:not(.fullscreen) #controlbox {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
min-width: 250px !important;
width: 250px; }
#conversejs:not(.fullscreen) #controlbox .box-flyout {
min-width: 250px !important;
width: 250px; }
#conversejs:not(.fullscreen) #controlbox .controlbox-head {
display: flex;
flex-direction: row;
......@@ -5970,7 +5936,7 @@ body.reset {
margin: 0.3em 0; }
#converse-embedded-chat .chatroom,
#conversejs .chatroom {
width: 300px; }
width: 400px; }
@media screen and (max-height: 450px) {
#converse-embedded-chat .chatroom,
#conversejs .chatroom {
......@@ -6044,7 +6010,7 @@ body.reset {
display: flex;
flex-direction: column;
word-wrap: break-word;
min-width: 200px; }
min-width: 250px; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
background-color: #E77051;
......@@ -6206,20 +6172,13 @@ body.reset {
border: 1px solid #999; }
#conversejs .chatbox.chatroom {
flex: 0 0 100%;
max-width: 100%; }
@media (min-width: 576px) {
#conversejs .chatbox.chatroom {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%; } }
@media (min-width: 768px) {
#conversejs .chatbox.chatroom {
flex: 0 0 50%;
max-width: 50%; } }
@media (min-width: 992px) {
#conversejs .chatbox.chatroom {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; } }
min-width: 400px !important;
width: 400px; }
#conversejs .chatbox.chatroom .box-flyout {
min-width: 400px !important;
width: 400px; }
#conversejs .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
font-size: 12px; }
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
background-color: #E7A151; }
......@@ -6234,27 +6193,13 @@ body.reset {
#conversejs:not(.fullscreen) #minimized-chats {
order: 100;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
width: 130px;
margin-bottom: -1em;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: white;
margin-right: 0.5em;
padding: 0; }
@media (min-width: 576px) {
#conversejs:not(.fullscreen) #minimized-chats {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
@media (min-width: 992px) {
#conversejs:not(.fullscreen) #minimized-chats {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%; } }
#conversejs:not(.fullscreen) #minimized-chats .badge {
bottom: 8px;
border: 1px solid #818479; }
......@@ -6286,8 +6231,8 @@ body.reset {
color: white; }
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout {
flex-direction: column-reverse;
width: 100%;
bottom: 48px; }
bottom: 34px;
width: 130px; }
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout .chat-head {
padding: 0.3em;
border-radius: 4px;
......
css/inverse.css
View file @ 392a7e8a
......@@ -4451,17 +4451,17 @@ body.reset {
#conversejs {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
bottom: 0;
height: auto;
width: 100vw;
color: #777;
direction: ltr;
display: block;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 16px;
position: fixed;
z-index: 1031;
margin-left: -15px; }
direction: ltr;
display: block;
z-index: 1031; }
#conversejs .converse-chatboxes {
position: fixed;
bottom: 0;
height: auto;
width: 100vw; }
#conversejs ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
......@@ -4884,17 +4884,19 @@ body {
padding-right: 10%;
font-size: 120%; }
#conversejs.fullscreen form.converse-form {
margin: 1em; }
#conversejs.fullscreen form.converse-form input[type=checkbox] {
margin-left: 1em;
display: inline;
margin-bottom: 2em; }
#conversejs.fullscreen form.converse-form input[type=button],
#conversejs.fullscreen form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin-right: 1em; }
#conversejs.fullscreen {
margin-left: -15px; }
#conversejs.fullscreen form.converse-form {
margin: 1em; }
#conversejs.fullscreen form.converse-form input[type=checkbox] {
margin-left: 1em;
display: inline;
margin-bottom: 2em; }
#conversejs.fullscreen form.converse-form input[type=button],
#conversejs.fullscreen form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin-right: 1em; }
#conversejs #user-profile-modal label {
font-weight: bold; }
......@@ -5805,6 +5807,9 @@ body {
#conversejs.fullscreen #controlbox {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
#conversejs.fullscreen #controlbox.logged-out {
flex: 0 0 100%;
max-width: 100%; }
#conversejs.fullscreen #controlbox .controlbox-pane {
border-radius: 0; }
#conversejs.fullscreen #controlbox .flyout {
......
mockup/chatbox.html
View file @ 392a7e8a
......@@ -11,7 +11,7 @@
<body class="reset">
<div id="conversejs" class="fullscreen">
<div class="sidebar"></div>
<div class="row no-gutters">
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
<div class="controlbox-panes">
......
mockup/chatroom.html
View file @ 392a7e8a
......@@ -11,7 +11,7 @@
<body class="reset">
<div id="conversejs" class="fullscreen">
<div class="sidebar"></div>
<div class="row no-gutters">
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
<div class="controlbox-panes">
......
mockup/converse.html
View file @ 392a7e8a
......@@ -14,7 +14,7 @@
</div>
<div id="conversejs">
<div class="row no-gutters">
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
<div class="controlbox-panes">
......
mockup/fullscreen-login.html
View file @ 392a7e8a
......@@ -15,8 +15,8 @@
</div>
<div id="conversejs" class="fullscreen">
<div class="row no-gutters">
<div id="controlbox" class="chatbox">
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox logged-out">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div class="row">
......
mockup/overlayed-login.html
View file @ 392a7e8a
......@@ -15,7 +15,7 @@
</div>
<div id="conversejs">
<div class="row no-gutters">
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
<div class="chat-head controlbox-head">
......
sass/_core.scss
View file @ 392a7e8a
......@@ -42,18 +42,19 @@ body.reset {
#conversejs {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
bottom: 0;
height: auto;
width: 100vw;
color: $text-color;
direction: ltr;
display: block;
font-family: "Helvetica", "Arial", sans-serif;
font-size: $font-size;
position: fixed;
direction: ltr;
display: block;
z-index: 1031; // One more than bootstrap navbar
margin-left: -15px; // XXX: why is this necessary?
.converse-chatboxes {
position: fixed;
bottom: 0;
height: auto;
width: 100vw;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color;
......
sass/converse/_chatbox.scss
View file @ 392a7e8a
......@@ -13,18 +13,12 @@
}
}
.chatbox {
@include make-col-ready();
@include media-breakpoint-up(xs) {
@include make-col(12);
}
@include media-breakpoint-up(sm) {
@include make-col(4);
}
@include media-breakpoint-up(md) {
@include make-col(3);
}
@include media-breakpoint-up(lg) {
@include make-col(2);
min-width: $chat-width!important;
width: $chat-width;
.box-flyout {
min-width: $chat-width!important;
width: $chat-width;
}
.chat-body {
......
sass/converse/_chatrooms.scss
View file @ 392a7e8a
#conversejs {
.chatbox {
&.chatroom {
@include media-breakpoint-up(xs) {
@include make-col(12);
min-width: $chatroom-width !important;
width: $chatroom-width;
.box-flyout {
min-width: $chatroom-width !important;
width: $chatroom-width;
}
@include media-breakpoint-up(sm) {
@include make-col(8);
}
@include media-breakpoint-up(md) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
.chatroom-body {
.occupants {
.chatroom-features {
.feature {
font-size: $font-size-small;
}
}
}
}
}
}
......
sass/converse/_controlbox.scss
View file @ 392a7e8a
#conversejs:not(.fullscreen) {
#controlbox {
order: -1;
@include make-col-ready();
@include media-breakpoint-up(xs) {
@include make-col(12);
}
@include media-breakpoint-up(sm) {
@include make-col(4);
}
@include media-breakpoint-up(md) {
@include make-col(3);
min-width: $controlbox-width !important;
width: $controlbox-width;
.box-flyout {
min-width: $controlbox-width !important;
width: $controlbox-width;
}
@include media-breakpoint-up(lg) {
@include make-col(2);
}
@include media-breakpoint-up(xl) {
@include make-col(2);
}
.controlbox-head {
display: flex;
flex-direction: row;
......
sass/converse/_minimized_chats.scss
View file @ 392a7e8a
#conversejs:not(.fullscreen) {
#minimized-chats {
order: 100;
@include make-col-ready();
@include media-breakpoint-up(xs) {
@include make-col(2);
}
@include media-breakpoint-up(sm) {
@include make-col(2);
}
@include media-breakpoint-up(lg) {
@include make-col(1);
}
width: $minimized-chats-width;
margin-bottom: -2*$chat-gutter;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
......@@ -59,8 +50,8 @@
.minimized-chats-flyout {
flex-direction: column-reverse;
width: 100%;
bottom: 48px;
bottom: 34px;
width: $minimized-chats-width;
.chat-head {
padding: 0.3em;
......
sass/converse/_variables.scss
View file @ 392a7e8a
......@@ -109,8 +109,8 @@ $line-height-small: 14px !default;
$line-height: 16px !default;
$line-height-large: 20px !default;
$controlbox-width: 200px !default;
$chat-width: 200px !default;
$controlbox-width: 250px !default;
$chat-width: 250px !default;
$chat-height: 450px !default;
$chat-gutter: 0.5em !default;
$minimized-chats-width: 130px !default;
......@@ -121,7 +121,7 @@ $small-mobile-chat-height: 300px !default;
$font-path: "../fonticons/fonts/" !default;
$chatroom-width: 300px !default;
$chatroom-width: 400px !default;
$chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default;
$chatroom-color-lightest: $light-red !default;
......@@ -135,4 +135,4 @@ $box-close-button-padding-top: 4px !default;
$box-close-button-padding-bottom: 4px !default;
$box-close-button-padding-left: 4px !default;
$box-close-button-padding-right: 4px !default;
$box-close-font-size: 12px !default;
$box-close-font-size: 16px !default;
sass/inverse/_controlbox.scss
View file @ 392a7e8a
......@@ -8,6 +8,10 @@
@include make-col(2);
}
&.logged-out {
@include make-col(12);
}
margin: 0;
.controlbox-pane {
......
sass/inverse/_core.scss
View file @ 392a7e8a
......@@ -36,6 +36,9 @@ body {
#conversejs.fullscreen {
// XXX: why is this neccessary?
margin-left: -15px;
form {
&.converse-form {
margin: 1em;
......
src/converse-controlbox.js
View file @ 392a7e8a
......@@ -305,8 +305,6 @@
renderLoginPanel () {
this.el.classList.add("logged-out");
this.el.classList.remove("col-xl-2");
this.el.classList.remove("col-md-3");
if (_.isNil(this.loginpanel)) {
this.loginpanel = new _converse.LoginPanel({
'model': new _converse.LoginPanelModel()
......@@ -332,9 +330,6 @@
delete this.loginpanel;
}
this.el.classList.remove("logged-out");
this.el.classList.add("col-xl-2");
this.el.classList.add("col-md-3");
this.controlbox_pane = new _converse.ControlBoxPane();
this.el.querySelector('.controlbox-panes').insertAdjacentElement(
'afterBegin',
......
src/converse-dragresize.js
View file @ 392a7e8a
This diff is collapsed.
src/templates/chatboxes.html
View file @ 392a7e8a
<div class="row no-gutters"></div>
<div class="converse-chatboxes row no-gutters"></div>
<div id="converse-modals" class="modals"></div>
src/templates/chatroom_features.html
View file @ 392a7e8a
......@@ -24,7 +24,7 @@
<li class="feature" title="{{{ o.tt_persistent }}}"><span class="fa fa-save"></span>{{{ o.label_persistent }}}</li>
{[ } ]}
{[ if (o.temporary) { ]}
<li class="feature" title="{{{ o.tt_temporary }}}"><span class="fa fa-snowflake"></span>{{{ o.label_temporary }}}</li>
<li class="feature" title="{{{ o.tt_temporary }}}"><span class="fa fa-snowflake-o"></span>{{{ o.label_temporary }}}</li>
{[ } ]}
{[ if (o.nonanonymous) { ]}
<li class="feature" title="{{{ o.tt_nonanonymous }}}"><span class="fa fa-idcard-dark"></span>{{{ o.label_nonanonymous }}}</li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7