Browse Source
Mobile fixes and list fixes
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
pull/10421/head
John Molakvoæ (skjnldsv)
8 years ago
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
2 changed files with
15 additions and
29 deletions
-
core/css/apps.scss
-
core/css/mobile.scss
|
|
|
@ -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; |
|
|
|
} |
|
|
|
|
