luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: luke-else:b586385d6d0094fc6837285b0c450a49e03bd501
Branches Tags
luke-else:main
luke-else:chore/software-testing
luke-else:development
..
compare: luke-else:79f6e8e90b9218442480d67d1907bd3e61f7d4ef
Branches Tags
luke-else:chore/software-testing
luke-else:main
luke-else:development

No commits in common. "b586385d6d0094fc6837285b0c450a49e03bd501" and "79f6e8e90b9218442480d67d1907bd3e61f7d4ef" have entirely different histories.
b586385d6d ... 79f6e8e90b

2 changed files with 28 additions and 47 deletions
Show Stats Expand all files Collapse all files

6
src/lib/components/Loading.svelte
View File

@ -21,21 +21,21 @@
left: 0%; left: 0%;
top: 0%; top: 0%;
animation: rotate-one 1s linear infinite; animation: rotate-one 1s linear infinite;
border-bottom: 3px solid gray; border-bottom: 3px solid var(--fg);
} }
.inner.two { .inner.two {
right: 0%; right: 0%;
top: 0%; top: 0%;
animation: rotate-two 1s linear infinite; animation: rotate-two 1s linear infinite;
border-right: 3px solid gray; border-right: 3px solid var(--fg);
} }
.inner.three { .inner.three {
right: 0%; right: 0%;
bottom: 0%; bottom: 0%;
animation: rotate-three 1s linear infinite; animation: rotate-three 1s linear infinite;
border-top: 3px solid gray; border-top: 3px solid var(--fg);
} }
@keyframes rotate-one { @keyframes rotate-one {

69
src/routes/repos/+page.svelte
View File

@ -1,11 +1,9 @@
<script lang="ts"> <script lang="ts">
import { loadRepos, repos } from '$lib/stores'; import { loadRepos, repos } from '$lib/stores'; import { onMount } from 'svelte';
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git'; import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
import { toasts } from 'svelte-toasts';
import FlexGallery from '$lib/components/FlexGallery.svelte'; import FlexGallery from '$lib/components/FlexGallery.svelte';
import Card from '$lib/components/Cards/Card.svelte'; import Card from '$lib/components/Cards/Card.svelte';
import Loading from '$lib/components/Loading.svelte';
let repoImages: Record<string, string | null> = {}; let repoImages: Record<string, string | null> = {};
@ -20,46 +18,29 @@
} }
})(); })();
} }
onMount(loadRepos);
</script> </script>
{#await loadRepos()} <FlexGallery>
<Loading /> {#each $repos as repo}
{:then _} <Card
{#if $repos.length == 0} headerLeft={repo.name}
{console.log("No Repos")} headerRight={repo.language}
<div style="display: none;"> footer={timeSince(repo.updated_at)}
{toasts.add({ containerStyle="group relative flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300 overflow-hidden"
title: 'Error', >
description: 'Failed to load repositories', <div class="relative z-0">
duration: 5000, {repo.description}
type: 'error', </div>
placement: 'bottom-center', {#if repoImages[repo.name]}
showProgress: true <!-- svelte-ignore a11y_img_redundant_alt -->
})} <img
</div> src={repoImages[repo.name]}
{/if} alt="repo image"
<!-- Repositories loaded successfully --> class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
<FlexGallery> />
{#each $repos as repo} {/if}
<!-- <Loading /> --> </Card>
<Card {/each}
headerLeft={repo.name} </FlexGallery>
headerRight={repo.language}
footer={timeSince(repo.updated_at)}
containerStyle="group relative flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300 overflow-hidden"
>
<div class="relative z-0">
{repo.description}
</div>
{#if repoImages[repo.name]}
<!-- svelte-ignore a11y_img_redundant_alt -->
<img
src={repoImages[repo.name]}
alt="repo image"
class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
/>
{/if}
</Card>
{/each}
</FlexGallery>
{/await}