TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2457 from robertkleinschuster/mobile-nav-ux

Browse source 
Improved appearance of nav bar on mobile
This commit is contained in:
Bnyro 2023-05-28 11:04:10 +02:00 • committed by GitHub
commit 954d94eda2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/App.vue
View file

@ -216,8 +216,10 @@ b {
} }
.input:focus { .input:focus {
@apply border-2 border-red-500 outline-none; @apply outline-red-500;
box-shadow: 0 0 15px rgba(239, 68, 68, var(--un-border-opacity)); outline-style: solid;
outline-width: 2px;
box-shadow: 0 0 15px rgba(239, 68, 68, 1);
} }
hr { hr {

63
src/components/NavBar.vue
View file

@ -59,35 +59,41 @@
</ul> </ul>
</nav> </nav>
<!-- navigation bar for mobile devices --> <!-- navigation bar for mobile devices -->
<ul <div
v-if="showTopNav" v-if="showTopNav"
class="flex flex-col justify-center items-end mb-4 children:(my-0.5 mr-5)" class="mobile-nav flex flex-col mb-4 children:(p-1 w-full border-b border-dark-100 flex items-center gap-1)"
@click="showTopNav = false"
> >
<li v-if="shouldShowTrending"> <router-link v-if="shouldShowTrending" to="/trending">
<router-link v-t="'titles.trending'" to="/trending" /> <div class="i-fa6-solid:fire"></div>
</li> <i18n-t keypath="titles.trending"></i18n-t>
<li> </router-link>
<router-link v-t="'titles.preferences'" to="/preferences" /> <router-link to="/preferences">
</li> <div class="i-fa6-solid:gear"></div>
<li v-if="shouldShowLogin"> <i18n-t keypath="titles.preferences"></i18n-t>
<router-link v-t="'titles.login'" to="/login" /> </router-link>
</li> <router-link v-if="shouldShowLogin" to="/login">
<li v-if="shouldShowLogin"> <div class="i-fa6-solid:user"></div>
<router-link v-t="'titles.register'" to="/register" /> <i18n-t keypath="titles.login"></i18n-t>
</li> </router-link>
<li v-if="shouldShowHistory"> <router-link v-if="shouldShowLogin" to="/register">
<router-link v-t="'titles.history'" to="/history" /> <div class="i-fa6-solid:user-plus"></div>
</li> <i18n-t keypath="titles.register"></i18n-t>
<li> </router-link>
<router-link v-t="'titles.playlists'" to="/playlists" /> <router-link v-if="shouldShowHistory" to="/history">
</li> <div class="i-fa6-solid:clock-rotate-left"></div>
<li v-if="!shouldShowTrending"> <i18n-t keypath="titles.history"></i18n-t>
<router-link v-t="'titles.feed'" to="/feed" /> </router-link>
</li> <router-link to="/playlists">
</ul> <div class="i-fa6-solid:list"></div>
<i18n-t keypath="titles.playlists"></i18n-t>
</router-link>
<router-link v-if="!shouldShowTrending" to="/feed">
<div class="i-fa6-solid:play"></div>
<i18n-t keypath="titles.feed"></i18n-t>
</router-link>
</div>
<!-- search suggestions for mobile devices --> <!-- search suggestions for mobile devices -->
<div class="mobile-search md:hidden mx-2 search-container"> <div class="w-full mb-2 md:hidden search-container">
<input <input
v-model="searchText" v-model="searchText"
class="input h-10 w-full" class="input h-10 w-full"
@ -189,8 +195,7 @@ export default {
@apply absolute right-3 cursor-pointer rounded-full bg-[#ccc] w-4 h-4 text-center text-black opacity-50 hover:(opacity-70) text-size-[13px]; @apply absolute right-3 cursor-pointer rounded-full bg-[#ccc] w-4 h-4 text-center text-black opacity-50 hover:(opacity-70) text-size-[13px];
line-height: 1.05; line-height: 1.05;
} }
.mobile-search { .mobile-nav div {
width: calc(100% - 1rem); @apply mx-1;
@apply mx-2;
} }
</style> </style>

4
src/components/SearchSuggestions.vue
View file

@ -82,7 +82,7 @@ export default {
<style> <style>
.suggestions-container { .suggestions-container {
@apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 lt-md:max-w-[calc(100%-0.5rem)] bg-gray-300; @apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border z-10 lt-md:max-w-[calc(100%-0.5rem)] bg-gray-300;
} }
.dark .suggestions-container { .dark .suggestions-container {
@ -98,6 +98,6 @@ export default {
} }
.suggestion { .suggestion {
@apply p-y-1; @apply p-1;
} }
</style> </style>