blade/materialious
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor style changes

Browse Source
This commit is contained in:
WardPearce
2024-03-15 23:16:47 +13:00
parent a597e7e889
commit 53a19f7af5
3 changed files with 52 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
materialious/src/lib/Thumbnail.svelte
+46 -44
View File
@@ -32,49 +32,51 @@
});
</script>
<article class="no-padding transparent" style="width: 100%;">
<a class="wave" style="width: 100%; overflow: hidden;" href={`/watch/${video.videoId}`}>
{#if loading}
<progress class="circle"></progress>
{:else if loaded}
<img
class="responsive"
style="object-fit: crop;"
src={video.videoThumbnails[3].url}
alt="Thumbnail for video"
/>
{:else}
<p>Failed to load image</p>
{/if}
{#if !('liveVideo' in video) || !video.liveVideo}
<div class="absolute right bottom small-margin black white-text small-text">
&nbsp;{videoLength(video.lengthSeconds)}&nbsp;
<a
class="wave"
style="width: 100%; overflow: hidden;min-height:100px;"
href={`/watch/${video.videoId}`}
>
{#if loading}
<progress class="circle"></progress>
{:else if loaded}
<img
class="responsive"
style="max-width: 100%;height: 100%;"
src={video.videoThumbnails[4].url}
alt="Thumbnail for video"
/>
{:else}
<p>Failed to load image</p>
{/if}
{#if !('liveVideo' in video) || !video.liveVideo}
<div class="absolute right bottom small-margin black white-text small-text">
&nbsp;{videoLength(video.lengthSeconds)}&nbsp;
</div>
{:else}
<div
class="absolute right bottom small-margin red white-text small-text"
style="padding: 0 1em;"
>
LIVE
</div>
{/if}
</a>
<div class="small-padding">
{#if localStorage.getItem(video.videoId)}
<progress value={localStorage.getItem(video.videoId)} max={video.lengthSeconds}></progress>
{/if}
<nav class="no-margin">
<div class="max">
<a href={`/watch/${video.videoId}`}><div class="bold">{truncate(video.title)}</div></a>
<div>
<a href={`/channel/${video.authorId}`}>{video.author}</a>{#if !('publishedText' in video)}
&nbsp;• {video.viewCountText}{/if}
</div>
{:else}
<div
class="absolute right bottom small-margin red white-text small-text"
style="padding: 0 1em;"
>
LIVE
</div>
{/if}
</a>
<div class="small-padding">
{#if localStorage.getItem(video.videoId)}
<progress value={localStorage.getItem(video.videoId)} max={video.lengthSeconds}></progress>
{/if}
<nav class="no-margin">
<div class="max">
<a href={`/watch/${video.videoId}`}><div class="bold">{truncate(video.title)}</div></a>
{#if 'publishedText' in video}
<div>
<a href={`/channel/${video.authorId}`}>{video.author}</a>{#if !('publishedText' in video)}
&nbsp;• {video.viewCountText}{/if}
</div>
{#if 'publishedText' in video}
<div>
{cleanNumber(video.viewCount)} • {video.publishedText}
</div>{/if}
</div>
</nav>
</div>
</article>
{cleanNumber(video.viewCount)} • {video.publishedText}
</div>{/if}
</div>
</nav>
</div>
materialious/src/lib/VideoList.svelte
+3 -17
View File
@@ -1,6 +1,4 @@
<script lang="ts">
import { get } from 'svelte/store';
import { activePage } from '../store';
import type { Video, VideoBase } from './Api/model';
import PageLoading from './PageLoading.svelte';
import Thumbnail from './Thumbnail.svelte';
@@ -8,17 +6,15 @@
export let videos: VideoBase[] | Video[] | Notification[] = [];
</script>
<h2>{get(activePage)}</h2>
<div class="divider"></div>
{#if videos.length > 0}
<div class="page right active">
<div class="space"></div>
<div class="grid">
{#each videos as video}
<div class="s12 m6 l2">
<Thumbnail {video} />
<article class="no-padding" style="height: 100%;">
<Thumbnail {video} />
</article>
</div>
{/each}
</div>
@@ -26,13 +22,3 @@
{:else}
<PageLoading />
{/if}
<style>
h2 {
color: var(--secondary-text);
padding: 0.2em;
text-transform: capitalize;
display: flex;
justify-content: center;
}
</style>
materialious/src/routes/watch/[slug]/+page.svelte
+3 -1
View File
@@ -170,7 +170,9 @@
</div>
<div class="s12 m12 l2">
{#each data.video.recommendedVideos as recommendedVideo}
<Thumbnail video={recommendedVideo} />
<article class="no-padding">
<Thumbnail video={recommendedVideo} />
</article>
{/each}
</div>
</div>