diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue index ce99ba09b..e09c9b1d2 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue @@ -345,6 +345,7 @@ export default { background: $default-bg-2; box-shadow: $border-shadow-bottom; position: relative; + z-index: 1; .right { position: absolute; @@ -363,6 +364,10 @@ export default { width: 100%; height: calc(100% - #{$selector-height}); overflow: auto; + + @include until($tablet) { + padding: 0.5em; + } } .groups-container { diff --git a/platypush/backend/http/webapp/src/style/themes/light.scss b/platypush/backend/http/webapp/src/style/themes/light.scss index d0babf3e0..1fa3b0cf8 100644 --- a/platypush/backend/http/webapp/src/style/themes/light.scss +++ b/platypush/backend/http/webapp/src/style/themes/light.scss @@ -86,11 +86,12 @@ $active-bg: #8fefb7 !default; $disabled-fg: rgb(155, 155, 155); /// 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-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-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-border: 1px solid #b1ebba !default; $nav-entry-hover-bg: $hover-bg !default; diff --git a/platypush/backend/http/webapp/src/utils/Screen.vue b/platypush/backend/http/webapp/src/utils/Screen.vue index ab8e7508f..a9c42f039 100644 --- a/platypush/backend/http/webapp/src/utils/Screen.vue +++ b/platypush/backend/http/webapp/src/utils/Screen.vue @@ -3,15 +3,18 @@ export default { name: "Screen", methods: { isMobile() { - return window.matchMedia("only screen and (max-width: 760px)").matches + return window.matchMedia("only screen and (max-width: 768px)").matches }, 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() { - return window.matchMedia("only screen and (min-width: 1152px)").matches + return window.matchMedia("only screen and (min-width: 1024px)").matches }, }, }