forked from platypush/platypush
Mobile UI improvements
This commit is contained in:
parent
f28f08dd1a
commit
37254cad1a
3 changed files with 15 additions and 6 deletions
|
@ -345,6 +345,7 @@ export default {
|
||||||
background: $default-bg-2;
|
background: $default-bg-2;
|
||||||
box-shadow: $border-shadow-bottom;
|
box-shadow: $border-shadow-bottom;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -363,6 +364,10 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - #{$selector-height});
|
height: calc(100% - #{$selector-height});
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
|
@include until($tablet) {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.groups-container {
|
.groups-container {
|
||||||
|
|
|
@ -86,11 +86,12 @@ $active-bg: #8fefb7 !default;
|
||||||
$disabled-fg: rgb(155, 155, 155);
|
$disabled-fg: rgb(155, 155, 155);
|
||||||
|
|
||||||
/// Navigator
|
/// Navigator
|
||||||
$nav-bg: rgba(245, 245, 245, 0.9) !default;
|
$nav-bg: rgb(245, 245, 245) !default;
|
||||||
|
$nav-bg-collapsed-mobile: white !default;
|
||||||
$nav-fg: #5a5e5b !default;
|
$nav-fg: #5a5e5b !default;
|
||||||
$nav-toggler-bg: rgba(235, 235, 235, 0.9) !default;
|
$nav-toggler-bg: rgb(235, 235, 235) !default;
|
||||||
$nav-toggler-shadow: 0 0 1px 2px #c9cdca !default;
|
$nav-toggler-shadow: 0 0 1px 2px #c9cdca !default;
|
||||||
$nav-footer-bg: rgba(240, 240, 240, 0.9) !default;
|
$nav-footer-bg: rgb(240, 240, 240) !default;
|
||||||
$nav-entry-selected-bg: $selected-bg !default;
|
$nav-entry-selected-bg: $selected-bg !default;
|
||||||
$nav-entry-selected-border: 1px solid #b1ebba !default;
|
$nav-entry-selected-border: 1px solid #b1ebba !default;
|
||||||
$nav-entry-hover-bg: $hover-bg !default;
|
$nav-entry-hover-bg: $hover-bg !default;
|
||||||
|
|
|
@ -3,15 +3,18 @@ export default {
|
||||||
name: "Screen",
|
name: "Screen",
|
||||||
methods: {
|
methods: {
|
||||||
isMobile() {
|
isMobile() {
|
||||||
return window.matchMedia("only screen and (max-width: 760px)").matches
|
return window.matchMedia("only screen and (max-width: 768px)").matches
|
||||||
},
|
},
|
||||||
|
|
||||||
isTablet() {
|
isTablet() {
|
||||||
return !this.isMobile() && window.matchMedia("only screen and (max-width: 960px)").matches
|
return (
|
||||||
|
!this.isMobile() &&
|
||||||
|
window.matchMedia("only screen and (max-width: 1023px)").matches
|
||||||
|
)
|
||||||
},
|
},
|
||||||
|
|
||||||
isDesktop() {
|
isDesktop() {
|
||||||
return window.matchMedia("only screen and (min-width: 1152px)").matches
|
return window.matchMedia("only screen and (min-width: 1024px)").matches
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue