Add mobile support and update dropdown
This commit is contained in:
parent
e312dc0cae
commit
9cfc165035
1 changed files with 204 additions and 239 deletions
|
|
@ -5,100 +5,41 @@ import { Trans, HeadHrefLangs } from "astro-i18next/components";
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from 'astro:assets';
|
||||||
import Button from '@components/generic/Button.astro'
|
import Dropdown from '@components/global/HeaderDropdown.astro'
|
||||||
|
|
||||||
// Images
|
// Images
|
||||||
import Poke from '@assets/poke-text.svg'
|
import Poke from '@assets/poke-text.svg'
|
||||||
|
|
||||||
// Icons
|
// Icons
|
||||||
import {
|
import {
|
||||||
LogIn,
|
RefreshDouble,
|
||||||
Gamepad,
|
|
||||||
Settings,
|
|
||||||
Search,
|
Search,
|
||||||
ProfileCircle,
|
Menu
|
||||||
CircleSpark,
|
|
||||||
Youtube,
|
|
||||||
OpenNewWindow,
|
|
||||||
ViewGrid,
|
|
||||||
Arcade,
|
|
||||||
InfoCircle,
|
|
||||||
PrivacyPolicy,
|
|
||||||
Code,
|
|
||||||
Language,
|
|
||||||
NavArrowLeft,
|
|
||||||
NavArrowRight,
|
|
||||||
List
|
|
||||||
} from '@iconoir/vue'
|
} from '@iconoir/vue'
|
||||||
import { Menu } from "@iconoir/vue";
|
|
||||||
|
|
||||||
// Check URL
|
|
||||||
if (Astro.url.pathname.startsWith('/watch')) {
|
|
||||||
var WatchPage = true
|
|
||||||
} else {
|
|
||||||
var WatchPage = false
|
|
||||||
}
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<header>
|
<header id="header-desktop">
|
||||||
<div class="header-content">
|
<div class="header-content">
|
||||||
<div class="header-start">
|
<div class="header-start">
|
||||||
<a href={'/'}><Image src={Poke} alt="Poke Logo" height={24} /></a>
|
<a href={'/'}><Image src={Poke} alt="Poke Logo" height={24} /></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-center"></div>
|
<div class="header-center"></div>
|
||||||
<div class="header-end">
|
<div class="header-end">
|
||||||
<Button
|
<button onclick="FocusSearch()" transition:persist="searchbar">
|
||||||
BackDrop="blur(6px) brightness(1)"
|
<RefreshDouble style="display: none;" id="search-header-load"/>
|
||||||
Background="transparent"
|
<Search id="search-header-icon"/>
|
||||||
BorderColor="transparent"
|
<form onsubmit="return Search()">
|
||||||
Color="white"
|
<input type="search" placeholder="Search"/>
|
||||||
BorderRadius="3rem"
|
</form>
|
||||||
><Search width={16}/> Search</Button>
|
</button>
|
||||||
<Button
|
<button onclick="ToggleHeaderDropdown()"><Menu/> Menu</button>
|
||||||
BackDrop="blur(6px) brightness(1)"
|
<div class="suggestions"></div>
|
||||||
Background="transparent"
|
|
||||||
BorderColor="transparent"
|
|
||||||
Color="white"
|
|
||||||
BorderRadius="3rem"
|
|
||||||
Onclick="ToggleHeaderDropdown()"
|
|
||||||
><Menu width={16}/> Menu</Button>
|
|
||||||
</div>
|
|
||||||
<div id="primary" class="header-dropdown">
|
|
||||||
<p>{t('dropdown.Options')}</p>
|
|
||||||
<a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()" style="justify-content: space-between;"><div><Language/> {t('dropdown.Language')}</div> <NavArrowRight/></a>
|
|
||||||
<a href=""><ProfileCircle/> {t('dropdown.Account')}</a>
|
|
||||||
<a href=""><Settings/> {t('dropdown.Settings')}</a>
|
|
||||||
<a href=""><List/> {t('dropdown.Instances')}</a>
|
|
||||||
|
|
||||||
<p>{t('dropdown.Hub')}</p>
|
|
||||||
<a data-astro-prefetch href=""><ViewGrid/> {t('dropdown.Apps')}</a>
|
|
||||||
<a data-astro-prefetch href=""><Arcade/> {t('dropdown.Games')}</a>
|
|
||||||
|
|
||||||
<!-- Only show this if the end-user is watching a video -->
|
|
||||||
{WatchPage ?
|
|
||||||
<p>{t('dropdown.Openin')}</p>
|
|
||||||
<a href=""><CircleSpark/> {t('dropdown.LiteMode')}</a>
|
|
||||||
<a href=""><Youtube/> {t('dropdown.YouTube')}</a>
|
|
||||||
<a href=""><OpenNewWindow/> {t('dropdown.Invidious')}</a>
|
|
||||||
<a href=""><OpenNewWindow/> {t('dropdown.Pipe')}</a>
|
|
||||||
:
|
|
||||||
null
|
|
||||||
}
|
|
||||||
|
|
||||||
<p>{t('dropdown.Other')}</p>
|
|
||||||
<a data-astro-prefetch href="/about/"><InfoCircle/> {t('dropdown.About')}</a>
|
|
||||||
<a data-astro-prefetch href=""><PrivacyPolicy/> {t('dropdown.Privacy')}</a>
|
|
||||||
<a data-astro-prefetch href=""><Code/> {t('dropdown.SourceCode')}</a>
|
|
||||||
</div>
|
|
||||||
<div id="language" class="header-dropdown">
|
|
||||||
<p>{t('dropdown.Language')}</p>
|
|
||||||
<a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()"><NavArrowLeft/> {t("dropdown.GoBack")}</a>
|
|
||||||
<a href="/api/language/en/">English</a>
|
|
||||||
<a href="/api/language/jp/">日本語</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Dropdown/>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<!-- Search Scripts -->
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
/*
|
/*
|
||||||
@licstart The following is the entire license notice for the
|
@licstart The following is the entire license notice for the
|
||||||
|
|
@ -125,124 +66,112 @@ through which recipients can access the Corresponding Source.
|
||||||
for the JavaScript code in this page.
|
for the JavaScript code in this page.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Dismiss when the end-user clicks else where
|
// Focus input
|
||||||
document.body.addEventListener("click", function (evt) {
|
function FocusSearch() {
|
||||||
document.querySelector(".header-dropdown#primary").style.display = "none";
|
document.querySelector('input[type="search"]').focus()
|
||||||
});
|
|
||||||
|
|
||||||
// Toggle Primary Dropdown
|
|
||||||
function ToggleHeaderDropdown() {
|
|
||||||
var HeaderDropdown = document.querySelector(".header-dropdown#primary");
|
|
||||||
if (HeaderDropdown.style.display === "flex") {
|
|
||||||
setTimeout(() => {
|
|
||||||
HeaderDropdown.style.display = "none";
|
|
||||||
}, 0o100);
|
|
||||||
} else {
|
|
||||||
setTimeout(() => {
|
|
||||||
HeaderDropdown.style.display = "flex";
|
|
||||||
}, 0o100);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Toggle Language Dropdown
|
// Trigger Search
|
||||||
function ToggleHeaderLanguageDropdown() {
|
function Search() {
|
||||||
var HeaderLanguageDropdown = document.querySelector(".header-dropdown#language");
|
var SearchIcon = document.getElementById('search-header-icon')
|
||||||
if (HeaderLanguageDropdown.style.display === "flex") {
|
SearchIcon.style.display = 'none'
|
||||||
HeaderLanguageDropdown.style.display = "none";
|
var SearchLoading = document.getElementById('search-header-load')
|
||||||
} else {
|
SearchLoading.style.display = 'inherit'
|
||||||
HeaderLanguageDropdown.style.display = "flex";
|
var SearchQuery = document.querySelector('input[type="search"]').value
|
||||||
|
location.href = `/search?q=${SearchQuery}`
|
||||||
|
}
|
||||||
|
|
||||||
|
///// Suggestions /////
|
||||||
|
// Dismiss when the end-user clicks else where
|
||||||
|
document.body.addEventListener("click", function (evt) {
|
||||||
|
document.querySelector('.suggestions').style.opacity = '0'
|
||||||
|
});
|
||||||
|
|
||||||
|
// When the end-user starts typing, trigget the fetch function
|
||||||
|
document.querySelector('input[type="search"]').addEventListener('input', function(e) {
|
||||||
|
if (e.target.value !== '') {
|
||||||
|
document.querySelector('.suggestions').style.opacity = '1'
|
||||||
|
GetResults()
|
||||||
}
|
}
|
||||||
|
else {null}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fetch
|
||||||
|
function GetResults() {
|
||||||
|
var SearchValue = document.querySelector('input[type="search"]').value
|
||||||
|
var YouTubeSuggestions = document.querySelector('.suggestions')
|
||||||
|
fetch(`https://yt.sudovanilla.org/api/v1/search/suggestions?q=${SearchValue}`)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {YouTubeSuggestions.innerHTML = ListOfSuggestionsYT(data)})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create List
|
||||||
|
function ListOfSuggestionsYT(data) {
|
||||||
|
const text = data.suggestions.map(data => `<a href="/search?query=${data}">${data}</a>`).join("\n")
|
||||||
|
return `${text}`
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.dropdown-button {
|
<style is:global lang="scss">
|
||||||
color: white;
|
@media only screen and (max-width: 820px) {
|
||||||
background: transparent;
|
:root {
|
||||||
border: none;
|
--MaxSearchbarWidth: 100% !important;
|
||||||
border-radius: 6px;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
padding: 4px 6px;
|
|
||||||
&:hover {
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
}
|
}
|
||||||
svg {
|
.content {
|
||||||
width: 18px;
|
margin-top: 0px !important;
|
||||||
pointer-events: none;
|
padding-bottom: 92px !important;
|
||||||
}
|
}
|
||||||
}
|
.landing {
|
||||||
.header-dropdown {
|
margin-top: 40px !important;
|
||||||
|
img:nth-child(1) {
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
|
img:nth-child(1) {
|
||||||
|
height: inherit;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
top: inherit !important;
|
||||||
|
bottom: 18px;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
.header-content {
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
width: calc(100% - 96px) !important;
|
||||||
|
border-radius: 42px;
|
||||||
|
border: 1px #222 solid;
|
||||||
|
backdrop-filter: blur(22px) contrast(0.9);
|
||||||
|
}
|
||||||
|
.suggestions, .header-dropdown {
|
||||||
|
top: inherit !important;
|
||||||
|
bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search
|
||||||
|
.channel {
|
||||||
|
min-width: 180px !important;
|
||||||
|
}
|
||||||
|
.tc-info {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: absolute;
|
padding: 24px 0px 50px 0px !important;
|
||||||
top: 70px;
|
h2 {
|
||||||
right: 24px;
|
font-size: 14px !important;
|
||||||
background: transparent;
|
}
|
||||||
border-radius: 12px;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 12px 6px 8px 6px;
|
|
||||||
backdrop-filter: blur(24px) brightness(0.1) contrast(0.9);
|
|
||||||
z-index: 5;
|
|
||||||
p {
|
p {
|
||||||
margin: 0px 0px 0px 12px;
|
display: none;
|
||||||
color: gray;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 6px 12px !important;
|
|
||||||
aspect-ratio: inherit !important;
|
|
||||||
min-width: 200px;
|
|
||||||
border-radius: 6px;
|
|
||||||
&:hover {
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script is:inline>
|
|
||||||
/*
|
|
||||||
@licstart The following is the entire license notice for the
|
|
||||||
JavaScript code in this page.
|
|
||||||
|
|
||||||
Copyright (C) 2024 SudoVanilla
|
|
||||||
|
|
||||||
The JavaScript code in this page is free software: you can
|
|
||||||
redistribute it and/or modify it under the terms of the GNU
|
|
||||||
General Public License (GNU GPL) as published by the Free Software
|
|
||||||
Foundation, either version 3 of the License, or (at your option)
|
|
||||||
any later version. The code is distributed WITHOUT ANY WARRANTY;
|
|
||||||
without even the implied warranty of MERCHANTABILITY or FITNESS
|
|
||||||
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
|
|
||||||
|
|
||||||
As additional permission under GNU GPL version 3 section 7, you
|
|
||||||
may distribute non-source (e.g., minimized or compacted) forms of
|
|
||||||
that code without the copy of the GNU GPL normally required by
|
|
||||||
section 4, provided you include this license notice and a URL
|
|
||||||
through which recipients can access the Corresponding Source.
|
|
||||||
|
|
||||||
|
|
||||||
@licend The above is the entire license notice
|
|
||||||
for the JavaScript code in this page.
|
|
||||||
*/
|
|
||||||
|
|
||||||
function Search() {
|
|
||||||
var SearchQuery = document.querySelector('input[type="search"]').value
|
|
||||||
location.href = `/search?q=${SearchQuery}`
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
:root {
|
||||||
|
--MaxSearchbarWidth: 300px !important;
|
||||||
|
}
|
||||||
header {
|
header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
|
@ -258,51 +187,87 @@ header {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
.header-center {
|
|
||||||
form {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
input {
|
|
||||||
color: white;
|
|
||||||
background: black;
|
|
||||||
border: 2px #333 solid;
|
|
||||||
border-right-color: transparent;
|
|
||||||
border-right-width: 0px;
|
|
||||||
border-radius: 3rem 0px 0px 3rem;
|
|
||||||
padding: 6px 12px;
|
|
||||||
width: 160px;
|
|
||||||
transition: width 0.6s, border 0.3s, transform 0.2s;
|
|
||||||
&:focus {
|
|
||||||
border-radius: 4px;
|
|
||||||
transform: scale(1.2);
|
|
||||||
width: 260px;
|
|
||||||
border-width: 1px;
|
|
||||||
border-right-color: #333;
|
|
||||||
border-right-width: 1px;
|
|
||||||
font-size: 12px;
|
|
||||||
transition: width 0.6s, border 0.3s, transform 0.2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
color: white;
|
|
||||||
background: black;
|
|
||||||
border: 2px #333 solid;
|
|
||||||
border-left: 0px;
|
|
||||||
border-radius: 0px 3rem 3rem 0px;
|
|
||||||
padding: 1px 8px 0px 0px;
|
|
||||||
cursor: var(--pointer-cursor);
|
|
||||||
svg {
|
|
||||||
width: 16px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.header-end {
|
.header-end {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
|
button {
|
||||||
|
background: transparent;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
border-radius: 3rem;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border: 2px rgba(255, 255, 255, 0) solid;
|
||||||
|
backdrop-filter: blur(24px);
|
||||||
|
transition: 0.3s backdrop-filter;
|
||||||
|
svg {
|
||||||
|
width: 16px;
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
backdrop-filter: blur(12px) brightness(0.8);
|
||||||
|
transition: 0.3s backdrop-filter;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
background: transparent;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: text;
|
||||||
|
width: 54px;
|
||||||
|
transition: 1s width;
|
||||||
|
&:hover {
|
||||||
|
width: 64px;
|
||||||
|
transition: 0.3s width;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
width: var(--MaxSearchbarWidth);
|
||||||
|
transition: 0.3s width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button[onclick="FocusSearch()"] {
|
||||||
|
cursor: text !important;
|
||||||
|
* {
|
||||||
|
cursor: text !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.suggestions {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
width: 450px;
|
||||||
|
display: grid;
|
||||||
|
gap: 2px;
|
||||||
|
top: 70px;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 4px;
|
||||||
|
backdrop-filter: blur(24px) brightness(0.5) contrast(0.7);
|
||||||
|
.suggestions a {
|
||||||
|
text-decoration: none !important;
|
||||||
|
padding: 4px 12px !important;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
&:hover {
|
||||||
|
background: #ffffff1f !important;
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes SpinMeRoundBaby {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#search-header-load {
|
||||||
|
animation: 1s SpinMeRoundBaby infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Reference in a new issue