Fix margin issues at different viewport sizes
This commit is contained in:
parent
3d74ed31c2
commit
c81841e036
@ -100,6 +100,7 @@
|
||||
.box-flyout {
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -423,6 +423,13 @@
|
||||
width: var(--controlbox-width);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
margin-left: -15px;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.login-trusted {
|
||||
white-space: nowrap;
|
||||
font-size: 90%;
|
||||
@ -469,6 +476,23 @@
|
||||
border-radius: var(--chatbox-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-heading {
|
||||
padding-top: 0.8rem;
|
||||
padding-left: 0.8rem;
|
||||
width: 100%;
|
||||
}
|
||||
.converse-svg-logo {
|
||||
height: 1em;
|
||||
}
|
||||
#controlbox {
|
||||
#converse-login-panel {
|
||||
height: 100%;
|
||||
}
|
||||
.controlbox-panes {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.converse-embedded,
|
||||
@ -587,30 +611,17 @@
|
||||
&.converse-fullscreen {
|
||||
#controlbox {
|
||||
margin-left: -15px;
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
margin-left: 0;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.controlbox-panes {
|
||||
padding-top: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
&.converse-overlayed {
|
||||
.brand-heading {
|
||||
padding-top: 0.8rem;
|
||||
padding-left: 0.8rem;
|
||||
width: 100%;
|
||||
}
|
||||
.converse-svg-logo {
|
||||
height: 1em;
|
||||
}
|
||||
#controlbox {
|
||||
#converse-login-panel {
|
||||
height: 100%;
|
||||
}
|
||||
.controlbox-panes {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -633,7 +644,6 @@
|
||||
|
||||
.chatbox {
|
||||
.box-flyout {
|
||||
margin-left: 15px; // Counteracts Bootstrap margins, but not clear why needed...
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
@ -643,6 +653,7 @@
|
||||
}
|
||||
|
||||
#controlbox {
|
||||
margin-left: 0;
|
||||
width: 100vw !important;
|
||||
.box-flyout {
|
||||
width: 100vw !important;
|
||||
|
17
src/plugins/muc-views/styles/controlbox.scss
Normal file
17
src/plugins/muc-views/styles/controlbox.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.conversejs {
|
||||
#controlbox {
|
||||
#chatrooms {
|
||||
padding: 0;
|
||||
|
||||
.add-chatroom {
|
||||
input[type=button],
|
||||
input[type=submit],
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
}
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -3,6 +3,7 @@
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "shared/styles/_variables.scss";
|
||||
|
||||
@import "./controlbox.scss";
|
||||
@import "./muc.scss";
|
||||
@import "./muc-details-modal.scss";
|
||||
|
||||
|
@ -2,6 +2,8 @@
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/media";
|
||||
@import "shared/styles/_variables.scss";
|
||||
@import "shared/styles/_mixins.scss";
|
||||
|
||||
|
||||
.conversejs {
|
||||
@ -18,6 +20,12 @@
|
||||
margin: 0;
|
||||
position: relative;
|
||||
margin-left: -15px;
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
margin-left: 0;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user