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>
{item.metadata.path}
</TableCell>
<TableCell className="flex flex-row gap-2">
<Button isIconOnly size="sm" onPress={() => toggleMatchConfirmed(item)}>
{item.metadata.matchConfirmed ?
<Tooltip content="Unconfirm match">
<CheckCircle weight="fill" className="fill-success"/>
</Tooltip> :
<Tooltip content="Confirm match">
<CheckCircle/>
</Tooltip>}
</Button>
<Button isIconOnly size="sm" onPress={() => {
setSelectedGame(item);
editGameModal.onOpenChange();
}}>
<Tooltip content="Edit metadata">
<Pencil/>
</Tooltip>
</Button>
<Button isIconOnly size="sm" onPress={() => {
setSelectedGame(item);
matchGameModal.onOpenChange();
}}>
<Tooltip content="Match game">
<MagnifyingGlass/>
</Tooltip>
</Button>
<Button isIconOnly size="sm" color="danger"
onPress={() => deleteGame(item)}>
<Tooltip content="Remove from library">
<Trash/>
</Tooltip>
</Button>
<TableCell>
<div className="flex flex-row gap-2">
<Button isIconOnly size="sm" onPress={() => toggleMatchConfirmed(item)}>
{item.metadata.matchConfirmed ?
<Tooltip content="Unconfirm match">
<CheckCircle weight="fill" className="fill-success"/>
</Tooltip> :
<Tooltip content="Confirm match">
<CheckCircle/>
</Tooltip>}
</Button>
<Button isIconOnly size="sm" onPress={() => {
setSelectedGame(item);
editGameModal.onOpenChange();
}}>
<Tooltip content="Edit metadata">
<Pencil/>
</Tooltip>
</Button>
<Button isIconOnly size="sm" onPress={() => {
setSelectedGame(item);
matchGameModal.onOpenChange();
}}>
<Tooltip content="Match game">
<MagnifyingGlass/>
</Tooltip>
</Button>
<Button isIconOnly size="sm" color="danger"
onPress={() => deleteGame(item)}>
<Tooltip content="Remove from library">
<Trash/>
</Tooltip>
</Button>
</div>
</TableCell>
</TableRow>
)}
@@ -117,20 +117,22 @@ export default function LibraryManagementUnmatchedPaths({library}: LibraryManage
<TableCell>
{item.path}
</TableCell>
<TableCell className="flex flex-row gap-2">
<Tooltip content="Match game">
<Button isIconOnly size="sm" onPress={() => {
setSelectedPath(item.path);
matchGameModal.onOpenChange();
}}>
<MagnifyingGlass/>
</Button>
</Tooltip>
<Tooltip content="Remove entry from list">
<Button isIconOnly size="sm" color="danger"
onPress={() => deleteUnmatchedPath(item.path)}><Trash/>
</Button>
</Tooltip>
<TableCell>
<div className="flex flex-row gap-2">
<Tooltip content="Match game">
<Button isIconOnly size="sm" onPress={() => {
setSelectedPath(item.path);
matchGameModal.onOpenChange();
}}>
<MagnifyingGlass/>
</Button>
</Tooltip>
<Tooltip content="Remove entry from list">
<Button isIconOnly size="sm" color="danger"
onPress={() => deleteUnmatchedPath(item.path)}><Trash/>
</Button>
</Tooltip>
</div>
</TableCell>
</TableRow>
)}
@@ -69,32 +69,22 @@ export default function EditGameMetadataModal({game, isOpen, onOpenChange}: Edit
</div>
<TextAreaInput key="summary" name="summary" label="Summary (HTML)"/>
<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"
aria-label="Additional Metadata"
title="Additional Metadata"
className="flex flex-col">
<div className="flex flex-row gap-4">
<ArrayInput key="developers" name="developers" label="Developers"/>
<div className="w-0 border-s border-foreground/70"/>
<ArrayInput key="publishers" name="publishers" label="Publishers"/>
</div>
<div className="flex flex-row gap-4">
<ArrayInput key="genres" name="genres" label="Genres"/>
<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>
title="Additional Metadata">
<ArrayInput key="developers" name="developers" label="Developers"/>
<ArrayInput key="publishers" name="publishers" label="Publishers"/>
<ArrayInput key="genres" name="genres" label="Genres"/>
<ArrayInput key="themes" name="themes" label="Themes"/>
<ArrayInput key="keywords" name="keywords" label="Keywords"/>
<ArrayInput key="features" name="features" label="Features"/>
<ArrayInput key="perspectives" name="perspectives"
label="Perspectives"/>
</AccordionItem>
</Accordion>
</ModalBody>