mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-10-31 23:15:05 +01:00
Fix more hydration issues. (#37)
This commit is contained in:
parent
1f878c9f23
commit
0906da5826
@ -29,10 +29,12 @@ onMounted(() => {
|
||||
:data-view-transition="supportsViewTransition"
|
||||
@click="toggleAppearance"
|
||||
>
|
||||
<Transition name="fade" mode="out-in">
|
||||
<VPIconSun v-if="!isDark" class="sun" />
|
||||
<VPIconMoon v-else class="moon" />
|
||||
</Transition>
|
||||
<ClientOnly>
|
||||
<Transition name="fade" mode="out-in">
|
||||
<VPIconSun v-if="!isDark" class="sun" />
|
||||
<VPIconMoon v-else class="moon" />
|
||||
</Transition>
|
||||
</ClientOnly>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
@ -40,53 +40,55 @@ const labelPosition = computed(() => isSmallScreen.value ? "top" : "right")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="filters-list">
|
||||
<ElForm label-width="120px" :label-position="labelPosition">
|
||||
<ElFormItem label="Search:">
|
||||
<ElInput
|
||||
:model-value="search"
|
||||
placeholder="Search extensions by name or ID..."
|
||||
clearable
|
||||
@update:model-value="$emit('update:search', $event)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="Languages:">
|
||||
<ElSelect
|
||||
:model-value="lang"
|
||||
placeholder="Show specific languages..."
|
||||
multiple
|
||||
clearable
|
||||
@update:model-value="$emit('update:lang', $event)"
|
||||
>
|
||||
<ElOption
|
||||
v-for="[group] in extensions"
|
||||
:key="group.lang"
|
||||
:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
|
||||
:value="group.lang"
|
||||
<ClientOnly>
|
||||
<div class="filters-list">
|
||||
<ElForm label-width="120px" :label-position="labelPosition">
|
||||
<ElFormItem label="Search:">
|
||||
<ElInput
|
||||
:model-value="search"
|
||||
placeholder="Search extensions by name or ID..."
|
||||
clearable
|
||||
@update:model-value="$emit('update:search', $event)"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="Sort by:">
|
||||
<ElRadioGroup
|
||||
:model-value="sort"
|
||||
@update:model-value="$emit('update:sort', $event)"
|
||||
>
|
||||
<ElRadio label="Ascending" />
|
||||
<ElRadio label="Descending" />
|
||||
</ElRadioGroup>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="Display mode:">
|
||||
<ElRadioGroup
|
||||
:model-value="nsfw"
|
||||
@update:model-value="$emit('update:nsfw', $event)"
|
||||
>
|
||||
<ElRadio label="NSFW" />
|
||||
<ElRadio label="SFW" />
|
||||
<ElRadio label="Show all" />
|
||||
</ElRadioGroup>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="Languages:">
|
||||
<ElSelect
|
||||
:model-value="lang"
|
||||
placeholder="Show specific languages..."
|
||||
multiple
|
||||
clearable
|
||||
@update:model-value="$emit('update:lang', $event)"
|
||||
>
|
||||
<ElOption
|
||||
v-for="[group] in extensions"
|
||||
:key="group.lang"
|
||||
:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
|
||||
:value="group.lang"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="Sort by:">
|
||||
<ElRadioGroup
|
||||
:model-value="sort"
|
||||
@update:model-value="$emit('update:sort', $event)"
|
||||
>
|
||||
<ElRadio label="Ascending" />
|
||||
<ElRadio label="Descending" />
|
||||
</ElRadioGroup>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="Display mode:">
|
||||
<ElRadioGroup
|
||||
:model-value="nsfw"
|
||||
@update:model-value="$emit('update:nsfw', $event)"
|
||||
>
|
||||
<ElRadio label="NSFW" />
|
||||
<ElRadio label="SFW" />
|
||||
<ElRadio label="Show all" />
|
||||
</ElRadioGroup>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
|
Loading…
Reference in New Issue
Block a user