Skip to content

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

Update css for mobile view of overlay mode.

parent d7de7390
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 83 deletions
css/converse.css
View file @ bfc30818
......@@ -5692,6 +5692,7 @@ body.reset {
#conversejs #controlbox .add-xmpp-contact button {
width: 100%; }
#conversejs .toggle-controlbox {
text-align: center;
background-color: #578EA9;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
......@@ -5703,21 +5704,35 @@ body.reset {
#conversejs .toggle-controlbox span {
color: white; }
@media screen and (max-width: 767px) {
#conversejs #controlbox .box-flyout {
width: 100%;
left: 0; }
#conversejs #controlbox .sidebar {
display: block; }
#conversejs #controlbox .controlbox-pane {
position: absolute;
top: 0;
display: none;
width: 100%; }
#conversejs.sidebar-open .chatbox:not(#controlbox) {
display: none; }
#conversejs.sidebar-open #controlbox .controlbox-pane {
display: block; } }
@media (max-width: 767.98px) {
#conversejs {
left: 0;
right: 0;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); }
#conversejs .converse-chatboxes {
margin: 0 !important;
flex-direction: row !important;
justify-content: space-between; }
#conversejs .converse-chatboxes .converse-chatroom {
font-size: 14px; }
#conversejs .converse-chatboxes .chatbox .box-flyout {
left: 0;
bottom: 0;
border-radius: 0;
width: 100vw !important;
height: 100vh !important; }
#conversejs .converse-chatboxes #controlbox {
order: 0; }
#conversejs .converse-chatboxes #controlbox .box-flyout {
width: 100vw !important;
height: 100vh !important; }
#conversejs .converse-chatboxes #controlbox .sidebar {
display: block; }
#conversejs .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) {
display: none; }
#conversejs .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
display: block; } }
#conversejs:not(.fullscreen) #controlbox {
order: -1;
min-width: 250px !important;
......@@ -5884,9 +5899,6 @@ body.reset {
line-height: 16px;
width: 100%; }
#converse-embedded-chat .new-chatroom-nick,
#conversejs .new-chatroom-nick {
margin: 1em auto; }
#converse-embedded-chat .add-chatroom input[type="submit"],
#converse-embedded-chat .add-chatroom input[type="button"],
#conversejs .add-chatroom input[type="submit"],
......@@ -6138,11 +6150,14 @@ body.reset {
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
font-size: 90%;
color: #A53214; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
display: block; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
margin-top: 2em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
display: block; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
......
css/inverse.css
View file @ bfc30818
......@@ -5762,6 +5762,7 @@ body {
#conversejs #controlbox .add-xmpp-contact button {
width: 100%; }
#conversejs .toggle-controlbox {
text-align: center;
background-color: #578EA9;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
......@@ -5773,21 +5774,35 @@ body {
#conversejs .toggle-controlbox span {
color: white; }
@media screen and (max-width: 767px) {
#conversejs #controlbox .box-flyout {
width: 100%;
left: 0; }
#conversejs #controlbox .sidebar {
display: block; }
#conversejs #controlbox .controlbox-pane {
position: absolute;
top: 0;
display: none;
width: 100%; }
#conversejs.sidebar-open .chatbox:not(#controlbox) {
display: none; }
#conversejs.sidebar-open #controlbox .controlbox-pane {
display: block; } }
@media (max-width: 767.98px) {
#conversejs {
left: 0;
right: 0;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); }
#conversejs .converse-chatboxes {
margin: 0 !important;
flex-direction: row !important;
justify-content: space-between; }
#conversejs .converse-chatboxes .converse-chatroom {
font-size: 14px; }
#conversejs .converse-chatboxes .chatbox .box-flyout {
left: 0;
bottom: 0;
border-radius: 0;
width: 100vw !important;
height: 100vh !important; }
#conversejs .converse-chatboxes #controlbox {
order: 0; }
#conversejs .converse-chatboxes #controlbox .box-flyout {
width: 100vw !important;
height: 100vh !important; }
#conversejs .converse-chatboxes #controlbox .sidebar {
display: block; }
#conversejs .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) {
display: none; }
#conversejs .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
display: block; } }
#conversejs.fullscreen #controlbox {
position: relative;
width: 100%;
......@@ -6022,9 +6037,6 @@ body {
#conversejs.fullscreen #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
width: 80%; }
#converse-embedded-chat .new-chatroom-nick,
#conversejs .new-chatroom-nick {
margin: 1em auto; }
#converse-embedded-chat .add-chatroom input[type="submit"],
#converse-embedded-chat .add-chatroom input[type="button"],
#conversejs .add-chatroom input[type="submit"],
......@@ -6276,11 +6288,14 @@ body {
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
font-size: 90%;
color: #A53214; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
display: block; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
margin-top: 2em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
display: block; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
......
css/mobile.css deleted 100644 → 0
View file @ d7de7390
#conversejs {
left: 0px;
right: 0px;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.converse-chatroom {
font-size: 14px;
}
.intro {
padding: 0;
height: 100vh;
}
sass/_chatrooms.scss
View file @ bfc30818
#converse-embedded-chat,
#conversejs {
.new-chatroom-nick {
margin: 1em auto;
}
.add-chatroom {
input[type="submit"],
input[type="button"] {
......@@ -266,6 +262,8 @@
color: $error-color;
}
.chatroom-form {
margin-top: 2em;
label,
input[type=text] {
display: block;
......
sass/_controlbox.scss
View file @ bfc30818
......@@ -419,6 +419,7 @@
}
.toggle-controlbox {
text-align: center;
background-color: $link-color;
border-top-left-radius: $button-border-radius;
border-top-right-radius: $button-border-radius;
......@@ -433,36 +434,54 @@
}
}
@media screen and (max-width: 767px) {
@include media-breakpoint-down(sm) {
#conversejs {
#controlbox {
.box-flyout {
width: 100%;
left: 0;
}
left: 0;
right: 0;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
.sidebar {
display: block;
}
.converse-chatboxes {
margin: 0 !important;
flex-direction: row !important;
justify-content: space-between;
.controlbox-pane {
position: absolute;
top: 0;
display: none;
width: 100%;
.converse-chatroom {
font-size: 14px;
}
}
&.sidebar-open {
.chatbox:not(#controlbox) {
display: none;
.chatbox {
.box-flyout {
left: 0;
bottom: 0;
border-radius: 0;
width: 100vw !important;
height: 100vh !important;
}
}
#controlbox {
.controlbox-pane {
order: 0;
.box-flyout {
width: 100vw !important;
height: 100vh !important;
}
.sidebar {
display: block;
}
}
&.sidebar-open {
.chatbox:not(#controlbox) {
display: none;
}
#controlbox {
.controlbox-pane {
display: block;
}
}
}
}
}
}
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