fix(frontend): better genres display

IgnisDa · Oct 29, 2023 · cfcf3d2 · cfcf3d2
1 parent 5278e99
commit cfcf3d2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 30 deletions.
diff --git a/apps/frontend/src/pages/media/genres/list.tsx b/apps/frontend/src/pages/media/genres/list.tsx
@@ -123,10 +123,12 @@ const Page: NextPageWithLayout = () => {
 														id: genre.id,
 													})}
 												>
-													{genre.name.substring(0, 10).trim()}
-													{genre.name.length > 10 ? "..." : ""}
+													{genre.name.substring(0, 13).trim()}
+													{genre.name.length > 13 ? "..." : ""}
 												</Anchor>
-												<Text>{genre.numItems} items</Text>
+												<Text size="sm" c="dimmed">
+													{genre.numItems} items
+												</Text>
 											</Box>
 										</Group>
 									</Paper>

diff --git a/apps/frontend/src/pages/media/item/index.tsx b/apps/frontend/src/pages/media/item/index.tsx
@@ -886,28 +886,33 @@ const Page: NextPageWithLayout = () => {
 						</Tabs.List>
 						<Tabs.Panel value="overview">
 							<MediaScrollArea>
-								<>
-									<SimpleGrid cols={{ base: 4 }}>
-										{mediaDetails.data.genres.map((g) => (
-											<Group key={g.id} wrap="nowrap">
-												<Box
-													h={11}
-													w={11}
-													style={{ borderRadius: 2, flex: "none" }}
-													bg={getMantineColor(g.name)}
-												/>
-												<Anchor
-													component={Link}
-													href={withQuery(APP_ROUTES.media.genres.details, {
-														id: g.id,
-													})}
-													fz="sm"
-													truncate
-												>
-													{g.name.trim()}
-												</Anchor>
-											</Group>
-										))}
+								<Stack gap="sm">
+									<SimpleGrid
+										cols={{ base: 3, xl: 4 }}
+										spacing={{ base: "md", lg: "xs" }}
+									>
+										{mediaDetails.data.genres
+											.toSorted((a, b) => a.name.length - b.name.length)
+											.map((g) => (
+												<Group key={g.id} wrap="nowrap">
+													<Box
+														h={11}
+														w={11}
+														style={{ borderRadius: 2, flex: "none" }}
+														bg={getMantineColor(g.name)}
+													/>
+													<Anchor
+														component={Link}
+														href={withQuery(APP_ROUTES.media.genres.details, {
+															id: g.id,
+														})}
+														fz="sm"
+														truncate
+													>
+														{g.name.trim()}
+													</Anchor>
+												</Group>
+											))}
 									</SimpleGrid>
 									{mediaDetails.data.description ? (
 										<div
@@ -916,10 +921,8 @@ const Page: NextPageWithLayout = () => {
 												__html: mediaDetails.data.description,
 											}}
 										/>
-									) : (
-										<Text fs="italic">No overview available</Text>
-									)}
-									<Stack mt="xl">
+									) : undefined}
+									<Stack>
 										{mediaSpecifics.data?.creators.map((c) => (
 											<Box key={c.name}>
 												<Text fw="bold">{c.name}</Text>
@@ -964,7 +967,7 @@ const Page: NextPageWithLayout = () => {
 											</Box>
 										))}
 									</Stack>
-								</>
+								</Stack>
 							</MediaScrollArea>
 						</Tabs.Panel>
 						<Tabs.Panel value="actions">