diff options
| -rw-r--r-- | src/routes/+layout.svelte | 191 |
1 files changed, 102 insertions, 89 deletions
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 2bda9e50..5a327169 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -14,7 +14,7 @@ import Notification from '$lib/Notification/Notification.svelte'; import Root from '$lib/Home/Root.svelte'; import root from '$lib/Utility/root'; - import { addMessages, init, locale as i18nLocale } from 'svelte-i18n'; + import { addMessages, init, locale as i18nLocale, locales } from 'svelte-i18n'; import english from '$lib/Locale/english'; import japanese from '$lib/Locale/japanese'; import type { LocaleDictionary } from '$lib/Locale/layout'; @@ -27,6 +27,7 @@ import settingsSyncPulled from '$stores/settingsSyncPulled'; import settingsSyncTimes from '$stores/settingsSyncTimes'; import Announcement from '$lib/Announcement.svelte'; + import Message from '$lib/Loading/Message.svelte'; injectSpeedInsights(); @@ -136,102 +137,114 @@ <HeadTitle /> -<Announcement /> - -<div class="container"> - <div class="card card-centered header" class:header-hidden={!isHeaderVisible}> - <div> - <a href={root('/')} class="header-item">{$locale().navigation.home}</a><a - href={root('/completed')} - class="header-item" - > - {$locale().navigation.completed} - </a> - <Dropdown - items={[ - { name: $locale().navigation.subtitleSchedule, url: root('/schedule') }, - { name: $locale().navigation.hololive, url: root('/hololive') }, - { name: $locale().tools.tool.characterBirthdays.short, url: root('/birthdays') }, - { name: $locale().navigation.newReleases, url: root('/updates') } - ]} - header={false} - > - <span slot="title" class="header-item">{$locale().navigation.schedule}</span> - </Dropdown> - <a href={root('/tools')} class="header-item">{$locale().navigation.tools}</a> - <a href={root('/settings')} class="header-item">{$locale().navigation.settings}</a> - - <span class="header-item opaque separator">•</span> - - {#if data.user} +{#if !$locales.includes('en')} + <Message /> + + {#if data.url === '/settings'} + <Skeleton grid={true} count={1} height="10vh" /> + <Skeleton grid={true} count={1} height="30vh" /> + <Skeleton grid={true} count={1} height="30vh" /> + {:else} + <Skeleton grid={true} count={1} height="10vh" /> + <Skeleton grid={true} count={1} height="80vh" /> + {/if} +{:else} + <Announcement /> + + <div class="container"> + <div class="card card-centered header" class:header-hidden={!isHeaderVisible}> + <div> + <a href={root('/')} class="header-item">{$locale().navigation.home}</a><a + href={root('/completed')} + class="header-item" + > + {$locale().navigation.completed} + </a> <Dropdown items={[ - { name: $locale().navigation.myProfile, url: root(`/user/${$userIdentity.name}`) }, - { - name: $locale().navigation.myBadgeWall, - url: root(`/user/${$userIdentity.name}/badges`) - }, - { - name: $locale().navigation.logOut, - url: '#', - preventDefault: true, - onClick: () => { - localStorage.removeItem('identity'); - localStorage.removeItem('commit'); - - document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; - - window.location.href = root('/api/authentication/log-out'); - } - } + { name: $locale().navigation.subtitleSchedule, url: root('/schedule') }, + { name: $locale().navigation.hololive, url: root('/hololive') }, + { name: $locale().tools.tool.characterBirthdays.short, url: root('/birthdays') }, + { name: $locale().navigation.newReleases, url: root('/updates') } ]} header={false} > - <span slot="title" class="header-item"> - {$locale().navigation.profile} - </span> + <span slot="title" class="header-item">{$locale().navigation.schedule}</span> </Dropdown> - {/if} - - {#if data.user === undefined} - <a - class="header-item" - href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`} - on:click={() => { - localStorage.setItem( - 'redirect', - window.location.origin + window.location.pathname + window.location.search - ); - }} - > - {$locale().navigation.logIn} - </a> - {:else if data.user} - <a href={root(`/user/${$userIdentity.name}`)} class="header-item"> - <img class="avatar" src={$userIdentity.avatar} alt="Avatar" /> - </a> - {/if} + <a href={root('/tools')} class="header-item">{$locale().navigation.tools}</a> + <a href={root('/settings')} class="header-item">{$locale().navigation.settings}</a> + + <span class="header-item opaque separator">•</span> + + {#if data.user} + <Dropdown + items={[ + { name: $locale().navigation.myProfile, url: root(`/user/${$userIdentity.name}`) }, + { + name: $locale().navigation.myBadgeWall, + url: root(`/user/${$userIdentity.name}/badges`) + }, + { + name: $locale().navigation.logOut, + url: '#', + preventDefault: true, + onClick: () => { + localStorage.removeItem('identity'); + localStorage.removeItem('commit'); + + document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; + + window.location.href = root('/api/authentication/log-out'); + } + } + ]} + header={false} + > + <span slot="title" class="header-item"> + {$locale().navigation.profile} + </span> + </Dropdown> + {/if} + + {#if data.user === undefined} + <a + class="header-item" + href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`} + on:click={() => { + localStorage.setItem( + 'redirect', + window.location.origin + window.location.pathname + window.location.search + ); + }} + > + {$locale().navigation.logIn} + </a> + {:else if data.user} + <a href={root(`/user/${$userIdentity.name}`)} class="header-item"> + <img class="avatar" src={$userIdentity.avatar} alt="Avatar" /> + </a> + {/if} + </div> </div> - </div> - <p /> - - <Notifications item={Notification} zIndex={5000}> - <Root {data} {way}> - {#if $userIdentity.id !== -1} - <slot /> - {:else if data.url === '/settings'} - <Skeleton /> - {:else if data.url === '/tools'} - <Skeleton count={1} height="75vh" /> - {:else if data.url === '/schedule'} - <Skeleton grid={true} width="50%" count={2} height="25vh" /> - {:else} - <Skeleton grid={true} width="50%" count={2} height="25vh" /> - {/if} - </Root> - </Notifications> -</div> + <p /> + + <Notifications item={Notification} zIndex={5000}> + <Root {data} {way}> + {#if $userIdentity.id !== -1} + <slot /> + {:else if data.url === '/settings'} + <Skeleton grid={true} count={1} height="10vh" /> + <Skeleton grid={true} count={1} height="30vh" /> + <Skeleton grid={true} count={1} height="30vh" /> + {:else} + <Skeleton grid={true} count={1} height="10vh" /> + <Skeleton grid={true} count={1} height="80vh" /> + {/if} + </Root> + </Notifications> + </div> +{/if} <style lang="scss"> .header { |