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

Fix sidebar in responsive mode

Browse Source
This commit is contained in:
JC Brand 2018-01-26 20:50:11 +01:00
parent b5a43f8177
commit 53adebb780
10 changed files with 57 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/converse.css
View File

@ -4803,10 +4803,9 @@
#converse-embedded-chat .sidebar,
#conversejs .sidebar {
display: none;
position: absolute;
width: 50px;
height: 100vh;
padding: 10px 0;
padding: 1rem 0;
background-color: #578EA9;
color: white;
text-align: center; }
@ -5604,8 +5603,14 @@
left: 0; }
@media screen and (max-width: 767px) {
#conversejs > .row {
flex-direction: row-reverse; }
#conversejs #login-dialog .pure-form.converse-form {
padding: 3em 2em 3em; }
#conversejs .sidebar {
display: block; }
#conversejs .chatbox {
width: calc(100% - 50px); }
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
white-space: normal; }
#conversejs .chatbox .row .box-flyout {
@ -6036,12 +6041,11 @@
#conversejs #controlbox #users {
position: absolute;
top: 0;
left: 50px;
display: none;
width: calc(100% - 50px); }
display: none; }
#conversejs #controlbox #users.controlbox-pane {
height: 100vh; }
#conversejs.sidebar-open > .chatbox:not(#controlbox) {
height: 100vh;
width: 100%; }
#conversejs.sidebar-open .chatbox:not(#controlbox) {
display: none; }
#conversejs.sidebar-open #controlbox #users {
display: block; } }

20
css/inverse.css
View File

@ -4803,10 +4803,9 @@
#converse-embedded-chat .sidebar,
#conversejs .sidebar {
display: none;
position: absolute;
width: 50px;
height: 100vh;
padding: 10px 0;
padding: 1rem 0;
background-color: #578EA9;
color: white;
text-align: center; }
@ -5660,8 +5659,14 @@ body {
left: 0; }
@media screen and (max-width: 767px) {
#conversejs > .row {
flex-direction: row-reverse; }
#conversejs #login-dialog .pure-form.converse-form {
padding: 3em 2em 3em; }
#conversejs .sidebar {
display: block; }
#conversejs .chatbox {
width: calc(100% - 50px); }
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
white-space: normal; }
#conversejs .chatbox .row .box-flyout {
@ -5728,7 +5733,7 @@ body {
padding-right: 10px; }
@media screen and (max-width: 767px) {
#conversejs.fullscreen > .chatbox {
#conversejs.fullscreen .chatbox {
width: calc(100% - 50px); }
#conversejs.fullscreen .chatbox .row {
width: calc(100% - 50px); } }
@ -6110,12 +6115,11 @@ body {
#conversejs #controlbox #users {
position: absolute;
top: 0;
left: 50px;
display: none;
width: calc(100% - 50px); }
display: none; }
#conversejs #controlbox #users.controlbox-pane {
height: 100vh; }
#conversejs.sidebar-open > .chatbox:not(#controlbox) {
height: 100vh;
width: 100%; }
#conversejs.sidebar-open .chatbox:not(#controlbox) {
display: none; }
#conversejs.sidebar-open #controlbox #users {
display: block; } }

2
mockup/chatbox.html
View File

@ -10,11 +10,11 @@
<body>
<div id="conversejs" class="fullscreen">
<div class="sidebar"></div>
<div class="row no-gutters">
<div id="controlbox" class="chatbox col-xl-2 col-md-3">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div class="sidebar"></div>
<div id="users" class="controlbox-pane"></div>
</div>
</div>

2
mockup/chatroom.html
View File

@ -10,11 +10,11 @@
<body>
<div id="conversejs" class="fullscreen">
<div class="sidebar"></div>
<div class="row no-gutters">
<div id="controlbox" class="chatbox col-xl-2 col-md-3">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div class="sidebar"></div>
<div id="users" class="controlbox-pane"></div>
</div>
</div>

2
mockup/sidebar.js
View File

@ -16,7 +16,7 @@ const Sidebar = Backbone.NativeView.extend({
if (_.includes(converse_el.classList, 'sidebar-open')) {
converse_el.classList.remove('sidebar-open');
hamburger.classList.remove('fa-times');
hamburger.classList.remove('fa-bars');
hamburger.classList.add('fa-bars');
} else {
converse_el.classList.add('sidebar-open');
hamburger.classList.remove('fa-bars');

11
sass/_chatbox.scss
View File

@ -438,12 +438,23 @@
@media screen and (max-width: 767px) {
#conversejs {
> .row {
flex-direction: row-reverse;
}
#login-dialog {
.pure-form.converse-form {
padding: 3em 2em 3em;
}
}
.sidebar {
display: block;
}
.chatbox {
width: calc(100% - 50px);
.chat-body {
.chat-message {
.chat-msg-author {

6
sass/_controlbox.scss
View File

@ -522,19 +522,17 @@
#users {
position: absolute;
top: 0;
left: 50px;
display: none;
width: calc(100% - 50px);
&.controlbox-pane {
height: 100vh;
width: 100%;
}
}
}
&.sidebar-open {
> .chatbox:not(#controlbox) {
.chatbox:not(#controlbox) {
display: none;
}
#controlbox {

3
sass/_core.scss
View File

@ -54,10 +54,9 @@
.sidebar {
display: none;
position: absolute;
width: 50px;
height: 100vh;
padding: 10px 0;
padding: 1rem 0;
background-color: $controlbox-head-color;
color: white;
text-align: center;

4
sass/inverse/_chatbox.scss
View File

@ -88,10 +88,8 @@
@media screen and (max-width: 767px) {
#conversejs.fullscreen {
> .chatbox {
width: calc(100% - 50px);
}
.chatbox {
width: calc(100% - 50px);
.row {
width: calc(100% - 50px);
}

1
sass/inverse/_controlbox.scss
View File

@ -1,5 +1,4 @@
#conversejs.fullscreen {
#controlbox {
margin: 0;