dragongoose/safetwitch
1
0
Fork 0
mirror of https://codeberg.org/dragongoose/safetwitch.git synced 2024-07-05 12:17:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile UI
All checks were successful
ci/woodpecker/tag/<no value> Pipeline was successful
Details

Browse source
This commit is contained in:
dragongoose 2023-07-26 18:09:08 -04:00
parent bbc4baee48
commit 861ac4cc21
3 changed files with 44 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/components/NavbarView.vue
View file

@ -1,28 +1,57 @@
<script lang="ts"> <script lang="ts">
import { ref } from 'vue'
import SearchBar from './SearchBar.vue' import SearchBar from './SearchBar.vue'
import LanguageSwitcher from './LanguageSwitcher.vue' import LanguageSwitcher from './LanguageSwitcher.vue'
export default { export default {
components: { components: {
SearchBar, SearchBar,
LanguageSwitcher LanguageSwitcher
},
setup() {
return {
open: ref(false)
}
},
methods: {
toggle() {
this.open = !this.open
}
} }
} }
</script> </script>
<template> <template>
<div class="p-4 flex items-center justify-between bg-ctp-base text-white">
<router-link to="/">
<h1 class="font-bold text-2xl">Safe<color class="text-purple-500">Twitch</color></h1>
</router-link>
<div> <nav class="flex items-center justify-between flex-wrap p-4">
<search-bar></search-bar> <div class="flex items-center flex-no-shrink text-white mr-6">
</div> <router-link to="/">
<h1 class="font-bold text-2xl">Safe<color class="text-purple-500">Twitch</color></h1>
</router-link>
</div>
<ul class="inline-flex space-x-6 font-medium"> <search-bar class="mt-4 mr-4 hidden sm:inline-block sm:mt-0"></search-bar>
<a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
<router-link to="/privacy">{{ $t('nav.privacy') }}</router-link> <div class="text-white hidden sm:block">
<language-switcher></language-switcher> <a href="https://codeberg.org/dragongoose/safetwitch" class="mt-4 mr-4 sm:inline-block sm:mt-0">{{ $t('nav.code') }}</a>
</ul> <router-link to="/privacy" class="mt-4 mr-4 sm:inline-block sm:mt-0">{{ $t('nav.privacy') }}</router-link>
</div> <language-switcher class="mt-4 sm:inline-block sm:mt-0"></language-switcher>
</div>
<div class="block sm:hidden">
<button @click="toggle" class="flex items-center px-3 py-2">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div :class="open ? 'block': 'hidden'" class="w-full flex-grow">
<div class="p-4 flex flex-col items-center space-y-5 bg-ctp-base text-white">
<search-bar></search-bar>
<ul class="inline-flex space-x-3 md:space-x-6 font-medium">
<a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
<router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
<language-switcher></language-switcher>
</ul>
</div>
</div>
</nav>
</template> </template>

2
src/components/SearchBar.vue
View file

@ -15,7 +15,7 @@ export default {
</script> </script>
<template> <template>
<div class="relative hidden md:block"> <div class="relative md:block">
<label for="searchBar" class="hidden">{{ $t('main.search') }}</label> <label for="searchBar" class="hidden">{{ $t('main.search') }}</label>
<v-icon name="io-search-outline" class="absolute my-auto inset-y-0 left-2"></v-icon> <v-icon name="io-search-outline" class="absolute my-auto inset-y-0 left-2"></v-icon>
<input <input

1
src/views/HomepageView.vue
View file

@ -152,5 +152,6 @@ export default {
<category-preview :category-data="category"></category-preview> <category-preview :category-data="category"></category-preview>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>