Add skeleton for videos
This commit is contained in:
Korbs
parent
5a94203168
commit
cf579e0508
1 changed files with 45 additions and 15 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue