Mobile fixes and list fixes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-07-27 19:43:47 +02:00
parent e3d1353dc6
commit 3de1eb480e
No known key found for this signature in database
GPG key ID: 60C25B8C072916CF
2 changed files with 15 additions and 29 deletions

View file

@ -77,7 +77,7 @@ kbd {
position: fixed;
top: $header-height;
left: 0;
z-index: 500;
z-index: 1000;
overflow-y: auto;
overflow-x: hidden;
// Do not use vh because of mobile headers
@ -589,17 +589,18 @@ kbd {
display: flex;
// padding is included in height
padding-top: $header-height;
overflow-y: auto;
min-height: 100%;
}
/* APP-CONTENT AND WRAPPER ------------------------------------------ */
/* Part where the content will be loaded into */
#app-content {
z-index: 1000;
z-index: 500;
background-color: var(--color-main-background);
position: relative;
min-height: 100%;
flex-basis: 100vw;
min-height: 100%;
/* margin if navigation element is here */
#app-navigation + & {
margin-left: $navigation-width;

View file

@ -35,19 +35,16 @@
/* full width for message list on mobile */
.app-content-list {
width: 100%;
background: var(--color-main-background);
position: relative;
z-index: 100;
flex: 1 1 100%;
+ .app-content-detail {
display: none;
}
&.showdetails {
display: none;
+ .app-content-detail {
display: initial;
}
/* since list and content are only displayed full window size
* we don't ant inner scrolling
*/
#app-content-wrapper {
.app-content-list,
.app-content-detail {
max-height: unset;
}
}
@ -59,7 +56,7 @@
#app-navigation-toggle-back {
position: fixed;
display: inline-block !important;
top: 45px;
top: $header-height;
left: 0;
width: 44px;
height: 44px;
@ -73,18 +70,11 @@
transform: translateX(-100%);
}
/* end of media query */
}
/* allow horizontal scrollbar in settings
otherwise user management is not usable on mobile */
#body-settings #app-content {
overflow-x: auto !important;
}
#app-navigation-toggle {
position: fixed;
display: inline-block !important;
top: $header-height;
left: 0;
width: 44px;
height: 44px;
@ -132,11 +122,6 @@
max-width: 80%;
}
/* fix controls bar jumping when navigation is slid out */
.snapjs-left #app-navigation-toggle,
.snapjs-left #controls {
top: 0;
}
.snapjs-left table.multiselect thead {
top: 44px;
}