TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 20:19:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: improved layout

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-06-18 20:43:21 -05:00
1 parent eb53b59e32
commit 3ccbb7895c
3 files changed
+47 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+4 -1
View File
@@ -55,7 +55,10 @@ export function HeroSection() {
height: '100%', height: '100%',
}} }}
> >
<Heading size={wideFormat ? '9' : '8'}> <Heading
size={wideFormat ? '9' : '8'}
align={wideFormat ? undefined : 'center'}
>
{protagonistTank.nameFull ?? protagonistTank.name} {protagonistTank.nameFull ?? protagonistTank.name}
</Heading> </Heading>
src/app/tools/tankopedia/page.tsx
+41 -31
View File
@@ -1,5 +1,4 @@
import { CaretRightIcon } from '@radix-ui/react-icons'; import { Flex, Grid, Heading, Separator, Text } from '@radix-ui/themes';
import { Button, Flex, Heading, Text, TextField } from '@radix-ui/themes';
import { range } from 'lodash'; import { range } from 'lodash';
import { use } from 'react'; import { use } from 'react';
import { classIcons } from '../../../components/ClassIcon'; import { classIcons } from '../../../components/ClassIcon';
@@ -14,6 +13,7 @@ import {
} from '../../../core/blitzkit/tankDefinitions'; } from '../../../core/blitzkit/tankDefinitions';
import { TIER_ROMAN_NUMERALS } from '../../../core/blitzkit/tankDefinitions/constants'; import { TIER_ROMAN_NUMERALS } from '../../../core/blitzkit/tankDefinitions/constants';
import { tankIcon } from '../../../core/blitzkit/tankIcon'; import { tankIcon } from '../../../core/blitzkit/tankIcon';
import strings from '../../../lang/en-US.json';
import { treeTypeOrder } from './components/TankSearch/constants'; import { treeTypeOrder } from './components/TankSearch/constants';
export default function Page() { export default function Page() {
@@ -22,7 +22,7 @@ export default function Page() {
return ( return (
<PageWrapper color="purple"> <PageWrapper color="purple">
<TextField.Root size="3" placeholder="Search tanks..."> {/* <TextField.Root size="3" placeholder="Search tanks...">
<TextField.Slot /> <TextField.Slot />
<TextField.Slot> <TextField.Slot>
@@ -30,7 +30,7 @@ export default function Page() {
M48 Patton <CaretRightIcon /> M48 Patton <CaretRightIcon />
</Button> </Button>
</TextField.Slot> </TextField.Slot>
</TextField.Root> </TextField.Root> */}
<Flex direction="column" gap="8" mt="4"> <Flex direction="column" gap="8" mt="4">
{range(10, 0).map((tierUntyped) => { {range(10, 0).map((tierUntyped) => {
@@ -41,9 +41,11 @@ export default function Page() {
return ( return (
<Flex key={tier} direction="column" gap="4"> <Flex key={tier} direction="column" gap="4">
<Heading>Tier {TIER_ROMAN_NUMERALS[tier]}</Heading> <Heading align="center" color="gray">
Tier {TIER_ROMAN_NUMERALS[tier]}
</Heading>
<Flex direction="column" gap="4"> <Flex direction="column" gap="8">
{awaitedNations.map((nation, nationIndex) => { {awaitedNations.map((nation, nationIndex) => {
const nationTanks = tierTanks const nationTanks = tierTanks
.filter((tank) => tank.nation === nation) .filter((tank) => tank.nation === nation)
@@ -61,27 +63,34 @@ export default function Page() {
if (nationTanks.length === 0) return null; if (nationTanks.length === 0) return null;
return ( return (
<> <Flex direction="column" gap="4">
{nationIndex > 0 && ( <Flex align="center">
<div
style={{
height: '0.5px',
background: 'var(--gray-6)',
}}
/>
)}
<Flex key={nation} align="center">
<img <img
alt={nation}
src={asset(`flags/scratched/${nation}.webp`)} src={asset(`flags/scratched/${nation}.webp`)}
width={128}
height={64}
style={{ style={{
objectFit: 'contain', height: 64,
aspectRatio: '2 / 1',
}} }}
/> />
<Flex wrap="wrap" gap="2">
<Heading size="5" ml="-8" mr="4" wrap="nowrap">
{
strings.common.nations[
nation as keyof typeof strings.common.nations
]
}
</Heading>
<Separator size="4" />
</Flex>
<Grid
flexGrow="1"
columns="repeat(auto-fill, minmax(80px, 1fr))"
gap="2"
gapY="4"
key={nation}
>
{nationTanks.map((tank) => { {nationTanks.map((tank) => {
const Icon = classIcons[tank.class]; const Icon = classIcons[tank.class];
@@ -99,18 +108,20 @@ export default function Page() {
underline="hover" underline="hover"
key={tank.id} key={tank.id}
href={`/tools/tankopedia/${tank.id}`} href={`/tools/tankopedia/${tank.id}`}
> style={{
<Flex display: 'flex',
direction="column" flexDirection: 'column',
align="center" alignItems: 'center',
width="80px" gap: 'var(--space-2)',
}}
> >
<img <img
alt={tank.name} alt={tank.name}
src={tankIcon(tank.id)} src={tankIcon(tank.id)}
width={64}
height={64} height={64}
style={{ style={{
width: '100%',
objectPosition: 'center',
objectFit: 'contain', objectFit: 'contain',
}} }}
/> />
@@ -121,6 +132,7 @@ export default function Page() {
align="center" align="center"
overflow="hidden" overflow="hidden"
width="100%" width="100%"
maxWidth="100%"
> >
<Icon <Icon
style={{ style={{
@@ -141,13 +153,11 @@ export default function Page() {
{tank.name} {tank.name}
</Text> </Text>
</Flex> </Flex>
</Flex>
</Link> </Link>
); );
})} })}
</Grid>
</Flex> </Flex>
</Flex>
</>
); );
})} })}
</Flex> </Flex>
src/lang/en-US.json
+2 -2
View File
@@ -21,8 +21,8 @@
"uk": "U.K.", "uk": "U.K.",
"france": "France", "france": "France",
"japan": "Japan", "japan": "Japan",
"european": "European nation", "european": "European Nation",
"other": "Hybrid nation" "other": "Hybrid Nation"
}, },
"nations_adjectives": { "nations_adjectives": {