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

fix: Updated to use latest version of component lib and fixed overflow issue on repos page
All checks were successful
Build and Push Development Docker Image / build-and-push (push) Successful in 58s
Details

Browse Source
This commit is contained in:
Luke Else
2025-09-18 20:58:59 +01:00
parent b1944e64d9
commit a83022c46e
3 changed files with 145 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
import { toasts } from 'svelte-toasts';
import { GridGallery, Card, Loading, Section } from '@luke-else/component-lib';
import { GridGallery, Card, Loading, Section, Collapsible } from '@luke-else/component-lib';
let repoImages: Record<string, string | null> = {};
@@ -42,23 +42,25 @@
{#each $repos as repo}
<!-- <Loading /> -->
<Card
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"
containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300"
>
<h2 slot="headerLeft">{repo.name}</h2>
<h2 slot="headerRight" class="text-sm text-gray-500">
{repo.language}
</h2>
<div slot="content">
<div class="relative z-0">
{repo.description}
</div>
<div class="flex flex-col gap-5" slot="content">
{repo.description}
{#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"
/>
<Collapsible>
<span slot="label" class="text-lg">See More</span>
<!-- svelte-ignore a11y_img_redundant_alt -->
<img
slot="content"
src={repoImages[repo.name]}
alt="repo image"
class=""
/>
</Collapsible>
{/if}
</div>
<h3 slot="footerLeft">