Extracted and refactored more common elements of the Entity components.

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

@@ -38,9 +38,5 @@ export default {
       font-weight: bold;
     }
   }
-
-  .icon {
-    margin-right: 1em;
-  }
 }
 </style>

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

@@ -166,55 +166,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.entity {
-  .head {
-    padding: 0.25em;
-
-    .icon {
-      margin-right: 1em;
-    }
-  }
-}
-
-.collapse-toggler {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-height: 3em;
-  cursor: pointer;
-
-  &:hover {
-    color: $default-hover-fg;
-  }
-}
-
-.attributes .child {
-  margin: 0 -0.5em;
-  padding: 0.5em 1em;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $border-color-1;
-  }
-
-  &:hover {
-    cursor: initial;
-  }
-
-  .label {
-    font-weight: bold;
-    @include from($tablet) {
-      @extend .col-m-6;
-    }
-  }
-
-  .value {
-    font-size: 0.95em;
-    text-align: right;
-
-    @include from($tablet) {
-      @extend .col-m-6;
-    }
-  }
-}
 </style>

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

@@ -28,10 +28,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.entity {
-  .icon {
-    margin-right: 1em;
-  }
-}
 </style>

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

@@ -28,10 +28,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.device-container {
-  .icon {
-    margin-right: 1em;
-  }
-}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="entity disk-container">
+  <div class="entity disk-container" :class="{expanded: !isCollapsed}">
     <div class="head" @click.stop="isCollapsed = !isCollapsed">
       <div class="col-1 icon">
         <EntityIcon
@@ -169,57 +169,6 @@ export default {
       text-align: right;
       font-weight: bold;
     }
-
-    .icon {
-      margin-right: 1em;
-    }
-  }
-}
-
-.collapse-toggler {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-height: 3em;
-  cursor: pointer;
-
-  @include from($tablet) {
-    @include until($desktop) {
-      margin-left: 3.25em;
-    }
-  }
-
-  &:hover {
-    color: $default-hover-fg;
-  }
-}
-
-.attributes .child {
-  margin: 0 -0.5em;
-  padding: 0.5em 1em;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $border-color-1;
-  }
-
-  &:hover {
-    cursor: initial;
-  }
-
-  .label {
-    font-weight: bold;
-    @include from($tablet) {
-      @extend .col-m-6;
-    }
-  }
-
-  .value {
-    font-size: 0.95em;
-    text-align: right;
-
-    @include from($tablet) {
-      @extend .col-m-6;
-    }
   }
 }
 </style>

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

@@ -186,6 +186,12 @@ export default {
   }
 }
 
+@mixin expanded-entity {
+  background: $selected-bg;
+  font-weight: bold;
+  box-shadow: 0 0 3px 2px $default-shadow-color;
+}
+
 .entity-container {
   width: 100%;
   display: flex;
@@ -195,35 +201,23 @@ export default {
   border-bottom: $default-border-3;
 
   &.with-children:not(.collapsed) {
-    background: $selected-bg;
+    @include expanded-entity();
-    font-weight: bold;
-    box-shadow: 0 0 3px 2px $default-shadow-color;
   }
 
   &:hover {
     background: $hover-bg;
   }
 
-  .collapse-toggler {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-    min-height: 3em;
-    margin-left: 0;
-    cursor: pointer;
-
-    &:hover {
-      color: $default-hover-fg;
-    }
-  }
-
   .adjuster {
     cursor: pointer;
   }
 }
 
 :deep(.entity-container) {
+  .entity.expanded {
+    @include expanded-entity();
+  }
+
   .head {
     .name {
       display: inline-flex;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="entity memory-stats-container">
+  <div class="entity memory-stats-container" :class="{expanded: !isCollapsed}">
     <div class="head" @click.stop="isCollapsed = !isCollapsed">
       <div class="col-1 icon">
         <EntityIcon
@@ -127,63 +127,10 @@ export default {
 
 .entity {
   .head {
-    padding: 0.25em;
-
-    .icon {
-      margin-right: 1em;
-    }
-
     .value {
       text-align: right;
       font-weight: bold;
     }
   }
 }
-
-.collapse-toggler {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-height: 3em;
-  cursor: pointer;
-
-  @include from($tablet) {
-    @include until($desktop) {
-      margin-left: 3.25em;
-    }
-  }
-
-  &:hover {
-    color: $default-hover-fg;
-  }
-}
-
-.attributes .child {
-  margin: 0 -0.5em;
-  padding: 0.5em 1em;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $border-color-1;
-  }
-
-  &:hover {
-    cursor: initial;
-  }
-
-  .label {
-    font-weight: bold;
-    @include from($tablet) {
-      @extend .col-m-6;
-    }
-  }
-
-  .value {
-    font-size: 0.95em;
-    text-align: right;
-
-    @include from($tablet) {
-      @extend .col-m-6;
-    }
-  }
-}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="entity network-interface-container">
+  <div class="entity network-interface-container" :class="{expanded: !isCollapsed}">
     <div class="head" @click.stop="isCollapsed = !isCollapsed">
       <div class="col-1 icon">
         <EntityIcon
@@ -12,7 +12,7 @@
         <div class="name" v-text="value.name" />
       </div>
 
-      <div class="col-1 collapse-toggler" @click.stop="isCollapsed = !isCollapsed">
+      <div class="col-1 collapse-toggler">
         <i class="fas"
           :class="{'fa-chevron-down': isCollapsed, 'fa-chevron-up': !isCollapsed}" />
       </div>
@@ -91,7 +91,8 @@
         </div>
       </div>
 
-    <div class="child head" @click.stop="areAddressesCollapsed = !areAddressesCollapsed">
+    <div class="child head" :class="{expanded: !areAddressesCollapsed}"
+      @click.stop="areAddressesCollapsed = !areAddressesCollapsed">
       <div class="col-11 label">Addresses</div>
       <div class="col-1 collapse-toggler pull-right">
         <i class="fas"
@@ -105,7 +106,7 @@
           v-for="address in (value.addresses || [])"
           :key="address.address"
         >
-          <div class="child head"
+          <div class="child head" :class="{expanded: displayedAddresses[address.address]}"
             @click.stop="displayedAddresses[address.address] = !displayedAddresses[address.address]"
           >
             <div class="col-11 label" v-text="address.address" />
@@ -160,61 +161,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
-
-.entity {
-  .head {
-    padding: 0.25em;
-
-    .icon {
-      margin-right: 1em;
-    }
-  }
-}
-
-.collapse-toggler {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-height: 3em;
-  cursor: pointer;
-
-  @include from($tablet) {
-    @include until($desktop) {
-      margin-left: 3.25em;
-    }
-  }
-
-  &:hover {
-    color: $default-hover-fg;
-  }
-}
-
-.attributes .child {
-  margin: 0 -0.5em;
-  padding: 0.5em 1em;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $border-color-1;
-  }
-
-  &:hover {
-    cursor: initial;
-  }
-
-  .label {
-    font-weight: bold;
-    @include from($tablet) {
-      @extend .col-m-6;
-    }
-  }
-
-  .value {
-    font-size: 0.95em;
-    text-align: right;
-
-    @include from($tablet) {
-      @extend .col-m-6;
-    }
-  }
-}
 </style>

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

@@ -10,6 +10,12 @@
     display: flex;
     align-items: center;
     padding: 0.75em 0.25em;
+    min-height: 3.5em;
+    position: relative;
+
+    .icon {
+      margin-right: 1em;
+    }
 
     .label {
       margin-top: 0.25em;
@@ -38,6 +44,7 @@
     background: linear-gradient(0deg, $default-bg-5, $default-bg-2);
     border-top: 1px solid $border-color-1;
     box-shadow: $border-shadow-bottom;
+    font-weight: normal;
   }
 
   button {
@@ -51,3 +58,54 @@
     }
   }
 }
+
+.collapse-toggler {
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+  min-height: 2em;
+  margin-right: 1.25em;
+  cursor: pointer;
+
+  &:hover {
+    color: $default-hover-fg;
+  }
+}
+
+.attributes .child {
+  padding: 0.5em 1em;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $border-color-1;
+  }
+
+  &:hover {
+    cursor: initial;
+  }
+
+  &.head {
+    cursor: pointer;
+    &:hover {
+      background: $hover-bg;
+    }
+  }
+
+  .label {
+    font-weight: bold;
+    @include from($tablet) {
+      @extend .col-m-6;
+    }
+  }
+
+  .value {
+    font-size: 0.95em;
+    text-align: right;
+
+    @include from($tablet) {
+      @extend .col-m-6;
+    }
+  }
+}