MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui)

This commit is contained in:
upsiflu 2024-12-30 13:44:38 +01:00
parent 8cfd8e8d9f
commit c9f59cbd26
2 changed files with 8 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/components/ui/Toggle.vue
View File

@ -17,7 +17,7 @@ const diameter = big? '28px' : '20px'
:checked = "isOn || undefined" :checked = "isOn || undefined"
> >
<input type="checkbox" v-model="isOn" <input type="checkbox" v-model="isOn"
style="visibility: hidden; /* Hide even before stylesheet is loaded */" style="opacity: 0; /* Hide even before stylesheet is loaded */"
/> />
<span v-if="label">{{ label }}</span> <span v-if="label">{{ label }}</span>
</label> </label>
@ -48,7 +48,7 @@ const diameter = big? '28px' : '20px'
} }
} }
&:hover { &:hover, &:has(:focus-visible) {
--void-color: var(--void-off-hover-background-color); --void-color: var(--void-off-hover-background-color);
--pin-color: var(--void-off-hover-pin-color); --pin-color: var(--void-off-hover-pin-color);
&[checked] { &[checked] {
@ -80,9 +80,5 @@ const diameter = big? '28px' : '20px'
> span { > span {
padding-left: calc(var(--diameter) + 8px); padding-left: calc(var(--diameter) + 8px);
} }
> input {
visibility: hidden;
}
} }
</style> </style>

12
front/ui-docs/components/ui/layout.md
View File

@ -71,7 +71,7 @@ const noGap = ref(true);
``` ```
<div class="preview" style="width:0"> <div class="preview" style="width:0">
<Toggle v-model="noGap" /> {{ noGap ? 'no-gap' : '-' }} <Toggle v-model="noGap" label="no-gap" />
--- ---
@ -106,7 +106,7 @@ const isGrowing = ref(true);
<template> <template>
<Toggle v-model="isGrowing" /> <Toggle v-model="isGrowing" />
<Layout stack style="height:20em;"> <Layout stack style="height:25em;">
<Alert red /> <Alert red />
<Alert purple /> <Alert purple />
<Spacer :grow="isGrowing || undefined" /> <Spacer :grow="isGrowing || undefined" />
@ -116,11 +116,11 @@ const isGrowing = ref(true);
``` ```
<div class="preview"> <div class="preview">
<Toggle v-model="isGrowing" /> {{ isGrowing ? 'grow' : '-' }} <Toggle v-model="isGrowing" label="grow"/>
--- ---
<Layout stack style="height:20em"> <Layout stack style="height:25em">
<Alert red /> <Alert red />
<Alert purple /> <Alert purple />
<Spacer :grow="isGrowing || undefined" /> <Spacer :grow="isGrowing || undefined" />
@ -140,7 +140,7 @@ Note that you can set the minimum space occupied by the `Spacer` with its `size`
<template> <template>
<Toggle v-model="isGrowing" /> <Toggle v-model="isGrowing" />
<Layout stack style="height:25em;"> <Layout stack style="height:35em;">
<Alert blue /> <Alert blue />
<Spacer :size="-32" :grow="isGrowing || undefined" /> <Spacer :size="-32" :grow="isGrowing || undefined" />
<Alert green /> <Alert green />
@ -156,7 +156,7 @@ Note that you can set the minimum space occupied by the `Spacer` with its `size`
--- ---
<Layout stack style="height:25em;"> <Layout stack style="height:35em;">
<Alert blue /> <Alert blue />
<Spacer :size="-32" :grow="isGrowing || undefined" /> <Spacer :size="-32" :grow="isGrowing || undefined" />
<Alert green /> <Alert green />