revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

Entity components style improvements.

Browse source 
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`.
This commit is contained in:
Fabio Manganiello 2023-04-30 22:32:50 +02:00
parent d1066ba624
commit 7906ee2c49
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
15 changed files with 171 additions and 246 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,22 +1,16 @@
<template> <template>
<div class="entity battery-container"> <div class="entity battery-container">
<div class="head"> <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>
<div class="col-s-8 col-m-9 label"> <div class="label">
<div class="name" v-text="value.name" /> <div class="name" v-text="value.name" />
</div> </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> </div>
</div> </div>
@ -105,14 +99,4 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "common"; @import "common";
.battery-container {
.head {
.value-percent {
font-size: 1.1em;
font-weight: bold;
opacity: 0.7;
}
}
}
</style> </style>

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

@ -1,18 +1,15 @@
<template> <template>
<div class="entity sensor-container"> <div class="entity sensor-container">
<div class="head"> <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>
<div class="col-s-8 col-m-9 label"> <div class="label">
<div class="name" v-text="value.name" /> <div class="name" v-text="value.name" />
</div> </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" /> <ToggleSwitch :value="value.value" :disabled="true" />
</div> </div>
</div> </div>
@ -33,18 +30,4 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "common"; @import "common";
.sensor-container {
.head {
.value {
font-size: 1.1em;
font-weight: bold;
opacity: 0.7;
}
.unit {
margin-left: 0.2em;
}
}
}
</style> </style>

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

@ -2,17 +2,16 @@
<div class="entity cpu-container"> <div class="entity cpu-container">
<div class="head"> <div class="head">
<div class="col-1 icon"> <div class="col-1 icon">
<EntityIcon <EntityIcon :entity="value" :loading="loading" :error="error" />
:entity="value"
:loading="loading"
:error="error" />
</div> </div>
<div class="col-9 label"> <div class="label">
<div class="name" v-text="value.name" /> <div class="name" v-text="value.name" />
</div> </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>
</div> </div>
</template> </template>
@ -30,13 +29,4 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "common"; @import "common";
.cpu-container {
.head {
.value {
text-align: right;
font-weight: bold;
}
}
}
</style> </style>

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

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

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

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

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

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

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

@ -1,21 +1,16 @@
<template> <template>
<div class="entity sensor-container"> <div class="entity sensor-container">
<div class="head"> <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>
<div class="col-s-8 col-m-9 label"> <div class="label">
<div class="name" v-text="value.name" /> <div class="name" v-text="value.name" />
</div> </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)" /> <span class="value" v-text="displayValue(value.value)" />
</div> </div>
</div> </div>
@ -43,18 +38,4 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "common"; @import "common";
.sensor-container {
.head {
.value {
font-size: 1.1em;
font-weight: bold;
opacity: 0.7;
}
.unit {
margin-left: 0.2em;
}
}
}
</style> </style>

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

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

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

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

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

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

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

@ -1,28 +1,26 @@
<template> <template>
<div class="entity memory-stats-container" :class="{expanded: !isCollapsed}"> <div class="entity memory-stats-container" :class="{expanded: !isCollapsed}">
<div class="head" @click.stop="isCollapsed = !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>
<div class="col-8 label"> <div class="label">
<div class="name" v-text="value.name" /> <div class="name" v-text="value.name" />
</div> </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" <i class="fas"
:class="{'fa-chevron-down': isCollapsed, 'fa-chevron-up': !isCollapsed}" /> :class="{'fa-chevron-down': isCollapsed, 'fa-chevron-up': !isCollapsed}" />
</div> </div>
</div> </div>
</div>
<div class="body children attributes fade-in" v-if="!isCollapsed"> <div class="body children attributes fade-in" v-if="!isCollapsed">
<div class="child" v-if="value.total != null"> <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 class="name">Total</div>
</div> </div>
<div class="value"> <div class="value">
@ -31,7 +29,7 @@
</div> </div>
<div class="child" v-if="value.available != null"> <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 class="name">Available</div>
</div> </div>
<div class="value"> <div class="value">
@ -40,7 +38,7 @@
</div> </div>
<div class="child" v-if="value.used != null"> <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 class="name">Used</div>
</div> </div>
<div class="value"> <div class="value">
@ -49,7 +47,7 @@
</div> </div>
<div class="child" v-if="value.free != null"> <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 class="name">Free</div>
</div> </div>
<div class="value"> <div class="value">
@ -58,7 +56,7 @@
</div> </div>
<div class="child" v-if="value.active != null"> <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 class="name">Active</div>
</div> </div>
<div class="value"> <div class="value">
@ -67,7 +65,7 @@
</div> </div>
<div class="child" v-if="value.inactive != null"> <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 class="name">Inactive</div>
</div> </div>
<div class="value"> <div class="value">
@ -76,7 +74,7 @@
</div> </div>
<div class="child" v-if="value.buffers != null"> <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 class="name">Buffers</div>
</div> </div>
<div class="value"> <div class="value">
@ -85,7 +83,7 @@
</div> </div>
<div class="child" v-if="value.cached != null"> <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 class="name">Cached</div>
</div> </div>
<div class="value"> <div class="value">
@ -94,7 +92,7 @@
</div> </div>
<div class="child" v-if="value.shared != null"> <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 class="name">Shared</div>
</div> </div>
<div class="value"> <div class="value">

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

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

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

@ -1,18 +1,15 @@
<template> <template>
<div class="entity sensor-container"> <div class="entity sensor-container">
<div class="head"> <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>
<div class="col-s-8 col-m-9 label"> <div class="label">
<div class="name" v-text="value.name" /> <div class="name" v-text="value.name" />
</div> </div>
<div class="col-s-3 col-m-2 pull-right" <div class="value-container"
v-if="computedValue != null"> v-if="computedValue != null">
<span class="value" v-text="computedValue" /> <span class="value" v-text="computedValue" />
<span class="unit" v-text="value.unit" <span class="unit" v-text="value.unit"
@ -43,24 +40,4 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "common"; @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> </style>

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

@ -1,19 +1,19 @@
<template> <template>
<div class="entity variable-container" v-if="value.value != null"> <div class="entity variable-container" v-if="value.value != null">
<div class="head" :class="{collapsed: collapsed}"> <div class="head" :class="{collapsed: collapsed}">
<div class="col-1 icon"> <div class="icon">
<EntityIcon :entity="value" :loading="loading" :error="error" /> <EntityIcon :entity="value" :loading="loading" :error="error" />
</div> </div>
<div class="col-s-6 col-m-7 label"> <div class="label">
<div class="name" v-text="value.name" /> <div class="name" v-text="value.name" />
</div> </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" /> <span class="value" v-text="value.value" v-if="value?.value != null" />
</div> </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}" /> <i class="fas" :class="{'fa-chevron-down': collapsed, 'fa-chevron-up': !collapsed}" />
</div> </div>
</div> </div>
@ -91,11 +91,30 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "common"; @import "common";
.head .value-container { $icon-width: 2em;
text-align: right;
}
form { .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%; width: 100%;
.row { .row {
@ -104,5 +123,6 @@ form {
width: 100%; width: 100%;
} }
} }
}
} }
</style> </style>

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

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