From 37254cad1a12aaa3b3e0c969fe317ccf50514b58 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 26 Nov 2022 01:16:07 +0100
Subject: [PATCH] Mobile UI improvements

---
 .../http/webapp/src/components/panels/Entities/Index.vue | 5 +++++
 .../backend/http/webapp/src/style/themes/light.scss      | 7 ++++---
 platypush/backend/http/webapp/src/utils/Screen.vue       | 9 ++++++---
 3 files changed, 15 insertions(+), 6 deletions(-)

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 ce99ba09bb..e09c9b1d29 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 d0babf3e0f..1fa3b0cf8a 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 ab8e7508f9..a9c42f0392 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
     },
   },
 }