From 4f78d61223b4b8c138f6f2ab8157547cfa32cf01 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 6 May 2023 12:34:27 +0200
Subject: [PATCH] Improved UI on mobile.

---
 .../src/components/panels/Entities/Device.vue |   4 +-
 .../src/components/panels/Entities/Entity.vue |  52 +-------
 .../src/components/panels/Entities/Index.vue  |  74 +++++++++--
 .../src/components/panels/Entities/Modal.vue  |  13 ++
 .../components/panels/Entities/common.scss    | 116 ++++++++++++++++++
 5 files changed, 196 insertions(+), 63 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue
index 0d824cdb1..a61f94492 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="entity device-container">
     <div class="head">
-      <div class="col-1 icon">
+      <div class="icon">
         <EntityIcon
           :entity="value"
           :loading="loading"
           :error="error" />
       </div>
 
-      <div class="col-11 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
     </div>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
index b0d1220aa..8668cfe15 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
@@ -58,7 +58,7 @@ export default {
 
   computed: {
     hasChildren() {
-      return !!Object.keys(this.children).length
+      return !!Object.keys(this.children || {}).length
     },
 
     isCollapsed() {
@@ -172,54 +172,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.entity-container-wrapper {
-  &.with-children:not(.collapsed) {
-    box-shadow: 0 3px 4px 0 $default-shadow-color;
-  }
-}
-
-.entity-container {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding: 0 !important;
-  border-bottom: $default-border-3;
-
-  &.with-children:not(.collapsed) {
-    @include expanded-entity();
-  }
-
-  &:hover {
-    background: $hover-bg;
-  }
-
-  .adjuster {
-    cursor: pointer;
-    width: 100%;
-
-    &.with-children {
-      width: calc(100% - $collapse-toggler-width - 0.5em);
-    }
-  }
-}
-
-.blink {
-  animation: blink-animation 1s steps(20, start);
-}
-
-@keyframes blink-animation {
-  0% {
-    background: initial
-  }
-
-  50% {
-    background: $active-bg;
-  }
-
-  100% {
-    background: initial
-  }
-}
 </style>
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 ee697c276..73f55b441 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
@@ -409,7 +409,7 @@ export default {
   font-weight: 400;
 
   button {
-    background: #ffffff00;
+    background: transparent;
     border: 0;
 
     &:hover {
@@ -447,6 +447,10 @@ export default {
   }
 
   .groups-container {
+    @include until(#{$tablet - 1}) {
+      background: $default-bg-2;
+    }
+
     @include until(#{$desktop - 1}) {
       display: flex;
       flex-direction: column;
@@ -463,10 +467,13 @@ export default {
     max-width: 600px;
     max-height: 100%;
     position: relative;
-    padding: $main-margin 0;
     display: flex;
     break-inside: avoid;
 
+    @include until(#{$tablet - 1}) {
+      padding: 0;
+    }
+
     @include from($tablet) {
       padding: $main-margin;
     }
@@ -480,8 +487,11 @@ export default {
       flex-direction: column;
       flex-grow: 1;
       position: relative;
-      box-shadow: $group-shadow;
-      border-radius: 1em;
+
+      @include from($tablet) {
+        border-radius: 1em;
+        box-shadow: $group-shadow;
+      }
     }
 
     .header {
@@ -490,7 +500,14 @@ export default {
       display: table;
       background: $header-bg;
       box-shadow: $header-shadow;
-      border-radius: 1em 1em 0 0;
+
+      @include until(#{$tablet - 1}) {
+        border-bottom: 1px solid $border-color-2;
+      }
+
+      @include from($tablet) {
+        border-radius: 1em 1em 0 0;
+      }
 
       .section {
         height: 100%;
@@ -510,23 +527,60 @@ export default {
           text-align: center;
         }
       }
+
+      .title {
+        text-transform: capitalize;
+
+        @include until(#{$tablet - 1}) {
+          font-weight: bold;
+        }
+      }
     }
 
     .body {
-      background: $default-bg-2;
       max-height: calc(100% - #{$header-height});
       overflow: auto;
       flex-grow: 1;
 
-      .entity-frame:last-child {
-        border-radius: 0 0 1em 1em;
+      @include until(#{$tablet - 1}) {
+        background: $default-bg-4;
+      }
+
+      @include from($tablet) {
+        background: $default-bg-2;
+      }
+
+      .entity-frame {
+        background: $background-color;
+
+        @include until(#{$tablet - 1}) {
+          margin: 0.75em 0.25em;
+          border: $default-border-2;
+          border-radius: 1em;
+        }
+
+        @include from($tablet) {
+          &:last-child {
+            border-radius: 0 0 1em 1em;
+          }
+        }
       }
     }
   }
 
   :deep(.modal) {
-    @include until($tablet) {
-      width: 95%;
+    @include until(#{$tablet - 1}) {
+      width: calc(100% - 1em);
+
+      .table-row {
+        border-bottom: 1px solid $border-color-2;
+      }
+    }
+
+    .table-row {
+      .value {
+        overflow: auto;
+      }
     }
 
     .content {
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue
index e88ecd2c8..ed1b0839f 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue
@@ -363,6 +363,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "common";
+
 :deep(.modal) {
   .body {
     padding: 0;
@@ -467,5 +469,16 @@ export default {
       max-height: 5em;
     }
   }
+
+  @include until(#{$tablet - 1}) {
+    .entity-container-wrapper {
+      &.collapsed {
+        border-radius: 0;
+        box-shadow: none;
+        border-bottom: $default-border;
+      }
+    }
+  }
+
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/common.scss b/platypush/backend/http/webapp/src/components/panels/Entities/common.scss
index 16cc74377..62b0d3f3b 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/common.scss
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/common.scss
@@ -6,6 +6,64 @@ $collapse-toggler-width: 2em;
   background: $selected-bg;
   font-weight: bold;
   box-shadow: 0 0 3px 2px $default-shadow-color;
+
+  @include until(#{$tablet - 1}) {
+    border-radius: 1em;
+  }
+}
+
+.entity-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 !important;
+
+  @include until(#{$tablet - 1}) {
+    border-radius: 1em;
+
+    &:not(:last-child) {
+      border-bottom: $default-border-3;
+    }
+  }
+
+  @include from($tablet) {
+    border-bottom: $default-border-3;
+  }
+
+  &.with-children:not(.collapsed) {
+    @include expanded-entity();
+  }
+
+  &:hover {
+    background: $hover-bg;
+  }
+
+  .adjuster {
+    cursor: pointer;
+    width: 100%;
+
+    &.with-children {
+      width: calc(100% - $collapse-toggler-width - 0.5em);
+    }
+  }
+}
+
+@include until(#{$tablet - 1}) {
+  .entity-container {
+    .children {
+      border-radius: 0 0 1em 1em;
+    }
+  }
+
+  .child {
+    &:not(:last-child) {
+      .entity-container {
+        border-bottom: $default-border-3;
+        border-radius: 0;
+      }
+    }
+  }
 }
 
 .entity {
@@ -176,3 +234,61 @@ $collapse-toggler-width: 2em;
     }
   }
 }
+
+.entity-container-wrapper {
+  &.with-children:not(.collapsed) {
+    box-shadow: 0 3px 4px 0 $default-shadow-color;
+
+    @include until(#{$tablet - 1}) {
+      border-radius: 1em;
+    }
+
+    @include from($tablet) {
+      .children .child:last-child {
+        box-shadow: 0 3px 4px 0 $default-shadow-color;
+      }
+    }
+  }
+
+  @include until(#{$tablet - 1}) {
+    box-shadow: 0 3px 4px 0 $default-shadow-color;
+
+    &.collapsed {
+      border-radius: 1em;
+    }
+
+    .children {
+      .entity-container-wrapper {
+        border-radius: 0;
+        box-shadow: none;
+
+        &.with-children:not(.collapsed) {
+          border-radius: 1em;
+          box-shadow: 0 3px 4px 0 $default-shadow-color;
+        }
+
+        &:last-child {
+          border-radius: 0 0 1em 1em;
+        }
+      }
+    }
+  }
+}
+
+.blink {
+  animation: blink-animation 1s steps(20, start);
+}
+
+@keyframes blink-animation {
+  0% {
+    background: initial
+  }
+
+  50% {
+    background: $active-bg;
+  }
+
+  100% {
+    background: initial
+  }
+}