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

32
css/converse.css
View File

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

38
css/inverse.css
View File

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

2
mockup/chatbox.html
View File

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

2
mockup/chatroom.html
View File

@ -10,11 +10,11 @@
<body> <body>
<div id="conversejs" class="fullscreen"> <div id="conversejs" class="fullscreen">
<div class="sidebar"></div>
<div class="row no-gutters"> <div class="row no-gutters">
<div id="controlbox" class="chatbox col-xl-2 col-md-3"> <div id="controlbox" class="chatbox col-xl-2 col-md-3">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
<div class="sidebar"></div>
<div id="users" class="controlbox-pane"></div> <div id="users" class="controlbox-pane"></div>
</div> </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')) { if (_.includes(converse_el.classList, 'sidebar-open')) {
converse_el.classList.remove('sidebar-open'); converse_el.classList.remove('sidebar-open');
hamburger.classList.remove('fa-times'); hamburger.classList.remove('fa-times');
hamburger.classList.remove('fa-bars'); hamburger.classList.add('fa-bars');
} else { } else {
converse_el.classList.add('sidebar-open'); converse_el.classList.add('sidebar-open');
hamburger.classList.remove('fa-bars'); hamburger.classList.remove('fa-bars');

11
sass/_chatbox.scss
View File

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

6
sass/_controlbox.scss
View File

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

3
sass/_core.scss
View File

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

4
sass/inverse/_chatbox.scss
View File

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

1
sass/inverse/_controlbox.scss
View File

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