MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-03-03 23:30:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Fix alignement in switch control

Browse Source
This commit is contained in:
Alain Nussbaumer 2025-02-15 20:14:22 +01:00
parent 24d2204fb0
commit b477121dda
3 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web-src/src/components/ControlSetting.vue
View File

@ -7,13 +7,13 @@
<div class="control" :class="{ 'has-icons-right': isSuccess || isError }"> <div class="control" :class="{ 'has-icons-right': isSuccess || isError }">
<slot name="input" :setting="setting" :update="update" /> <slot name="input" :setting="setting" :update="update" />
<mdicon <mdicon
v-if="isSuccess || isError" v-if="$slots.label && (isSuccess || isError)"
class="icon is-right" class="icon is-right"
:name="isSuccess ? 'check' : 'close'" :name="isSuccess ? 'check' : 'close'"
size="16" size="16"
/> />
</div> </div>
<p v-if="$slots.help" class="help"> <p v-if="$slots.help" class="help mb-4">
<slot name="help" /> <slot name="help" />
</p> </p>
</div> </div>

6
web-src/src/components/ControlSettingSwitch.vue
View File

@ -10,11 +10,11 @@
<template #label> <template #label>
<slot name="label" /> <slot name="label" />
</template> </template>
<template #help>
<slot name="help" />
</template>
</control-switch> </control-switch>
</template> </template>
<template v-if="$slots.help" #help>
<slot name="help" />
</template>
</control-setting> </control-setting>
</template> </template>

17
web-src/src/components/ControlSwitch.vue
View File

@ -1,20 +1,20 @@
<template> <template>
<div class="field"> <div class="field mb-0 is-flex is-align-items-center">
<label class="toggle"> <label class="toggle is-flex is-align-items-center">
<div class="control is-flex is-align-content-center"> <div class="control is-flex is-align-items-center">
<input <input
:checked="modelValue" :checked="modelValue"
type="checkbox" type="checkbox"
class="toggle-checkbox" class="toggle-checkbox is-hidden"
@change="$emit('update:modelValue', !modelValue)" @change="$emit('update:modelValue', !modelValue)"
/> />
<div class="toggle-switch" /> <div class="toggle-switch" />
<slot name="label" />
</div> </div>
</label> </label>
<div v-if="$slots.help" class="help"> <slot name="label" />
<slot name="help" /> </div>
</div> <div v-if="$slots.help" class="help mb-4">
<slot name="help" />
</div> </div>
</template> </template>
@ -64,7 +64,6 @@ export default {
&-checkbox { &-checkbox {
position: absolute; position: absolute;
visibility: hidden;
&:checked + .toggle-switch { &:checked + .toggle-switch {
background: var(--bulma-dark); background: var(--bulma-dark);