github-mirrors/netris-nestri
1
0
Fork 0
mirror of https://github.com/nestriness/nestri.git synced 2025-12-11 00:05:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix: Fix loading animation for images

Browse Source
This commit is contained in:
Wanjohi
2024-09-15 01:02:42 +03:00
parent 0696c9fc60
commit b1f35c9953
3 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/www/src/routes/index.tsx
View File

@@ -180,6 +180,7 @@ export default component$(() => {
{games.map((game, index) => (
game.titleWidth ? (
<Card
class={"bg-white aspect-[2/3] relative hover:ring-primary-500 focus:ring-primary-500 dark:bg-black rounded-md overflow-hidden block hover:!rotate-0 focus:!rotate-0 hover:scale-[1.17] focus:!scale-[1.17] hover:!z-10 focus:!z-10 outline-none shadow-lg shadow-gray-300 dark:shadow-gray-700 ring-2 ring-gray-300 dark:ring-gray-700 transition-all duration-200"}
key={game.title}
style={{
zIndex: 1 + index,

19
packages/ui/src/card.tsx
View File

@@ -3,7 +3,7 @@ import { Modal, Portal } from "@nestri/ui";
import { cn } from "@nestri/ui/design"
import { BasicImageLoader } from "./image";
interface Props extends PropsOf<"button"> {
interface Props extends PropsOf<"div"> {
game: {
name: string;
id: number;
@@ -37,11 +37,13 @@ export const Card = component$(({ titleWidth, titleHeight, game, size, ...props
});
return (
<Modal.Root class="w-full">
<Modal.Root
class="w-full"
{...(props as any)}>
{size === "large" ? (
<Modal.Trigger
class="min-w-[250px] h-[350px] lg:flex-row flex-col group overflow-hidden hover:ring-primary-500 focus:ring-primary-500 outline-none cursor-pointer backdrop-blur-sm select-none w-full group rounded-[20px] duration-200 flex transition-all gap-2 px-4 py-3 ring-[3px] ring-gray-200 dark:ring-gray-800 text-gray-900/70 dark:text-gray-100/70 bg-gray-200/70 dark:bg-gray-800/70"
{...props}>
>
<header class="flex gap-4 lg:w-1/3 h-full w-full justify-between p-4">
<div class="flex flex-col gap-4 text-left h-full justify-between relative overflow-hidden p-4" >
<div class="flex flex-col gap-2">
@@ -77,7 +79,7 @@ export const Card = component$(({ titleWidth, titleHeight, game, size, ...props
</Modal.Trigger>) : size == "small" ? (
<Modal.Trigger
class="min-w-[250px] group hover:ring-primary-500 focus:ring-primary-500 outline-none cursor-pointer backdrop-blur-sm select-none w-full group rounded-[20px] duration-200 flex flex-col ring-gray-800/70 transition-all gap-2 px-4 py-3 ring-[3px] ring-neutral-200 dark:ring-gray-800 text-gray-900/70 dark:text-gray-100/70 bg-gray-200/70 dark:bg-gray-800/70"
{...props}>
>
<header class="flex gap-4 max-w-full justify-between p-4">
<div class="flex relative pr-[22px] overflow-hidden overflow-ellipsis whitespace-nowrap" >
<h3 class="overflow-hidden overflow-ellipsis whitespace-nowrap">{game.name}</h3>
@@ -85,7 +87,7 @@ export const Card = component$(({ titleWidth, titleHeight, game, size, ...props
</header>
<section class="flex justify-center items-center w-full pb-7">
<BasicImageLoader
class="rounded-2xl ring-2 aspect-[2/3] w-full max-w-[90%] ring-gray-900/70 group-hover:scale-105 group-focus:scale-105 duration-200 transition-transform shadow-2xl shadow-gray-950"
class="rounded-2xl ring-2 w-full max-w-[90%] ring-gray-900/70 group-hover:scale-105 group-focus:scale-105 duration-200 transition-transform shadow-2xl shadow-gray-950"
width={230}
height={345}
src={imageUrl}
@@ -94,11 +96,8 @@ export const Card = component$(({ titleWidth, titleHeight, game, size, ...props
</section>
</Modal.Trigger>
) : (
<Modal.Trigger
class={"aspect-[2/3] bg-white relative hover:ring-primary-500 focus:ring-primary-500 dark:bg-black rounded-md overflow-hidden block hover:!rotate-0 focus:!rotate-0 hover:scale-[1.17] focus:!scale-[1.17] hover:!z-10 focus:!z-10 outline-none shadow-lg shadow-gray-300 dark:shadow-gray-700 ring-2 ring-gray-300 dark:ring-gray-700 transition-all duration-200"}
{...props}
>
<BasicImageLoader width={600} height={900} src={imageUrl} alt={game.name} />
<Modal.Trigger class="w-full h-full">
<BasicImageLoader width={251} height={314} src={imageUrl} alt={game.name} />
</Modal.Trigger>
)}
<Modal.Panel

11
packages/ui/src/image/basic-image-loader.tsx
View File

@@ -73,11 +73,12 @@ export const BasicImageLoader = component$((props: ImageLoaderProps) => {
<>
{!imageLoaded.value && !hasError.value && (
<div
class={cn("relative x-[20] inset-0 h-full loading-animation bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-800 dark:via-gray-900 dark:to-gray-800", props.class)}
style={{
height: props.height,
aspectRatio: props.width && props.height ? `${props.width} / ${props.height}` : 'auto'
}}
class={
cn(
" w-full h-full loading-animation bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-800 dark:via-gray-900 dark:to-gray-800",
props.class
)
}
/>
)}
<img