Fix sidebar in responsive mode
This commit is contained in:
JC Brand
parent
b5a43f8177
commit
53adebb780
|
|
@ -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,15 +5603,21 @@
|
|||
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 .chatbox .chat-body .chat-message .chat-msg-author {
|
||||
white-space: normal; }
|
||||
#conversejs .chatbox .row .box-flyout {
|
||||
left: 50px;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
box-shadow: none; } }
|
||||
#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 {
|
||||
left: 50px;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
box-shadow: none; } }
|
||||
#converse-embedded-chat .chat-head,
|
||||
#conversejs:not(.fullscreen) .chat-head {
|
||||
border-top-left-radius: 4px;
|
||||
|
|
@ -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; } }
|
||||
|
|
|
|||
|
|
@ -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,15 +5659,21 @@ 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 .chatbox .chat-body .chat-message .chat-msg-author {
|
||||
white-space: normal; }
|
||||
#conversejs .chatbox .row .box-flyout {
|
||||
left: 50px;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
box-shadow: none; } }
|
||||
#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 {
|
||||
left: 50px;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
box-shadow: none; } }
|
||||
#conversejs.fullscreen .chatbox-btn {
|
||||
font-size: 18px;
|
||||
margin: 0 0.3em; }
|
||||
|
|
@ -5728,10 +5733,10 @@ 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); } }
|
||||
#conversejs.fullscreen .chatbox .row {
|
||||
width: calc(100% - 50px); } }
|
||||
#conversejs #controlbox {
|
||||
margin-right: 1.5em; }
|
||||
#conversejs #controlbox .pure-form.converse-form {
|
||||
|
|
@ -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; } }
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,5 +1,4 @@
|
|||
#conversejs.fullscreen {
|
||||
|
||||
#controlbox {
|
||||
margin: 0;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user