Mobile fixes and list fixes
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
e3d1353dc6
commit
3de1eb480e
2 changed files with 15 additions and 29 deletions
|
@ -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,19 +589,20 @@ 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 + & {
|
||||
#app-navigation + & {
|
||||
margin-left: $navigation-width;
|
||||
}
|
||||
/* no top border for first settings item */
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
flex: 1 1 100%;
|
||||
+ .app-content-detail {
|
||||
display: none;
|
||||
}
|
||||
&.showdetails {
|
||||
display: none;
|
||||
+ .app-content-detail {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue