mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-24 12:09:51 +02:00
feat: improved layout
This commit is contained in:
TrèsAbhi committed
1 parent
eb53b59e32
commit
3ccbb7895c
3 files changed
+101
-88
No files matched your search
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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,93 +63,101 @@ 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">
|
|
||||||
{nationTanks.map((tank) => {
|
|
||||||
const Icon = classIcons[tank.class];
|
|
||||||
|
|
||||||
return (
|
<Heading size="5" ml="-8" mr="4" wrap="nowrap">
|
||||||
<Link
|
{
|
||||||
size="1"
|
strings.common.nations[
|
||||||
color={
|
nation as keyof typeof strings.common.nations
|
||||||
tank.treeType === 'collector'
|
]
|
||||||
? 'blue'
|
}
|
||||||
: tank.treeType === 'premium'
|
</Heading>
|
||||||
? 'amber'
|
|
||||||
: 'gray'
|
|
||||||
}
|
|
||||||
highContrast={tank.treeType === 'researchable'}
|
|
||||||
underline="hover"
|
|
||||||
key={tank.id}
|
|
||||||
href={`/tools/tankopedia/${tank.id}`}
|
|
||||||
>
|
|
||||||
<Flex
|
|
||||||
direction="column"
|
|
||||||
align="center"
|
|
||||||
width="80px"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
alt={tank.name}
|
|
||||||
src={tankIcon(tank.id)}
|
|
||||||
width={64}
|
|
||||||
height={64}
|
|
||||||
style={{
|
|
||||||
objectFit: 'contain',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Flex
|
<Separator size="4" />
|
||||||
justify="center"
|
|
||||||
gap="1"
|
|
||||||
align="center"
|
|
||||||
overflow="hidden"
|
|
||||||
width="100%"
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
style={{
|
|
||||||
width: '1em',
|
|
||||||
height: '1em',
|
|
||||||
minWidth: '1em',
|
|
||||||
minHeight: '1em',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Text
|
|
||||||
align="center"
|
|
||||||
style={{
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
overflow: 'hidden',
|
|
||||||
textOverflow: 'ellipsis',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tank.name}
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
</Flex>
|
||||||
</>
|
|
||||||
|
<Grid
|
||||||
|
flexGrow="1"
|
||||||
|
columns="repeat(auto-fill, minmax(80px, 1fr))"
|
||||||
|
gap="2"
|
||||||
|
gapY="4"
|
||||||
|
key={nation}
|
||||||
|
>
|
||||||
|
{nationTanks.map((tank) => {
|
||||||
|
const Icon = classIcons[tank.class];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
size="1"
|
||||||
|
color={
|
||||||
|
tank.treeType === 'collector'
|
||||||
|
? 'blue'
|
||||||
|
: tank.treeType === 'premium'
|
||||||
|
? 'amber'
|
||||||
|
: 'gray'
|
||||||
|
}
|
||||||
|
highContrast={tank.treeType === 'researchable'}
|
||||||
|
underline="hover"
|
||||||
|
key={tank.id}
|
||||||
|
href={`/tools/tankopedia/${tank.id}`}
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 'var(--space-2)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
alt={tank.name}
|
||||||
|
src={tankIcon(tank.id)}
|
||||||
|
height={64}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
objectPosition: 'center',
|
||||||
|
objectFit: 'contain',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Flex
|
||||||
|
justify="center"
|
||||||
|
gap="1"
|
||||||
|
align="center"
|
||||||
|
overflow="hidden"
|
||||||
|
width="100%"
|
||||||
|
maxWidth="100%"
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
style={{
|
||||||
|
width: '1em',
|
||||||
|
height: '1em',
|
||||||
|
minWidth: '1em',
|
||||||
|
minHeight: '1em',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
align="center"
|
||||||
|
style={{
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tank.name}
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Grid>
|
||||||
|
</Flex>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|||||||
+2
-2
@@ -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": {
|
||||||
|
|||||||
Reference in new issue
Block a user