From b35c761a43699a1e821a4346c8f4d37fe5295ae0 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <info@fabiomanganiello.com>
Date: Tue, 12 Apr 2022 22:24:19 +0200
Subject: [PATCH] Fixed entities panel mobile layout

---
 .../src/components/elements/ToggleSwitch.vue  |  2 +-
 .../src/components/panels/Entities/Index.vue  | 35 +++++++++++++------
 .../components/panels/Entities/Selector.vue   | 17 ++++++---
 .../src/components/panels/Entities/Switch.vue |  8 ++++-
 4 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/elements/ToggleSwitch.vue b/platypush/backend/http/webapp/src/components/elements/ToggleSwitch.vue
index a751861d4..43be6765f 100644
--- a/platypush/backend/http/webapp/src/components/elements/ToggleSwitch.vue
+++ b/platypush/backend/http/webapp/src/components/elements/ToggleSwitch.vue
@@ -59,7 +59,7 @@ export default {
     display: none;
     & + label {
       border-radius: 1em;
-      display: block;
+      display: inline-flex;
       cursor: pointer;
       position: relative;
       transition: box-shadow .4s;
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 dee82773a..4b82501ae 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
@@ -3,11 +3,11 @@
     <Loading v-if="loading" />
 
     <header>
-      <div class="col-11">
+      <div class="col-11 left">
         <Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
       </div>
 
-      <div class="col-1 pull-right">
+      <div class="col-1 right">
         <button title="Refresh" @click="refresh">
           <i class="fa fa-sync-alt" />
         </button>
@@ -230,8 +230,8 @@ export default {
       this.entities[entityId] = {
         ...event.entity,
         meta: {
-          ...(event.entity?.meta || {}),
           ...(this.entities[entityId]?.meta || {}),
+          ...(event.entity?.meta || {}),
         },
       }
     },
@@ -266,8 +266,6 @@ export default {
 
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
   overflow: auto;
   color: $default-fg-2;
   font-weight: 400;
@@ -287,17 +285,28 @@ export default {
     display: flex;
     background: $default-bg-2;
     box-shadow: $border-shadow-bottom;
+    position: relative;
+
+    .right {
+      position: absolute;
+      right: 0;
+      text-align: right;
+      margin-right: 0.5em;
+      padding-right: 0.5em;
+
+      button {
+        padding: 0.5em 0;
+      }
+    }
   }
 
   .groups-canvas {
     width: 100%;
     height: calc(100% - #{$selector-height});
-    display: flex;
-    flex-direction: column;
+    overflow: auto;
   }
 
   .groups-container {
-    overflow: auto;
     @include from($desktop) {
       column-count: var(--groups-per-row);
     }
@@ -310,10 +319,16 @@ export default {
     padding: $main-margin 0;
     display: flex;
     break-inside: avoid;
-    padding: $main-margin;
+
+    @include from ($tablet) {
+      padding: $main-margin;
+    }
 
     .frame {
-      max-height: calc(100% - #{2 * $main-margin});
+      @include from($desktop) {
+        max-height: calc(100vh - #{$header-height} - #{$main-margin});
+      }
+
       display: flex;
       flex-direction: column;
       flex-grow: 1;
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue
index 4a44dd906..5715924f3 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="entities-selectors-container">
     <div class="selector">
-      <Dropdown title="Group by" icon-class="fas fa-layer-group"
-          :text="prettifyGroupingName(value.grouping)" ref="groupingSelector">
+      <Dropdown title="Group by" icon-class="fas fa-eye" ref="groupingSelector">
         <DropdownItem v-for="g in visibleGroupings" :key="g" :text="prettifyGroupingName(g)"
           :item-class="{selected: value?.grouping === g}"
           @click="onGroupingChanged(g)" />
@@ -180,7 +179,7 @@ export default {
     display: inline-flex;
 
     &.active {
-      ::v-deep(.dropdown-container) {
+      :deep(.dropdown-container) {
         button {
           color: $default-hover-fg;
         }
@@ -188,7 +187,13 @@ export default {
     }
   }
 
-  ::v-deep(.dropdown-container) {
+  @media (max-width: 330px) {
+    .search-bar {
+      display: none;
+    }
+  }
+
+  :deep(.dropdown-container) {
     height: 100%;
     display: flex;
 
@@ -208,6 +213,10 @@ export default {
       border: 0;
       box-shadow: none;
 
+      .col-1.icon {
+        width: 1.5em;
+      }
+
       &.selected {
         font-weight: bold;
         background: #ffffff00;
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue
index e63d46b6b..3e0869533 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="switch">
+  <div class="switch-container">
     <div class="col-10 label">
       <div class="name" v-text="value.name" />
     </div>
@@ -52,4 +52,10 @@ export default {
 
 <style lang="scss" scoped>
 @import "vars";
+
+.switch-container {
+  .switch {
+    direction: rtl;
+  }
+}
 </style>