Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Fix margin issues at different viewport sizes

Browse Source
This commit is contained in:
JC Brand 2021-11-26 09:44:27 +01:00
parent 3d74ed31c2
commit c81841e036
5 changed files with 58 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/plugins/chatview/styles/index.scss
View File

@ -100,6 +100,7 @@
.box-flyout {
box-shadow: none;
overflow: hidden;
margin-left: 0;
}
}
}

51
src/plugins/controlbox/styles/_controlbox.scss
View File

@ -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
View 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;
}
}
}
}

1
src/plugins/muc-views/styles/index.scss
View File

@ -3,6 +3,7 @@
@import "bootstrap/scss/mixins";
@import "shared/styles/_variables.scss";
@import "./controlbox.scss";
@import "./muc.scss";
@import "./muc-details-modal.scss";

8
src/plugins/singleton/singleton.scss
View File

@ -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;
}
}
}
}