From a011de890ba65789dc83b5c6025ee36570863612 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 20 Mar 2023 01:26:48 +0100
Subject: [PATCH] Better .pull-right class implementation.

---
 .../webapp/src/components/elements/Slider.vue |  6 +++++
 .../src/components/panels/Entities/Device.vue |  2 +-
 .../src/components/panels/Entities/Dimmer.vue |  6 ++---
 .../src/components/panels/Entities/Sensor.vue |  2 +-
 .../components/panels/Entities/common.scss    |  4 +---
 .../backend/http/webapp/src/style/layout.scss | 23 +++++++++++--------
 6 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/elements/Slider.vue b/platypush/backend/http/webapp/src/components/elements/Slider.vue
index edd81a0d..a6573d07 100644
--- a/platypush/backend/http/webapp/src/components/elements/Slider.vue
+++ b/platypush/backend/http/webapp/src/components/elements/Slider.vue
@@ -121,13 +121,19 @@ $label-width: 3em;
 
   .range-labels {
     width: 100%;
+    display: flex;
 
     &.with-label {
       width: calc(100% - $label-width);
     }
 
+    .left {
+      text-align: left;
+    }
+
     .right {
       @extend .pull-right;
+      flex-grow: 1;
     }
   }
 
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 57d74bd9..b599e53d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue
@@ -8,7 +8,7 @@
           :error="error" />
       </div>
 
-      <div class="col-12 label">
+      <div class="col-11 label">
         <div class="name" v-text="value.name" />
       </div>
     </div>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue
index b8032801..9f9f5ffc 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue
@@ -13,13 +13,13 @@
       </div>
 
       <div class="col-s-4 col-m-3 buttons pull-right">
+        <span class="value-percent"
+          v-text="parsedValue"
+          v-if="parsedValue != null" />
         <button @click.stop="collapsed = !collapsed">
           <i class="fas"
             :class="{'fa-angle-up': !collapsed, 'fa-angle-down': collapsed}" />
         </button>
-        <span class="value-percent"
-          v-text="parsedValue"
-          v-if="parsedValue != null" />
       </div>
     </div>
 
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue
index 3e17c953..c4861af6 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue
@@ -14,9 +14,9 @@
 
       <div class="col-s-3 col-m-2 pull-right"
           v-if="value.value != null">
+        <span class="value" v-text="value.value" />
         <span class="unit" v-text="value.unit"
           v-if="value.unit != null" />
-        <span class="value" v-text="value.value" />
       </div>
     </div>
   </div>
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 289b1ec8..f89de230 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/common.scss
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/common.scss
@@ -21,12 +21,10 @@
     }
 
     .pull-right {
-      display: inline-flex;
-      align-items: center;
-      direction: rtl;
       padding-right: 0.5em;
 
       :deep(.power-switch) {
+        @include pull-right;
         margin-top: 0.25em;
       }
     }
diff --git a/platypush/backend/http/webapp/src/style/layout.scss b/platypush/backend/http/webapp/src/style/layout.scss
index f6c32684..256e5108 100644
--- a/platypush/backend/http/webapp/src/style/layout.scss
+++ b/platypush/backend/http/webapp/src/style/layout.scss
@@ -150,21 +150,26 @@ $widths: (
 }
 
 .vertical-center {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .horizontal-center {
-    display: flex;
-    justify-content: center;
-    margin-left: auto;
-    margin-right: auto;
+  display: flex;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@mixin pull-right {
+  display: inline-flex;
+  text-align: right;
+  justify-content: right;
+  flex-grow: 1;
 }
 
 .pull-right {
-  text-align: right;
-  float: right;
-  justify-content: right;
+  @include pull-right;
 }
 
 .hidden {