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 }">
<slot name="input" :setting="setting" :update="update" />
<mdicon
v-if="isSuccess || isError"
v-if="$slots.label && (isSuccess || isError)"
class="icon is-right"
:name="isSuccess ? 'check' : 'close'"
size="16"
/>
</div>
<p v-if="$slots.help" class="help">
<p v-if="$slots.help" class="help mb-4">
<slot name="help" />
</p>
</div>

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

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

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

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