CHORE: Fixed loading icon and added it into REPOS page.
This commit is contained in:
parent
25f3db52ec
commit
2d3046da48
@ -21,21 +21,21 @@
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
animation: rotate-one 1s linear infinite;
|
||||
border-bottom: 3px solid var(--fg);
|
||||
border-bottom: 3px solid gray;
|
||||
}
|
||||
|
||||
.inner.two {
|
||||
right: 0%;
|
||||
top: 0%;
|
||||
animation: rotate-two 1s linear infinite;
|
||||
border-right: 3px solid var(--fg);
|
||||
border-right: 3px solid gray;
|
||||
}
|
||||
|
||||
.inner.three {
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
animation: rotate-three 1s linear infinite;
|
||||
border-top: 3px solid var(--fg);
|
||||
border-top: 3px solid gray;
|
||||
}
|
||||
|
||||
@keyframes rotate-one {
|
||||
|
@ -1,9 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { loadRepos, repos } from '$lib/stores'; import { onMount } from 'svelte';
|
||||
import { loadRepos, repos } from '$lib/stores';
|
||||
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
|
||||
import { toasts } from 'svelte-toasts';
|
||||
|
||||
import FlexGallery from '$lib/components/FlexGallery.svelte';
|
||||
import Card from '$lib/components/Cards/Card.svelte';
|
||||
import Loading from '$lib/components/Loading.svelte';
|
||||
|
||||
let repoImages: Record<string, string | null> = {};
|
||||
|
||||
@ -18,29 +20,46 @@
|
||||
}
|
||||
})();
|
||||
}
|
||||
|
||||
onMount(loadRepos);
|
||||
</script>
|
||||
|
||||
<FlexGallery>
|
||||
{#each $repos as repo}
|
||||
<Card
|
||||
headerLeft={repo.name}
|
||||
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 loadRepos()}
|
||||
<Loading />
|
||||
{:then _}
|
||||
{#if $repos.length == 0}
|
||||
{console.log("No Repos")}
|
||||
<div style="display: none;">
|
||||
{toasts.add({
|
||||
title: 'Error',
|
||||
description: 'Failed to load repositories',
|
||||
duration: 5000,
|
||||
type: 'error',
|
||||
placement: 'bottom-center',
|
||||
showProgress: true
|
||||
})}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Repositories loaded successfully -->
|
||||
<FlexGallery>
|
||||
{#each $repos as repo}
|
||||
<!-- <Loading /> -->
|
||||
<Card
|
||||
headerLeft={repo.name}
|
||||
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}
|
||||
|
Loading…
x
Reference in New Issue
Block a user