update
This commit is contained in:
Korbs
parent
577645cb32
commit
d80d730b4f
8 changed files with 174 additions and 53 deletions
|
|
@ -2,7 +2,7 @@
|
|||
"name": "@minpluto/polestar",
|
||||
"author": "SudoVanilla <korbs@sudovanilla.org>",
|
||||
"type": "module",
|
||||
"version": "0.0.53",
|
||||
"version": "0.0.54",
|
||||
"license": "AGPL-3.0-only",
|
||||
"bugs": {
|
||||
"url": "https://ark.sudovanilla.org/MinPluto/Polestar/issues",
|
||||
|
|
|
|||
|
|
@ -23,10 +23,20 @@ const {
|
|||
position: relative;
|
||||
color: white;
|
||||
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 {
|
||||
content: "";
|
||||
position: absolute;
|
||||
backdrop-filter: blur(12px) contrast(0.8) brightness(0.4);
|
||||
transition: 0.6s backdrop-filter;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ const {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(10px) brightness(0.8) contrast(0.8);
|
||||
z-index: 1;
|
||||
z-index: 7;
|
||||
display: none;
|
||||
}
|
||||
.fl-dialog {
|
||||
|
|
@ -103,7 +103,7 @@ const {
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
z-index: 8;
|
||||
background: black;
|
||||
border-radius: 12px;
|
||||
border: 1px #3e3e3e solid;
|
||||
|
|
|
|||
59
src/MobileNavigation.astro
Normal file
59
src/MobileNavigation.astro
Normal 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>
|
||||
|
|
@ -47,6 +47,20 @@ import { Image } from "astro:assets";
|
|||
</div>
|
||||
|
||||
<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 {
|
||||
background: #121212;
|
||||
color: white;
|
||||
|
|
@ -132,7 +146,9 @@ import { Image } from "astro:assets";
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24px 12px;
|
||||
* {margin: 0px}
|
||||
* {
|
||||
margin: 0px;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
<div>
|
||||
<p><strong>{Title}</strong></p>
|
||||
<p>{Date} - {Views}</p>
|
||||
<span>{Date} - {Views}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -67,6 +67,10 @@ import { Image } from 'astro:assets';
|
|||
text-overflow: ellipsis;
|
||||
display: inline-grid;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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">
|
||||
|
|
@ -8,6 +14,24 @@ import { Search, ArrowRight } from "@iconoir/vue";
|
|||
<button class="search-field-submit">Go</button>
|
||||
</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">
|
||||
.search-field {
|
||||
display: flex;
|
||||
|
|
@ -20,7 +44,6 @@ import { Search, ArrowRight } from "@iconoir/vue";
|
|||
left: 0px;
|
||||
height: 100%;
|
||||
width: -moz-available;
|
||||
border-radius: 3rem;
|
||||
border: 1px #3b3b3b solid;
|
||||
background: #282828;
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import {
|
|||
} from '../../../package.json'
|
||||
|
||||
// Components
|
||||
import { Tooltips } from 'astro-tooltips';
|
||||
|
||||
import Comment from '../../../src/Comment.astro'
|
||||
import SidebarCreator from '../../../src/SidebarCreator.astro'
|
||||
import Dialog from '../../../src/Dialog.astro'
|
||||
|
|
@ -12,6 +14,7 @@ import Sidebar from '../../../src/Sidebar.astro'
|
|||
import Video from '../../../src/VideoItem.astro'
|
||||
import Category from '../../../src/Category.astro'
|
||||
import SearchField from '../../../src/search/Field.astro'
|
||||
import MobileNavigation from '../../../src/MobileNavigation.astro'
|
||||
|
||||
// Data
|
||||
/// Fetch Categories for YouTube
|
||||
|
|
@ -53,9 +56,13 @@ import {
|
|||
LogOut,
|
||||
OpenInBrowser
|
||||
} 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
|
||||
Name="dialog-id-thingie"
|
||||
|
|
@ -71,6 +78,8 @@ import { Search } from '@iconoir/vue'
|
|||
</slot>
|
||||
</Dialog>
|
||||
|
||||
<MobileNavigation/>
|
||||
|
||||
<Sidebar
|
||||
ShowHeader
|
||||
LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200"
|
||||
|
|
@ -79,8 +88,8 @@ import { Search } from '@iconoir/vue'
|
|||
Version={version}
|
||||
>
|
||||
<slot slot="header-items">
|
||||
<a href="#"><InputSearch/></a>
|
||||
<a href="#"><ProfileCircle/></a>
|
||||
<a title="Search" href="#"><InputSearch/></a>
|
||||
<a title="Your Account" href="#"><ProfileCircle/></a>
|
||||
</slot>
|
||||
<slot slot="top-items">
|
||||
<a href="#"><PlanetAlt/> Home</a>
|
||||
|
|
@ -114,14 +123,53 @@ import { Search } from '@iconoir/vue'
|
|||
|
||||
</slot>
|
||||
<slot slot="footer-items">
|
||||
<a href="#"><LogOut/></a>
|
||||
<a href="#"><Settings/></a>
|
||||
<a title="Log Out" href="#"><LogOut/></a>
|
||||
<a title="Settings" href="#"><Settings/></a>
|
||||
</slot>
|
||||
</Sidebar>
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
<br/>
|
||||
|
|
@ -183,45 +231,6 @@ import { Search } from '@iconoir/vue'
|
|||
<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
|
||||
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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue