This commit is contained in:
Korbs 2024-11-25 16:32:37 -05:00
parent 8226128d8a
commit adc1a70b34
9 changed files with 50 additions and 73 deletions

View file

@ -3,6 +3,7 @@ export { default as Comment } from "./src/Comment.astro"
export { default as Dialog } from "./src/Dialog.astro"
export { default as MobileNavigation } from "./src/MobileNavigation.astro"
export { default as Search } from "./src/search/Field.astro"
export { default as SearchField} from "./src/search/Field.astro"
export { default as Sidebar } from "./src/Sidebar.astro"
export { default as SidebarCreator } from "./src/SidebarCreator.astro"
export { default as VideoItem } from "./src/VideoItem.astro"

View file

@ -1,12 +1,11 @@
{
"name": "@minpluto/polestar",
"author": "SudoVanilla <korbs@sudovanilla.org>",
"author": "SudoVanilla",
"type": "module",
"version": "0.0.55",
"version": "0.0.60",
"license": "AGPL-3.0-only",
"bugs": {
"url": "https://ark.sudovanilla.org/MinPluto/Polestar/issues",
"email": "support@minpluto.org"
},
"funding": [
{

View file

@ -88,6 +88,28 @@ const {
</div>
<style lang="scss" is:inline>
@media only screen and (max-width: 800px) {
.fl-dialog {
bottom: 0px !important;
top: inherit !important;
transform: inherit !important;
left: 0px !important;
padding: 24px 0px !important;
border-radius: 24px 24px 0px 0px !important;
background: #171717 !important;
h2 {
font-size: 32px !important;
}
p {
font-size: 24px !important;
}
a, button {
font-size: 24px !important;
border-radius: 3rem !important;
padding: 16px 32px !important;
}
}
}
.fl-dialog-backdrop {
position: fixed;
top: 0px;

View file

@ -1,59 +1,30 @@
---
import { HomeSimple, Safari, List, Settings } from "@iconoir/vue";
---
<div class="mobile-navigation">
<a href="#"><HomeSimple /> Home</a>
<a href="#"><Safari /> Discover</a>
<a href="#"><List /> Subscription</a>
<a href="#"><Settings /> Settings</a>
<slot name="items"/>
</div>
<style lang="scss">
<style lang="scss" is:global>
.mobile-navigation {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
background: rgb(24,24,24);
padding: 24px 0px;
text-align: center;
display: flex;
color: white;
backdrop-filter: blur(24px) brightness(0.2) contrast(0.8);
padding: 0px;
z-index: 5;
display: grid;
grid-template-columns: auto auto auto auto;
justify-items: stretch;
align-items: baseline;
justify-content: space-evenly;
z-index: 10;
height: 100%;
max-height: 80px;
a {
color: white;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 12px 4px 12px 16px;
border-radius: 3rem;
font-size: 0px;
transition: 0.3s background, 0.3s padding, 0.3s font-size;
&:hover {
color: black;
background: white;
padding: 12px 16px;
font-size: 32px;
transition: 0.3s background, 0.3s padding, 0.3s font-size;
svg {
width: 32px;
height: 32px;
background: rgb(24,24,24);
border-radius: 3rem;
padding: 12px;
transition: 0.3s width, 0.3s height, 0.4s padding, 0.5 background;
color: white;
}
}
svg {
width: 48px;
height: 48px;
transition: 0.3s width, 0.3s height, 0.4s padding, 0.5 background;
}
padding: 24px 0px;
}
}
</style>

View file

@ -136,7 +136,6 @@ import { Image } from "astro:assets";
}
&:hover {
background: #3c3c3c;
border: 1px #5c5c5c solid;
}
}
}
@ -162,7 +161,6 @@ import { Image } from "astro:assets";
}
&:hover {
background: #3c3c3c;
border: 1px #5c5c5c solid;
}
}
}

View file

@ -9,7 +9,6 @@ const {
// Components
import { Image } from "astro:assets";
---
<a href={Link} class="fl-sidebar-creator">

View file

@ -17,7 +17,7 @@ import { Image } from 'astro:assets';
<a href={"/watch?v=" + VideoId} class="fl-vi">
<div class="fl-vi-thumbnail">
<Image src={Thumbnail} alt={'Thumbnail'} inferSize={true} loading="lazy" format="webp"/>
<Image src={Thumbnail} alt={'Thumbnail'} inferSize={true} loading="eagerly" format="webp"/>
<!-- <p>{Platform}</p> -->
<p>{Length}</p>
</div>
@ -61,7 +61,7 @@ import { Image } from 'astro:assets';
border-radius: 3rem;
}
strong {
max-width: 340px;
max-width: 100%;
overflow: hidden;
white-space: wrap;
text-overflow: ellipsis;

View file

@ -37,7 +37,6 @@ import { Search } from "@iconoir/vue";
display: flex;
align-items: center;
position: relative;
max-width: 360px;
input {
position: absolute;
top: 0px;

View file

@ -16,25 +16,6 @@ import Category from '../../../src/Category.astro'
import SearchField from '../../../src/search/Field.astro'
import MobileNavigation from '../../../src/MobileNavigation.astro'
// Data
/// Fetch Categories for YouTube
const TrendingFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending'
const TrendingResponse = await fetch(TrendingFetch)
const TrendingData = await TrendingResponse.json()
const MoviesFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending?type=movies'
const MoviesResponse = await fetch(MoviesFetch)
const MoviesData = await MoviesResponse.json()
const MusicFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending?type=music'
const MusicResponse = await fetch(MusicFetch)
const MusicData = await MusicResponse.json()
const GamingFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending?type=gaming'
const GamingResponse = await fetch(GamingFetch)
const GamingData = await GamingResponse.json()
// Icons
import {
InputSearch,
@ -73,11 +54,18 @@ import {
</slot>
</Dialog>
<MobileNavigation/>
<MobileNavigation>
<slot slot="items">
<a href="#"><PlanetAlt/> Home</a>
<a href="#"><MediaVideoList/> Feed</a>
<a href="#" onclick="OpenExampleDialog()"><OpenInBrowser/> Open Dialog</a>
<a href="#"><Settings/> Settings</a>
</slot>
</MobileNavigation>
<Sidebar
ShowHeader
LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200"
LogoPath="https://md.sudovanilla.org/images/minpluto-2024.png"
ShowVersion
FooterLinks
Version={version}
@ -124,7 +112,7 @@ import {
</Sidebar>
<div class="content">
<div style="margin: auto;width: 360px;padding: 64px;">
<div style="margin: auto;padding: 64px;">
<SearchField Design="Pill"/>
</div>