move client-only wrapper into LocaleSwitch component

so we don't have to wrap <locale-switch> in <client-only> every time we use it
This commit is contained in:
Alina Beck 2020-02-11 11:14:59 +01:00
parent 09dee69ee0
commit d460819dee
5 changed files with 38 additions and 44 deletions

View File

@ -1,35 +1,37 @@
<template>
<dropdown ref="menu" :placement="placement" :offset="offset">
<a
slot="default"
slot-scope="{ toggleMenu }"
class="locale-menu"
href="#"
@click.prevent="toggleMenu()"
>
<base-icon name="globe" />
<span class="label">{{ current.code.toUpperCase() }}</span>
<base-icon class="dropdown-arrow" name="angle-down" />
</a>
<ds-menu
slot="popover"
slot-scope="{ toggleMenu }"
class="locale-menu-popover"
:matcher="matcher"
:routes="routes"
>
<ds-menu-item
slot="menuitem"
slot-scope="item"
class="locale-menu-item"
:route="item.route"
:parents="item.parents"
@click.stop.prevent="changeLanguage(item.route.path, toggleMenu)"
<client-only>
<dropdown ref="menu" :placement="placement" :offset="offset">
<a
slot="default"
slot-scope="{ toggleMenu }"
class="locale-menu"
href="#"
@click.prevent="toggleMenu()"
>
{{ item.route.name }}
</ds-menu-item>
</ds-menu>
</dropdown>
<base-icon name="globe" />
<span class="label">{{ current.code.toUpperCase() }}</span>
<base-icon class="dropdown-arrow" name="angle-down" />
</a>
<ds-menu
slot="popover"
slot-scope="{ toggleMenu }"
class="locale-menu-popover"
:matcher="matcher"
:routes="routes"
>
<ds-menu-item
slot="menuitem"
slot-scope="item"
class="locale-menu-item"
:route="item.route"
:parents="item.parents"
@click.stop.prevent="changeLanguage(item.route.path, toggleMenu)"
>
{{ item.route.name }}
</ds-menu-item>
</ds-menu>
</dropdown>
</client-only>
</template>
<script>

View File

@ -10,9 +10,7 @@
</a>
</ds-flex-item>
<ds-flex-item width="20%" style="flex-grow:0;">
<client-only>
<locale-switch class="topbar-locale-switch" placement="top" offset="16" />
</client-only>
<locale-switch class="topbar-locale-switch" placement="top" offset="16" />
</ds-flex-item>
</ds-flex>
</ds-container>

View File

@ -50,9 +50,7 @@
}"
style="flex-basis: auto;"
>
<client-only>
<locale-switch class="topbar-locale-switch" placement="top" offset="8" />
</client-only>
<locale-switch class="topbar-locale-switch" placement="top" offset="8" />
<template v-if="isLoggedIn">
<client-only>
<notification-menu placement="top" />

View File

@ -1,11 +1,9 @@
<template>
<transition name="fade" appear>
<ds-container width="medium">
<ds-card>
<base-card>
<ds-space>
<client-only>
<locale-switch class="login-locale-switch" offset="5" />
</client-only>
<locale-switch class="login-locale-switch" offset="5" />
</ds-space>
<ds-flex>
<ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
@ -31,7 +29,7 @@
</ds-flex-item>
</ds-flex-item>
</ds-flex>
</ds-card>
</base-card>
</ds-container>
</transition>
</template>

View File

@ -3,9 +3,7 @@
<ds-card>
<ds-flex gutter="small">
<ds-flex-item :width="{ base: '100%', sm: '50%' }">
<client-only>
<locale-switch offset="5" />
</client-only>
<locale-switch offset="5" />
<ds-space margin-top="small" margin-bottom="xxx-small">
<img class="signup-image" alt="Human Connection" src="/img/sign-up/nicetomeetyou.svg" />
</ds-space>