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

Fix navbar and cleanup search suggestions.

Browse source
This commit is contained in:
FireMasterK 2021-12-27 15:36:18 +00:00
parent 9b6e32683f
commit 13a1f352d8
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
2 changed files with 8 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Navigation.vue
View file

@ -1,6 +1,6 @@
<template>
<nav class="container flex flex-wrap items-center justify-between px-2 sm:px-4 py-2.5 w-full relative">
<div class="">
<nav class="flex flex-wrap items-center justify-between px-2 sm:px-4 py-2.5 w-full relative">
<div>
<router-link class="flex font-bold text-3xl items-center font-sans font-bold" to="/"
><img
alt="logo"

30
src/components/SearchSuggestions.vue
View file

@ -1,14 +1,11 @@
<template>
<div
class="absolute uk-panel uk-box-shadow-large suggestions-container"
:style="[{ background: secondaryBackgroundColor }]"
>
<ul class="uk-list uk-margin-remove uk-text-secondary">
<div class="absolute suggestions-container" :style="[{ background: secondaryBackgroundColor }]">
<ul>
<li
v-for="(suggestion, i) in searchSuggestions"
:key="i"
:style="[selected === i ? { background: secondaryForegroundColor } : {}]"
class="uk-margin-remove suggestion"
class="suggestion"
@mouseover="onMouseOver(i)"
@mousedown.stop="onClick(i)"
>
@ -79,25 +76,10 @@ export default {
<style>
.suggestions-container {
left: 50%;
transform: translateX(-50%);
max-width: 640px;
width: 100%;
box-sizing: border-box;
padding: 5px 0;
z-index: 10;
@apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 <md:max-w-[calc(100%-0.5rem)];
}
.suggestion {
padding: 4px 15px;
}
@media screen and (max-width: 959px) {
.suggestions-container {
max-width: calc(100% - 60px);
}
}
@media screen and (max-width: 639px) {
.suggestions-container {
max-width: calc(100% - 30px);
}
@apply p-y-1;
}
</style>