MinPluto/Polestar
MinPluto/Polestar
1
Fork 0
Code Issues Pull requests Activity

Add skeleton for videos

Browse source
This commit is contained in:
Korbs 2024-09-05 15:56:50 -04:00
parent 5a94203168
commit cf579e0508
1 changed files with 45 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
test/src/pages/index.astro
View file

@ -1,7 +1,12 @@
---
// Information
import {
version
} from '../../../package.json'
// Components
import Comment from '../../../src/Comment.astro'
import Creator from '../../../src/Creator.astro'
import SidebarCreator from '../../../src/SidebarCreator.astro'
import Dialog from '../../../src/Dialog.astro'
import Sidebar from '../../../src/Sidebar.astro'
import Video from '../../../src/VideoItem.astro'
@ -10,9 +15,6 @@ import Video from '../../../src/VideoItem.astro'
import {
InputSearch,
ProfileCircle,
Group,
Circle,
GitFork,
GraphUp,
Movie,
MusicDoubleNote,
@ -22,8 +24,8 @@ import {
PlanetAlt,
Settings,
MediaVideoList,
LogOut,
OpenInBrowser
LogOut,
OpenInBrowser
} from '@iconoir/vue'
---
@ -47,6 +49,7 @@ OpenInBrowser
LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200"
ShowVersion
FooterLinks
Version={version}
>
<slot slot="header-items">
<a href="#"><InputSearch/></a>
@ -67,7 +70,7 @@ OpenInBrowser
<h2>Project Demo</h2>
<a href="#" onclick="OpenExampleDialog()"><OpenInBrowser/> Open Dialog</a>
<h2>Creators</h2>
<Creator
<SidebarCreator
Avatar="https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj"
Name="The Linux Experiment"
Link="#"
@ -78,7 +81,7 @@ OpenInBrowser
<div class="fl-sk-circle"></div>
<div class="fl-sk-text"></div>
</div>
</Creator>
</SidebarCreator>
</slot>
<slot slot="bottom-items">
@ -95,32 +98,50 @@ OpenInBrowser
VideoId="PuGeR075MkE"
CreatorId="UC5UAwBUum7CPN5buc-_N1Fw"
Title="Immutable Linux, without the hassle? Vanilla OS 2 Orchid"
Thumbnail="https://ipx.sudovanilla.org/https://inv.tux.pizza/vi/PuGeR075MkE/mqdefault.jpg"
Thumbnail="https://ipx.sudovanilla.org/https://yt.sudovanilla.org/vi/PuGeR075MkE/mqdefault.jpg"
Date="2 weeks ago"
Views="71K"
Length="16:10"
Platform="YouTube"
/>
server:defer
>
<div style="display: flex; flex-direction: column; align-items: left; gap: 12px; padding: 0px 12px;" slot="fallback">
<div class="fl-sk-video"></div>
<div class="fl-sk-text"></div>
</div>
</Video>
<Video
VideoId="urC7PKlM3Qo"
CreatorId="UC5UAwBUum7CPN5buc-_N1Fw"
Title="Nvidia pilfers Youtube for AI, GNOME HDR, Immutable Manjaro: Linux & Open Source News"
Thumbnail="https://ipx.sudovanilla.org/https://inv.tux.pizza/vi/urC7PKlM3Qo/mqdefault.jpg"
Thumbnail="https://ipx.sudovanilla.org/https://yt.sudovanilla.org/vi/urC7PKlM3Qo/mqdefault.jpg"
Date="1 weeks ago"
Views="43K"
Length="19:57"
Platform="YouTube"
/>
server:defer
>
<div style="display: flex; flex-direction: column; align-items: left; gap: 12px; padding: 0px 12px;" slot="fallback">
<div class="fl-sk-video"></div>
<div class="fl-sk-text"></div>
</div>
</Video>
<Video
VideoId="YFr5E2C5ex8"
CreatorId="UC5UAwBUum7CPN5buc-_N1Fw"
Title="COSMIC Desktop ALPHA: a unique & important project for Linux!"
Thumbnail="https://ipx.sudovanilla.org/https://inv.tux.pizza/vi/YFr5E2C5ex8/mqdefault.jpg"
Thumbnail="https://ipx.sudovanilla.org/https://yt.sudovanilla.org/vi/YFr5E2C5ex8/mqdefault.jpg"
Date="2 weeks ago"
Views="101K"
Length="31:18"
Platform="YouTube"
/>
server:defer
>
<div style="display: flex; flex-direction: column; align-items: left; gap: 12px; padding: 0px 12px;" slot="fallback">
<div class="fl-sk-video"></div>
<div class="fl-sk-text"></div>
</div>
</Video>
</div>
<br/>
@ -145,11 +166,20 @@ body {
font-family: Arial, Helvetica, sans-serif;
}
.content {
margin-left: 300px;
margin-left: 260px;
padding: 12px;
}
</style>
<style is:global>
.fl-sk-video {
height: 183px;
width: 100%;
background-image: linear-gradient(90deg, #323232 0px, #4c4c4c 40px, #323232 80px);
background-size: 600px;
animation: load 2s linear infinite;
border-radius: 6px;
}
.fl-sk-circle {
height: 32px;
width: 32px;