From 4383dbb2b4fedfa37ced43dfd6ca0315c0492f31 Mon Sep 17 00:00:00 2001 From: Fabio Manganiello <fabio@manganiello.tech> Date: Fri, 5 May 2023 01:04:39 +0200 Subject: [PATCH] Bluetooth UI toggle aligned to the right - like all other toggles. --- .../panels/Entities/BluetoothDevice.vue | 23 ++++++++----------- .../components/panels/Entities/common.scss | 1 + 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/BluetoothDevice.vue b/platypush/backend/http/webapp/src/components/panels/Entities/BluetoothDevice.vue index 89d746fb7..4db3687d7 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/BluetoothDevice.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/BluetoothDevice.vue @@ -1,24 +1,24 @@ <template> <div class="entity device-container"> <div class="head"> - <div class="col-1 icon"> + <div class="icon"> <EntityIcon :entity="value" :loading="loading" :error="error" /> </div> - <div class="col-2 connector"> + <div class="label"> + <div class="name" v-text="value.name" /> + </div> + + <div class="value-container" :class="{'with-children': value?.children_ids?.length}"> <ToggleSwitch :value="value.connected" :disabled="loading" @input="connect" @click.stop /> </div> - - <div class="col-9 label"> - <div class="name" v-text="value.name" /> - </div> </div> </div> </template> @@ -61,13 +61,10 @@ export default { display: flex; justify-content: center; - .icon { - margin-right: 1em; - } - - .connector { - width: 4em; - margin: 0.25em 0 -0.25em 0.5em; + .value-container { + &:not(.with-children) { + margin-right: 2.5em; + } } } </style> 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 7f6208eac..16cc74377 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/common.scss +++ b/platypush/backend/http/webapp/src/components/panels/Entities/common.scss @@ -12,6 +12,7 @@ $collapse-toggler-width: 2em; width: 100%; display: flex; flex-direction: column; + justify-content: center; &.expanded { @include expanded-entity();