Bluetooth UI toggle aligned to the right - like all other toggles.

This commit is contained in:
Fabio Manganiello 2023-05-05 01:04:39 +02:00
parent 285f3941d9
commit 4383dbb2b4
Signed by: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 11 additions and 13 deletions

View file

@ -1,24 +1,24 @@
<template> <template>
<div class="entity device-container"> <div class="entity device-container">
<div class="head"> <div class="head">
<div class="col-1 icon"> <div class="icon">
<EntityIcon <EntityIcon
:entity="value" :entity="value"
:loading="loading" :loading="loading"
:error="error" /> :error="error" />
</div> </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 <ToggleSwitch
:value="value.connected" :value="value.connected"
:disabled="loading" :disabled="loading"
@input="connect" @input="connect"
@click.stop /> @click.stop />
</div> </div>
<div class="col-9 label">
<div class="name" v-text="value.name" />
</div>
</div> </div>
</div> </div>
</template> </template>
@ -61,13 +61,10 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
.icon { .value-container {
margin-right: 1em; &:not(.with-children) {
} margin-right: 2.5em;
}
.connector {
width: 4em;
margin: 0.25em 0 -0.25em 0.5em;
} }
} }
</style> </style>

View file

@ -12,6 +12,7 @@ $collapse-toggler-width: 2em;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
&.expanded { &.expanded {
@include expanded-entity(); @include expanded-entity();