forked from platypush/platypush
Bluetooth UI toggle aligned to the right - like all other toggles.
This commit is contained in:
parent
285f3941d9
commit
4383dbb2b4
2 changed files with 11 additions and 13 deletions
|
@ -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>
|
||||||
|
|
|
@ -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();
|
||||||
|
|
Loading…
Reference in a new issue