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