Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-04-26 07:49:22 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Move language selector to smaller footer area

Browse Source
This commit is contained in:
Matt Isenhower 2022-10-12 16:24:11 -07:00
parent 300730c0c9
commit 97c483f7c6
2 changed files with 39 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/LanguageButton.vue
View File

@ -1,29 +1,16 @@
<template>
<select @change="onLanguageChange" v-model="$i18n.locale" class="language font-splatoon2 md:absolute md:mb-0 mb-5">
<option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ $t('locales.' + locale) }}</option>
<select @change="onLanguageChange" v-model="$i18n.locale" class="bg-transparent text-zinc-300 cursor-pointer">
<template v-for="locale in $i18n.availableLocales" :key="locale">
<option :value="locale">{{ $t('locales.' + locale) }}</option>
</template>
</select>
</template>
<script setup>
import { useI18n } from "vue-i18n"
const i18n = useI18n()
import { useI18n } from "vue-i18n"
const i18n = useI18n()
const onLanguageChange = () => {
localStorage.setItem('lang', i18n.locale.value)
}
const onLanguageChange = () => {
localStorage.setItem('lang', i18n.locale.value)
}
</script>
<style scoped>
.language {
right: 2.5vw;
@apply text-zinc-300 pl-4 py-1 bg-zinc-300 bg-opacity-20 rounded-full cursor-pointer
}
.language:hover {
@apply text-zinc-50 bg-opacity-30;
}
.language option {
@apply text-black
}
</style>

61
src/layouts/MainLayout.vue
View File

@ -16,38 +16,37 @@
<slot />
<div class="flex md:flex-row flex-col justify-center items-center relative">
<div class="m-2 text-center text-xs text-zinc-500 grow">
<div>
<img src="@/assets/img/little-buddy.png" class="mx-auto mb-4" width="50" />
</div>
<div>
{{ $t('footer.term') }}
</div>
<div class="footer-links">
<router-link to="/about">
<span>{{ $t('footer.about') }}</span>
</router-link>
&ndash;
<a href="https://github.com/misenhower/splatoon3.ink/wiki/Data-Access" target="_blank">
<span>{{ $t('footer.data') }}</span>
</a>
&ndash;
<a href="https://twitter.com/splatoon3ink" target="_blank">
<img src="@/assets/img/twitter-white.png" width="20" height="20" class="inline" />
<span>@splatoon3ink</span>
</a>
&ndash;
<a href="https://splatoon2.ink" target="_blank">
<span>splatoon2.ink</span>
</a>
&ndash;
<a href="https://github.com/misenhower/splatoon3.ink" target="_blank">
<span>GitHub</span>
</a>
</div>
<div class="m-2 text-center text-xs text-zinc-500 grow">
<div>
<img src="@/assets/img/little-buddy.png" class="mx-auto mb-4" width="50" />
</div>
<div>
{{ $t('footer.term') }}
</div>
<div class="footer-links">
<router-link to="/about">
<span>{{ $t('footer.about') }}</span>
</router-link>
&ndash;
<a href="https://github.com/misenhower/splatoon3.ink/wiki/Data-Access" target="_blank">
<span>{{ $t('footer.data') }}</span>
</a>
&ndash;
<a href="https://twitter.com/splatoon3ink" target="_blank">
<img src="@/assets/img/twitter-white.png" width="20" height="20" class="inline" />
<span>@splatoon3ink</span>
</a>
&ndash;
<a href="https://splatoon2.ink" target="_blank">
<span>splatoon2.ink</span>
</a>
&ndash;
<a href="https://github.com/misenhower/splatoon3.ink" target="_blank">
<span>GitHub</span>
</a>
&ndash;
<LanguageButton />
</div>
<LanguageButton />
</div>
<TimeOffsetSelector v-if="isDev" class="mb-4" />