Small layout changes to improve visibility on lower resolutions (1080p)

This commit is contained in:
grimsi
2025-06-14 15:34:47 +02:00
parent b1dd4cb8c1
commit ca7d458f3e
3 changed files with 64 additions and 70 deletions
@@ -181,38 +181,40 @@ export default function LibraryManagementGames({library}: LibraryManagementGames
<TableCell> <TableCell>
{item.metadata.path} {item.metadata.path}
</TableCell> </TableCell>
<TableCell className="flex flex-row gap-2"> <TableCell>
<Button isIconOnly size="sm" onPress={() => toggleMatchConfirmed(item)}> <div className="flex flex-row gap-2">
{item.metadata.matchConfirmed ? <Button isIconOnly size="sm" onPress={() => toggleMatchConfirmed(item)}>
<Tooltip content="Unconfirm match"> {item.metadata.matchConfirmed ?
<CheckCircle weight="fill" className="fill-success"/> <Tooltip content="Unconfirm match">
</Tooltip> : <CheckCircle weight="fill" className="fill-success"/>
<Tooltip content="Confirm match"> </Tooltip> :
<CheckCircle/> <Tooltip content="Confirm match">
</Tooltip>} <CheckCircle/>
</Button> </Tooltip>}
<Button isIconOnly size="sm" onPress={() => { </Button>
setSelectedGame(item); <Button isIconOnly size="sm" onPress={() => {
editGameModal.onOpenChange(); setSelectedGame(item);
}}> editGameModal.onOpenChange();
<Tooltip content="Edit metadata"> }}>
<Pencil/> <Tooltip content="Edit metadata">
</Tooltip> <Pencil/>
</Button> </Tooltip>
<Button isIconOnly size="sm" onPress={() => { </Button>
setSelectedGame(item); <Button isIconOnly size="sm" onPress={() => {
matchGameModal.onOpenChange(); setSelectedGame(item);
}}> matchGameModal.onOpenChange();
<Tooltip content="Match game"> }}>
<MagnifyingGlass/> <Tooltip content="Match game">
</Tooltip> <MagnifyingGlass/>
</Button> </Tooltip>
<Button isIconOnly size="sm" color="danger" </Button>
onPress={() => deleteGame(item)}> <Button isIconOnly size="sm" color="danger"
<Tooltip content="Remove from library"> onPress={() => deleteGame(item)}>
<Trash/> <Tooltip content="Remove from library">
</Tooltip> <Trash/>
</Button> </Tooltip>
</Button>
</div>
</TableCell> </TableCell>
</TableRow> </TableRow>
)} )}
@@ -117,20 +117,22 @@ export default function LibraryManagementUnmatchedPaths({library}: LibraryManage
<TableCell> <TableCell>
{item.path} {item.path}
</TableCell> </TableCell>
<TableCell className="flex flex-row gap-2"> <TableCell>
<Tooltip content="Match game"> <div className="flex flex-row gap-2">
<Button isIconOnly size="sm" onPress={() => { <Tooltip content="Match game">
setSelectedPath(item.path); <Button isIconOnly size="sm" onPress={() => {
matchGameModal.onOpenChange(); setSelectedPath(item.path);
}}> matchGameModal.onOpenChange();
<MagnifyingGlass/> }}>
</Button> <MagnifyingGlass/>
</Tooltip> </Button>
<Tooltip content="Remove entry from list"> </Tooltip>
<Button isIconOnly size="sm" color="danger" <Tooltip content="Remove entry from list">
onPress={() => deleteUnmatchedPath(item.path)}><Trash/> <Button isIconOnly size="sm" color="danger"
</Button> onPress={() => deleteUnmatchedPath(item.path)}><Trash/>
</Tooltip> </Button>
</Tooltip>
</div>
</TableCell> </TableCell>
</TableRow> </TableRow>
)} )}
@@ -69,32 +69,22 @@ export default function EditGameMetadataModal({game, isOpen, onOpenChange}: Edit
</div> </div>
<TextAreaInput key="summary" name="summary" label="Summary (HTML)"/> <TextAreaInput key="summary" name="summary" label="Summary (HTML)"/>
<TextAreaInput key="comment" name="comment" label="Comment (Markdown)"/> <TextAreaInput key="comment" name="comment" label="Comment (Markdown)"/>
<Accordion> <Accordion variant="splitted"
itemClasses={{
base: "-mx-2",
content: "max-h-80 overflow-y-auto",
}}>
<AccordionItem key="additional-metadata" <AccordionItem key="additional-metadata"
aria-label="Additional Metadata" aria-label="Additional Metadata"
title="Additional Metadata" title="Additional Metadata">
className="flex flex-col"> <ArrayInput key="developers" name="developers" label="Developers"/>
<div className="flex flex-row gap-4"> <ArrayInput key="publishers" name="publishers" label="Publishers"/>
<ArrayInput key="developers" name="developers" label="Developers"/> <ArrayInput key="genres" name="genres" label="Genres"/>
<div className="w-0 border-s border-foreground/70"/> <ArrayInput key="themes" name="themes" label="Themes"/>
<ArrayInput key="publishers" name="publishers" label="Publishers"/> <ArrayInput key="keywords" name="keywords" label="Keywords"/>
</div> <ArrayInput key="features" name="features" label="Features"/>
<div className="flex flex-row gap-4"> <ArrayInput key="perspectives" name="perspectives"
<ArrayInput key="genres" name="genres" label="Genres"/> label="Perspectives"/>
<div className="w-0 border-s border-foreground/70"/>
<ArrayInput key="themes" name="themes" label="Themes"/>
</div>
<div className="flex flex-row gap-4">
<ArrayInput key="keywords" name="keywords" label="Keywords"/>
<div className="w-0 border-s border-foreground/70"/>
<ArrayInput key="features" name="features" label="Features"/>
</div>
<div className="flex flex-row gap-4">
<ArrayInput key="perspectives" name="perspectives"
label="Perspectives"/>
<div className="w-0 border-s border-foreground/70"/>
<div className="flex-1"/>
</div>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
</ModalBody> </ModalBody>