Entity components style improvements.

Multiple style improvements for the entity components. Among these:

- A more consistent style for entity values and toggler buttons.
- Fixed overflowing/underflowing entities on smaller/larger screen
  sizes.
- Simplified the stylesheets for many entities as many component classes
  have now been moved to `common.scss`.

platypush/backend/http/webapp/src/components/panels/Entities/Battery.vue

@@ -1,22 +1,16 @@
 <template>
   <div class="entity battery-container">
     <div class="head">
-      <div class="col-1 icon">
+      <div class="icon">
-        <EntityIcon
+        <EntityIcon :entity="value" :icon="icon" :loading="loading" :error="error" />
-          :entity="value"
-          :icon="icon"
-          :loading="loading"
-          :error="error" />
       </div>
 
-      <div class="col-s-8 col-m-9 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-s-3 col-m-2 buttons pull-right">
+      <div class="value-container">
-        <span class="value-percent"
+        <span class="value" v-text="valuePercent + '%'" v-if="valuePercent != null" />
-          v-text="valuePercent + '%'"
-          v-if="valuePercent != null" />
       </div>
     </div>
   </div>
@@ -105,14 +99,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.battery-container {
-  .head {
-    .value-percent {
-      font-size: 1.1em;
-      font-weight: bold;
-      opacity: 0.7;
-    }
-  }
-}
 </style>

platypush/backend/http/webapp/src/components/panels/Entities/BinarySensor.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="entity sensor-container">
     <div class="head">
-      <div class="col-1 icon">
+      <div class="icon">
-        <EntityIcon
+        <EntityIcon :entity="value" :loading="loading" :error="error" />
-          :entity="value"
-          :loading="loading"
-          :error="error" />
       </div>
 
-      <div class="col-s-8 col-m-9 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-s-3 col-m-2 pull-right" v-if="value.value != null">
+      <div class="value-container" v-if="value.value != null">
         <ToggleSwitch :value="value.value" :disabled="true" />
       </div>
     </div>
@@ -33,18 +30,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.sensor-container {
-  .head {
-    .value {
-      font-size: 1.1em;
-      font-weight: bold;
-      opacity: 0.7;
-    }
-
-    .unit {
-      margin-left: 0.2em;
-    }
-  }
-}
 </style>

platypush/backend/http/webapp/src/components/panels/Entities/Cpu.vue

@@ -2,17 +2,16 @@
   <div class="entity cpu-container">
     <div class="head">
       <div class="col-1 icon">
-        <EntityIcon
+        <EntityIcon :entity="value" :loading="loading" :error="error" />
-          :entity="value"
-          :loading="loading"
-          :error="error" />
       </div>
 
-      <div class="col-9 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-2 value" v-text="Math.round(value.percent * 100, 1) + '%'" />
+      <div class="value-container">
+        <div class="value" v-text="Math.round(value.percent * 100, 1) + '%'" />
+      </div>
     </div>
   </div>
 </template>
@@ -30,13 +29,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.cpu-container {
-  .head {
-    .value {
-      text-align: right;
-      font-weight: bold;
-    }
-  }
-}
 </style>

platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue

@@ -1,19 +1,16 @@
 <template>
   <div class="entity dimmer-container">
     <div class="head" :class="{collapsed: collapsed}">
-      <div class="col-1 icon">
+      <div class="icon">
-        <EntityIcon
+        <EntityIcon :entity="value" :loading="loading" :error="error" />
-          :entity="value"
-          :loading="loading"
-          :error="error" />
       </div>
 
-      <div class="col-s-7 col-m-8 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-s-4 col-m-3 buttons pull-right">
+      <div class="value-container pull-right">
-        <span class="value-percent"
+        <span class="value"
           v-text="parsedValue"
           v-if="parsedValue != null" />
         <button @click.stop="collapsed = !collapsed">
@@ -96,18 +93,11 @@ export default {
 
 .dimmer-container {
   .head {
-    .buttons {
+    .value-container {
       button {
         margin-right: 0.5em;
       }
     }
-
-    .value-percent {
-      font-size: 1.1em;
-      font-weight: bold;
-      direction: ltr;
-      opacity: 0.7;
-    }
   }
 
   .body {

platypush/backend/http/webapp/src/components/panels/Entities/Disk.vue

@@ -1,28 +1,26 @@
 <template>
   <div class="entity disk-container" :class="{expanded: !isCollapsed}">
     <div class="head" @click.stop="isCollapsed = !isCollapsed">
-      <div class="col-1 icon">
+      <div class="icon">
-        <EntityIcon
+        <EntityIcon :entity="value" :loading="loading" :error="error" />
-          :entity="value"
-          :loading="loading"
-          :error="error" />
       </div>
 
-      <div class="col-8 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-2 value" v-text="Math.round(value.percent * 100, 1) + '%'" />
+      <div class="value-and-toggler">
-
+        <div class="value" v-text="Math.round(value.percent * 100, 1) + '%'" />
-      <div class="col-1 collapse-toggler" @click.stop="isCollapsed = !isCollapsed">
+        <div class="collapse-toggler" @click.stop="isCollapsed = !isCollapsed">
           <i class="fas"
             :class="{'fa-chevron-down': isCollapsed, 'fa-chevron-up': !isCollapsed}" />
         </div>
       </div>
+    </div>
 
     <div class="body children attributes fade-in" v-if="!isCollapsed">
       <div class="child" v-if="value.mountpoint?.length">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Mountpoint</div>
         </div>
         <div class="value">
@@ -31,7 +29,7 @@
       </div>
 
       <div class="child" v-if="value.fstype?.length">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Filesystem</div>
         </div>
         <div class="value">
@@ -40,7 +38,7 @@
       </div>
 
       <div class="child" v-if="value.opts?.length">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Mount options</div>
         </div>
         <div class="value">
@@ -49,7 +47,7 @@
       </div>
 
       <div class="child" v-if="value.total != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Total space</div>
         </div>
         <div class="value">
@@ -58,7 +56,7 @@
       </div>
 
       <div class="child" v-if="value.used != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Used space</div>
         </div>
         <div class="value">
@@ -67,7 +65,7 @@
       </div>
 
       <div class="child" v-if="value.free != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Available space</div>
         </div>
         <div class="value">
@@ -76,7 +74,7 @@
       </div>
 
       <div class="child" v-if="value.read_count != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Number of reads</div>
         </div>
         <div class="value">
@@ -85,7 +83,7 @@
       </div>
 
       <div class="child" v-if="value.write_count != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Number of writes</div>
         </div>
         <div class="value">
@@ -94,7 +92,7 @@
       </div>
 
       <div class="child" v-if="value.read_bytes != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Bytes read</div>
         </div>
         <div class="value">
@@ -103,7 +101,7 @@
       </div>
 
       <div class="child" v-if="value.write_bytes != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Bytes written</div>
         </div>
         <div class="value">
@@ -112,7 +110,7 @@
       </div>
 
       <div class="child" v-if="value.read_time != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Read time</div>
         </div>
         <div class="value">
@@ -121,7 +119,7 @@
       </div>
 
       <div class="child" v-if="value.write_time != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Write time</div>
         </div>
         <div class="value">
@@ -130,7 +128,7 @@
       </div>
 
       <div class="child" v-if="value.busy_time != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Busy time</div>
         </div>
         <div class="value">
@@ -160,15 +158,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.entity {
-  .head {
-    padding: 0.25em;
-
-    .value {
-      text-align: right;
-      font-weight: bold;
-    }
-  }
-}
 </style>

platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue

@@ -3,7 +3,7 @@
       :class="{'with-children': hasChildren, collapsed: isCollapsed, hidden: !value?.name?.length}">
     <div class="row item entity-container"
         :class="{ 'with-children': hasChildren, collapsed: isCollapsed, blink: justUpdated }">
-      <div class="adjuster" :class="{'col-12': !hasChildren, 'col-11': hasChildren}">
+      <div class="adjuster" :class="{'with-children': hasChildren}">
         <component
           :is="component"
           :value="value"
@@ -210,6 +210,11 @@ export default {
 
   .adjuster {
     cursor: pointer;
+    width: 100%;
+
+    &.with-children {
+      width: calc(100% - $collapse-toggler-width - 0.5em);
+    }
   }
 }
 

platypush/backend/http/webapp/src/components/panels/Entities/EnumSensor.vue

@@ -1,21 +1,16 @@
 <template>
   <div class="entity sensor-container">
     <div class="head">
-      <div class="col-1 icon">
+      <div class="icon">
-        <EntityIcon
+        <EntityIcon :entity="value" :loading="loading" :error="error" />
-          :entity="value"
-          :loading="loading"
-          :error="error" />
       </div>
 
-      <div class="col-s-8 col-m-9 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-s-3 col-m-2 pull-right"
+      <div class="value-container" v-if="value.value != null">
-          v-if="value.value != null">
+        <span class="unit" v-text="value.unit" v-if="value.unit != null" />
-        <span class="unit" v-text="value.unit"
-          v-if="value.unit != null" />
         <span class="value" v-text="displayValue(value.value)" />
       </div>
     </div>
@@ -43,18 +38,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.sensor-container {
-  .head {
-    .value {
-      font-size: 1.1em;
-      font-weight: bold;
-      opacity: 0.7;
-    }
-
-    .unit {
-      margin-left: 0.2em;
-    }
-  }
-}
 </style>

platypush/backend/http/webapp/src/components/panels/Entities/EnumSwitch.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="entity switch-container">
     <div class="head" :class="{collapsed: collapsed}">
-      <div class="col-1 icon">
+      <div class="icon">
-        <EntityIcon
+        <EntityIcon :entity="value" :loading="loading" :error="error" />
-          :entity="value"
-          :loading="loading"
-          :error="error" />
       </div>
 
-      <div class="col-s-8 col-m-9 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-s-3 col-m-2 buttons pull-right">
+      <div class="value-container">
         <span class="value"
           v-text="value.values[value.value] || value.value"
           v-if="value?.value != null" />
@@ -104,17 +101,11 @@ export default {
 
 .switch-container {
   .head {
-    .buttons {
+    .value-container {
       button {
         margin-right: 0.5em;
       }
     }
-
-    .value {
-      font-size: 1.1em;
-      font-weight: bold;
-      opacity: 0.7;
-    }
   }
 
   .body {

platypush/backend/http/webapp/src/components/panels/Entities/Light.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="entity light-container">
     <div class="head" :class="{collapsed: collapsed}">
-      <div class="col-1 icon">
+      <div class="icon">
         <EntityIcon
           :entity="value"
           :icon="icon"
@@ -10,11 +10,11 @@
           :error="error" />
       </div>
 
-      <div class="col-s-8 col-m-9 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-s-3 col-m-2 buttons pull-right">
+      <div class="value-container">
         <ToggleSwitch :value="value.on" @input="toggle"
           @click.stop :disabled="loading || value.is_read_only" />
 
@@ -208,7 +208,7 @@ export default {
 
 .light-container {
   .head {
-    .buttons {
+    .value-container {
       button {
         margin-right: 0.5em;
       }

platypush/backend/http/webapp/src/components/panels/Entities/LinkQuality.vue

@@ -1,19 +1,16 @@
 <template>
   <div class="entity link-quality-container">
     <div class="head">
-      <div class="col-1 icon">
+      <div class="icon">
-        <EntityIcon
+        <EntityIcon :entity="value" :loading="loading" :error="error" />
-          :entity="value"
-          :loading="loading"
-          :error="error" />
       </div>
 
-      <div class="col-s-8 col-m-9 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-s-3 col-m-2 buttons pull-right">
+      <div class="value-container">
-        <span class="value-percent"
+        <span class="value"
           v-text="valuePercent + '%'"
           v-if="valuePercent != null" />
       </div>
@@ -45,14 +42,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.link-quality-container {
-  .head {
-    .value-percent {
-      font-size: 1.1em;
-      font-weight: bold;
-      opacity: 0.7;
-    }
-  }
-}
 </style>

platypush/backend/http/webapp/src/components/panels/Entities/MemoryStats.vue

@@ -1,28 +1,26 @@
 <template>
   <div class="entity memory-stats-container" :class="{expanded: !isCollapsed}">
     <div class="head" @click.stop="isCollapsed = !isCollapsed">
-      <div class="col-1 icon">
+      <div class="icon">
-        <EntityIcon
+        <EntityIcon :entity="value" :loading="loading" :error="error" />
-          :entity="value"
-          :loading="loading"
-          :error="error" />
       </div>
 
-      <div class="col-8 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-2 value" v-text="Math.round(value.percent * 100, 1) + '%'" />
+      <div class="value-and-toggler">
-
+        <div class="value" v-text="Math.round(value.percent * 100, 1) + '%'" />
-      <div class="col-1 collapse-toggler" @click.stop="isCollapsed = !isCollapsed">
+        <div class="collapse-toggler" @click.stop="isCollapsed = !isCollapsed">
           <i class="fas"
             :class="{'fa-chevron-down': isCollapsed, 'fa-chevron-up': !isCollapsed}" />
         </div>
       </div>
+    </div>
 
     <div class="body children attributes fade-in" v-if="!isCollapsed">
       <div class="child" v-if="value.total != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Total</div>
         </div>
         <div class="value">
@@ -31,7 +29,7 @@
       </div>
 
       <div class="child" v-if="value.available != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Available</div>
         </div>
         <div class="value">
@@ -40,7 +38,7 @@
       </div>
 
       <div class="child" v-if="value.used != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Used</div>
         </div>
         <div class="value">
@@ -49,7 +47,7 @@
       </div>
 
       <div class="child" v-if="value.free != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Free</div>
         </div>
         <div class="value">
@@ -58,7 +56,7 @@
       </div>
 
       <div class="child" v-if="value.active != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Active</div>
         </div>
         <div class="value">
@@ -67,7 +65,7 @@
       </div>
 
       <div class="child" v-if="value.inactive != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Inactive</div>
         </div>
         <div class="value">
@@ -76,7 +74,7 @@
       </div>
 
       <div class="child" v-if="value.buffers != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Buffers</div>
         </div>
         <div class="value">
@@ -85,7 +83,7 @@
       </div>
 
       <div class="child" v-if="value.cached != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Cached</div>
         </div>
         <div class="value">
@@ -94,7 +92,7 @@
       </div>
 
       <div class="child" v-if="value.shared != null">
-        <div class="col-s-12 col-m-6 label">
+        <div class="label">
           <div class="name">Shared</div>
         </div>
         <div class="value">

platypush/backend/http/webapp/src/components/panels/Entities/PercentSensor.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="entity sensor-container">
     <div class="head">
-      <div class="col-1 icon">
+      <div class="icon">
-        <EntityIcon
+        <EntityIcon :entity="value" :loading="loading" :error="error" />
-          :entity="value"
-          :loading="loading"
-          :error="error" />
       </div>
 
-      <div class="col-s-8 col-m-9 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-s-3 col-m-2 pull-right" v-text="displayValue" />
+      <div class="value-container" v-text="displayValue" />
     </div>
   </div>
 </template>
@@ -43,10 +40,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.entity {
-  .icon {
-    margin-right: 1em;
-  }
-}
 </style>

platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="entity sensor-container">
     <div class="head">
-      <div class="col-1 icon">
+      <div class="icon">
-        <EntityIcon
+        <EntityIcon :entity="value" :loading="loading" :error="error" />
-          :entity="value"
-          :loading="loading"
-          :error="error" />
       </div>
 
-      <div class="col-s-8 col-m-9 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-s-3 col-m-2 pull-right"
+      <div class="value-container"
           v-if="computedValue != null">
         <span class="value" v-text="computedValue" />
         <span class="unit" v-text="value.unit"
@@ -43,24 +40,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.entity {
-  .icon {
-    margin-right: 1em;
-  }
-}
-
-.sensor-container {
-  .head {
-    .value {
-      font-size: 1.1em;
-      font-weight: bold;
-      opacity: 0.7;
-    }
-
-    .unit {
-      margin-left: 0.2em;
-    }
-  }
-}
 </style>

platypush/backend/http/webapp/src/components/panels/Entities/Variable.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="entity variable-container" v-if="value.value != null">
     <div class="head" :class="{collapsed: collapsed}">
-      <div class="col-1 icon">
+      <div class="icon">
         <EntityIcon :entity="value" :loading="loading" :error="error" />
       </div>
 
-      <div class="col-s-6 col-m-7 label">
+      <div class="label">
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-s-4 col-m-3 value-container" @click.stop="collapsed = !collapsed">
+      <div class="value-container" @click.stop="collapsed = !collapsed">
         <span class="value" v-text="value.value" v-if="value?.value != null" />
       </div>
 
-      <div class="col-1 collapse-toggler" @click.stop="collapsed = !collapsed">
+      <div class="collapse-toggler" @click.stop="collapsed = !collapsed">
         <i class="fas" :class="{'fa-chevron-down': collapsed, 'fa-chevron-up': !collapsed}" />
       </div>
     </div>
@@ -91,10 +91,29 @@ export default {
 <style lang="scss" scoped>
 @import "common";
 
-.head .value-container {
+$icon-width: 2em;
+
+.variable-container {
+  .head {
+    .icon, .collapse-toggler {
+      width: $icon-width;
+      margin-right: 0;
+    }
+
+    .label, .value-container {
+      max-width: calc(((100% - (2 * $icon-width)) / 2) - 0.75em);
+    }
+
+    .value-container {
+      margin-left: 0.5em;
       text-align: right;
     }
 
+    .collapse-toggler {
+      margin-right: 1em;
+    }
+  }
+
   form {
     width: 100%;
 
@@ -105,4 +124,5 @@ form {
       }
     }
   }
+}
 </style>

platypush/backend/http/webapp/src/components/panels/Entities/common.scss

@@ -1,5 +1,7 @@
 @import "vars";
 
+$collapse-toggler-width: 2em;
+
 .entity {
   width: 100%;
   display: flex;
@@ -14,10 +16,13 @@
     position: relative;
 
     .icon {
+      @extend .col-1;
       margin-right: 1em;
     }
 
     .label {
+      @extend .col-s-8;
+      @extend .col-m-9;
       margin-top: 0.25em;
     }
 
@@ -26,6 +31,35 @@
       font-weight: bold;
     }
 
+    .value-and-toggler {
+      @extend .col-3;
+      display: flex;
+      align-items: center;
+      justify-content: right;
+      min-width: 7em;
+
+      .value {
+        margin-right: 2.5em;
+      }
+    }
+
+    .value-container {
+      @extend .col-s-3;
+      @extend .col-m-2;
+      @extend .pull-right;
+      min-width: 7em;
+    }
+
+    .value {
+      font-size: 1.1em;
+      font-weight: bold;
+      opacity: 0.8;
+    }
+
+    .unit {
+      margin-left: 0.2em;
+    }
+
     .pull-right {
       padding-right: 0.5em;
 
@@ -66,7 +100,7 @@
   align-items: center;
   justify-content: flex-end;
   flex: 1;
-  min-height: 2em;
+  min-height: $collapse-toggler-width;
   margin-right: 1.25em;
   cursor: pointer;
 
@@ -76,8 +110,14 @@
 }
 
 .attributes .child {
+  display: flex;
+  align-items: center;
   padding: 0.5em 1em;
 
+  @include until($tablet - 1) {
+    flex-direction: column;
+  }
+
   &:not(:last-child) {
     border-bottom: 1px solid $border-color-1;
   }
@@ -95,17 +135,18 @@
 
   .label {
     font-weight: bold;
-    @include from($tablet) {
+    @extend .col-s-12;
     @extend .col-m-6;
   }
-  }
 
   .value {
     font-size: 0.95em;
-    text-align: right;
+    word-break: break-all;
+    @extend .col-s-12;
+    @extend .col-m-6;
 
     @include from($tablet) {
-      @extend .col-m-6;
+      text-align: right;
     }
   }
 }