This commit is contained in:
Korbs 2024-09-07 02:46:27 -04:00
parent 577645cb32
commit d80d730b4f
8 changed files with 174 additions and 53 deletions

View file

@ -2,7 +2,7 @@
"name": "@minpluto/polestar", "name": "@minpluto/polestar",
"author": "SudoVanilla <korbs@sudovanilla.org>", "author": "SudoVanilla <korbs@sudovanilla.org>",
"type": "module", "type": "module",
"version": "0.0.53", "version": "0.0.54",
"license": "AGPL-3.0-only", "license": "AGPL-3.0-only",
"bugs": { "bugs": {
"url": "https://ark.sudovanilla.org/MinPluto/Polestar/issues", "url": "https://ark.sudovanilla.org/MinPluto/Polestar/issues",

View file

@ -23,10 +23,20 @@ const {
position: relative; position: relative;
color: white; color: white;
text-decoration: none; text-decoration: none;
&:hover {
&::before {
backdrop-filter: blur(0px) contrast(1) brightness(0.8);
transition: 0.6s backdrop-filter;
}
p, span {
opacity: 0.05;
}
}
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
backdrop-filter: blur(12px) contrast(0.8) brightness(0.4); backdrop-filter: blur(12px) contrast(0.8) brightness(0.4);
transition: 0.6s backdrop-filter;
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 100%; width: 100%;

View file

@ -95,7 +95,7 @@ const {
width: 100%; width: 100%;
height: 100%; height: 100%;
backdrop-filter: blur(10px) brightness(0.8) contrast(0.8); backdrop-filter: blur(10px) brightness(0.8) contrast(0.8);
z-index: 1; z-index: 7;
display: none; display: none;
} }
.fl-dialog { .fl-dialog {
@ -103,7 +103,7 @@ const {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 2; z-index: 8;
background: black; background: black;
border-radius: 12px; border-radius: 12px;
border: 1px #3e3e3e solid; border: 1px #3e3e3e solid;

View file

@ -0,0 +1,59 @@
---
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>
</div>
<style lang="scss">
.mobile-navigation {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
background: rgb(24,24,24);
padding: 24px 0px;
text-align: center;
display: flex;
justify-content: space-evenly;
z-index: 10;
height: 100%;
max-height: 80px;
a {
color: white;
text-decoration: none;
display: flex;
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;
}
}
}
</style>

View file

@ -47,6 +47,20 @@ import { Image } from "astro:assets";
</div> </div>
<style lang="scss" is:global> <style lang="scss" is:global>
@media only screen and (max-width: 800px) {
.fl-sidebar {
display: none !important;
}
.content {
margin-left: 0px !important;
padding-bottom: 150px !important;
}
}
@media only screen and (min-width: 800px) {
.mobile-navigation {
display: none !important;
}
}
.fl-sidebar { .fl-sidebar {
background: #121212; background: #121212;
color: white; color: white;
@ -132,7 +146,9 @@ import { Image } from "astro:assets";
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 24px 12px; padding: 24px 12px;
* {margin: 0px} * {
margin: 0px;
}
a { a {
color: white; color: white;
text-decoration: none; text-decoration: none;

View file

@ -25,7 +25,7 @@ import { Image } from 'astro:assets';
<Image src={'https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj'} alt={'Creator Avatar'} inferSize={true} loading="lazy" format="webp"/> <Image src={'https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj'} alt={'Creator Avatar'} inferSize={true} loading="lazy" format="webp"/>
<div> <div>
<p><strong>{Title}</strong></p> <p><strong>{Title}</strong></p>
<p>{Date} - {Views}</p> <span>{Date} - {Views}</span>
</div> </div>
</div> </div>
</a> </a>
@ -67,6 +67,10 @@ import { Image } from 'astro:assets';
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-grid; display: inline-grid;
} }
span {
font-size: 14px;
opacity: 0.5;
}
} }
} }
</style> </style>

View file

@ -1,5 +1,11 @@
--- ---
import { Search, ArrowRight } from "@iconoir/vue"; // Properties
const {
Design = "RoundSquare"
} = Astro.props
// Icons
import { Search } from "@iconoir/vue";
--- ---
<div class="search-field"> <div class="search-field">
@ -8,6 +14,24 @@ import { Search, ArrowRight } from "@iconoir/vue";
<button class="search-field-submit">Go</button> <button class="search-field-submit">Go</button>
</div> </div>
{
()=> {
if (Design === "RoundSquare") {
return <style>
.search-field input {
border-radius: 6px;
}
</style>
} else if (Design === "Pill") {
return <style>
.search-field input {
border-radius: 3rem;
}
</style>
}
}
}
<style lang="scss"> <style lang="scss">
.search-field { .search-field {
display: flex; display: flex;
@ -20,7 +44,6 @@ import { Search, ArrowRight } from "@iconoir/vue";
left: 0px; left: 0px;
height: 100%; height: 100%;
width: -moz-available; width: -moz-available;
border-radius: 3rem;
border: 1px #3b3b3b solid; border: 1px #3b3b3b solid;
background: #282828; background: #282828;
color: white; color: white;

View file

@ -5,6 +5,8 @@ import {
} from '../../../package.json' } from '../../../package.json'
// Components // Components
import { Tooltips } from 'astro-tooltips';
import Comment from '../../../src/Comment.astro' import Comment from '../../../src/Comment.astro'
import SidebarCreator from '../../../src/SidebarCreator.astro' import SidebarCreator from '../../../src/SidebarCreator.astro'
import Dialog from '../../../src/Dialog.astro' import Dialog from '../../../src/Dialog.astro'
@ -12,6 +14,7 @@ import Sidebar from '../../../src/Sidebar.astro'
import Video from '../../../src/VideoItem.astro' import Video from '../../../src/VideoItem.astro'
import Category from '../../../src/Category.astro' import Category from '../../../src/Category.astro'
import SearchField from '../../../src/search/Field.astro' import SearchField from '../../../src/search/Field.astro'
import MobileNavigation from '../../../src/MobileNavigation.astro'
// Data // Data
/// Fetch Categories for YouTube /// Fetch Categories for YouTube
@ -53,9 +56,13 @@ import {
LogOut, LogOut,
OpenInBrowser OpenInBrowser
} from '@iconoir/vue' } from '@iconoir/vue'
import { Search } from '@iconoir/vue'
--- ---
<head>
<meta charset="UTF-8">
<meta name="theme-color" content="#000000">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
<Tooltips interactive={false} delay={[15, 10]} />
</head>
<Dialog <Dialog
Name="dialog-id-thingie" Name="dialog-id-thingie"
@ -71,6 +78,8 @@ import { Search } from '@iconoir/vue'
</slot> </slot>
</Dialog> </Dialog>
<MobileNavigation/>
<Sidebar <Sidebar
ShowHeader ShowHeader
LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200" LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200"
@ -79,8 +88,8 @@ import { Search } from '@iconoir/vue'
Version={version} Version={version}
> >
<slot slot="header-items"> <slot slot="header-items">
<a href="#"><InputSearch/></a> <a title="Search" href="#"><InputSearch/></a>
<a href="#"><ProfileCircle/></a> <a title="Your Account" href="#"><ProfileCircle/></a>
</slot> </slot>
<slot slot="top-items"> <slot slot="top-items">
<a href="#"><PlanetAlt/> Home</a> <a href="#"><PlanetAlt/> Home</a>
@ -114,14 +123,53 @@ import { Search } from '@iconoir/vue'
</slot> </slot>
<slot slot="footer-items"> <slot slot="footer-items">
<a href="#"><LogOut/></a> <a title="Log Out" href="#"><LogOut/></a>
<a href="#"><Settings/></a> <a title="Settings" href="#"><Settings/></a>
</slot> </slot>
</Sidebar> </Sidebar>
<div class="content"> <div class="content">
<div style="margin: auto;width: 360px;padding: 64px;"> <div style="margin: auto;width: 360px;padding: 64px;">
<SearchField/> <SearchField Design="Pill"/>
</div>
<br/>
<br/>
<br/>
<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px;">
{TrendingSplit.map((category) =>
<Category
Name="Trending"
Link="#"
Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
Platform="YouTube"
/>
)}
{MoviesSplit.map((category) =>
<Category
Name="Trailers"
Link="#"
Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
Platform="YouTube"
/>
)}
{MusicSplit.map((category) =>
<Category
Name="Music"
Link="#"
Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
Platform="YouTube"
/>
)}
{GamingSplit.map((category) =>
<Category
Name="Gaming"
Link="#"
Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
Platform="YouTube"
/>
)}
</div> </div>
<br/> <br/>
@ -183,45 +231,6 @@ import { Search } from '@iconoir/vue'
<br/> <br/>
<br/> <br/>
<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px;">
{TrendingSplit.map((category) =>
<Category
Name="Trending"
Link="#"
Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
Platform="YouTube"
/>
)}
{MoviesSplit.map((category) =>
<Category
Name="Trailers"
Link="#"
Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
Platform="YouTube"
/>
)}
{MusicSplit.map((category) =>
<Category
Name="Music"
Link="#"
Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
Platform="YouTube"
/>
)}
{GamingSplit.map((category) =>
<Category
Name="Gaming"
Link="#"
Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
Platform="YouTube"
/>
)}
</div>
<br/>
<br/>
<br/>
<Comment <Comment
Avatar="https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj" Avatar="https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj"
Username="The Linux Experiment" Username="The Linux Experiment"