Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-16 16:20:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve UI

Browse Source
This commit is contained in:
grimsi
2025-06-14 13:20:50 +02:00
parent cfc499ff54
commit dd64713448
2 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gameyfin/src/main/frontend/components/general/modals/GameCoverPickerModal.tsx
+26 -14
View File
@@ -71,22 +71,34 @@ export function GameCoverPickerModal({game, isOpen, onOpenChange, setCoverUrl}:
<MagnifyingGlass/> <MagnifyingGlass/>
</Button> </Button>
</div> </div>
{searchResults.length === 0 && !isSearching &&
<p className="text-center">No results found.</p>
}
{searchResults.length === 0 && isSearching &&
<p className="text-center text-foreground/70">Searching...</p>
}
<ScrollShadow <ScrollShadow
className="flex flex-row flex-wrap gap-4 h-96 overflow-scroll justify-evenly"> className="grid grid-cols-auto-fill gap-4 h-96 overflow-scroll justify-evenly">
{searchResults.length === 0 && "No results found."}
{searchResults.map((result) => ( {searchResults.map((result) => (
<Image <div className="relative group w-fit h-fit cursor-pointer"
key={result.id} onClick={() => {
alt={result.title} setCoverUrl(result.coverUrl!);
className="z-0 object-cover aspect-[12/17] cursor-pointer" onClose();
src={result.coverUrl!} }}>
radius="none" <Image
height={216} key={result.id}
onClick={() => { alt={result.title}
setCoverUrl(result.coverUrl!); className="z-0 object-cover aspect-[12/17] group-hover:brightness-50"
onClose(); src={result.coverUrl!}
}} radius="none"
/> height={216}
/>
<div
className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100"
>
<ArrowRight size={46}/>
</div>
</div>
))} ))}
</ScrollShadow> </ScrollShadow>
</ModalBody> </ModalBody>
gameyfin/tailwind.config.ts
+2 -1
View File
@@ -17,7 +17,8 @@ export default withMT({
'gf-secondary': '#6441a5' 'gf-secondary': '#6441a5'
}, },
gridTemplateColumns: { gridTemplateColumns: {
'300px': 'repeat(auto-fit, 300px)' '300px': 'repeat(auto-fit, 300px)',
'auto-fill': 'repeat(auto-fill, minmax(150px, 1fr))',
} }
} }
}, },