mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 02:37:05 +02:00
fix: mas width for meta section
This commit is contained in:
tresabhi committed
1 parent
1a46e176f5
commit
0924a77776
1 file changed
+127
-121
@@ -25,154 +25,160 @@ export function MetaSection() {
|
||||
const { locale, strings } = useLocale();
|
||||
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
background: `url(/assets/images/national-wallpapers/${protagonist.nation}.jpg)`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition:
|
||||
NATIONAL_BANNER_POSITION_OVERRIDES[protagonist.nation] ?? 'center',
|
||||
}}
|
||||
>
|
||||
<Flex justify="center">
|
||||
<Box
|
||||
style={{
|
||||
background: `url(${asset(`flags/scratched/${protagonist.nation}.webp`)})`,
|
||||
background: `url(/assets/images/national-wallpapers/${protagonist.nation}.jpg)`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: '53rem',
|
||||
backgroundPosition: '-8rem 50%',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition:
|
||||
NATIONAL_BANNER_POSITION_OVERRIDES[protagonist.nation] ?? 'center',
|
||||
}}
|
||||
flexGrow="1"
|
||||
maxWidth="120rem"
|
||||
>
|
||||
<Flex
|
||||
justify="center"
|
||||
align="center"
|
||||
py="6rem"
|
||||
<Box
|
||||
style={{
|
||||
background: `linear-gradient(${Var('gray-1')}, ${Var('black-a8')}, ${Var('black-a8')}, ${Var('gray-1')})`,
|
||||
background: `url(${asset(`flags/scratched/${protagonist.nation}.webp`)})`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: '53rem',
|
||||
backgroundPosition: '-8rem 50%',
|
||||
}}
|
||||
>
|
||||
<Flex direction="column" align="center" gap="6">
|
||||
<Flex
|
||||
gap={{ initial: '2', sm: '8' }}
|
||||
direction={{ initial: 'column', sm: 'row' }}
|
||||
>
|
||||
<Flex direction="column" width="100%" gap="2">
|
||||
<Listing label={strings.website.tools.tankopedia.meta.nation}>
|
||||
<Flex align="center" gap="1">
|
||||
<img
|
||||
style={{ width: '1em', height: '1em' }}
|
||||
alt={protagonist.nation}
|
||||
src={asset(`flags/circle/${protagonist.nation}.webp`)}
|
||||
/>
|
||||
{
|
||||
strings.common.nations[
|
||||
protagonist.nation as keyof typeof strings.common.nations
|
||||
]
|
||||
<Flex
|
||||
justify="center"
|
||||
align="center"
|
||||
py="6rem"
|
||||
style={{
|
||||
background: `linear-gradient(${Var('gray-1')}, ${Var('black-a8')}, ${Var('black-a8')}, ${Var('gray-1')})`,
|
||||
}}
|
||||
>
|
||||
<Flex direction="column" align="center" gap="6">
|
||||
<Flex
|
||||
gap={{ initial: '2', sm: '8' }}
|
||||
direction={{ initial: 'column', sm: 'row' }}
|
||||
>
|
||||
<Flex direction="column" width="100%" gap="2">
|
||||
<Listing label={strings.website.tools.tankopedia.meta.nation}>
|
||||
<Flex align="center" gap="1">
|
||||
<img
|
||||
style={{ width: '1em', height: '1em' }}
|
||||
alt={protagonist.nation}
|
||||
src={asset(`flags/circle/${protagonist.nation}.webp`)}
|
||||
/>
|
||||
{
|
||||
strings.common.nations[
|
||||
protagonist.nation as keyof typeof strings.common.nations
|
||||
]
|
||||
}
|
||||
</Flex>
|
||||
</Listing>
|
||||
<Listing label={strings.website.tools.tankopedia.meta.class}>
|
||||
<Flex align="center" gap="1">
|
||||
<ClassIcon width="1em" height="1em" />
|
||||
{strings.common.tank_class_short[protagonist.class]}
|
||||
</Flex>
|
||||
</Listing>
|
||||
<Listing label={strings.website.tools.tankopedia.meta.tier}>
|
||||
{TIER_ROMAN_NUMERALS[protagonist.tier]}
|
||||
</Listing>
|
||||
<Listing
|
||||
label={strings.website.tools.tankopedia.meta.type}
|
||||
color={
|
||||
protagonist.type === TankType.COLLECTOR
|
||||
? 'blue'
|
||||
: protagonist.type === TankType.PREMIUM
|
||||
? 'amber'
|
||||
: undefined
|
||||
}
|
||||
</Flex>
|
||||
</Listing>
|
||||
<Listing label={strings.website.tools.tankopedia.meta.class}>
|
||||
<Flex align="center" gap="1">
|
||||
<ClassIcon width="1em" height="1em" />
|
||||
{strings.common.tank_class_short[protagonist.class]}
|
||||
</Flex>
|
||||
</Listing>
|
||||
<Listing label={strings.website.tools.tankopedia.meta.tier}>
|
||||
{TIER_ROMAN_NUMERALS[protagonist.tier]}
|
||||
</Listing>
|
||||
<Listing
|
||||
label={strings.website.tools.tankopedia.meta.type}
|
||||
color={
|
||||
protagonist.type === TankType.COLLECTOR
|
||||
? 'blue'
|
||||
: protagonist.type === TankType.PREMIUM
|
||||
? 'amber'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{strings.common.tree_type[protagonist.type]}
|
||||
</Listing>
|
||||
</Flex>
|
||||
>
|
||||
{strings.common.tree_type[protagonist.type]}
|
||||
</Listing>
|
||||
</Flex>
|
||||
|
||||
<Flex direction="column" width="100%" gap="2">
|
||||
{developerMode && (
|
||||
<Listing label={strings.website.tools.tankopedia.meta.dev_id}>
|
||||
<Code>{protagonist.id}</Code>
|
||||
</Listing>
|
||||
)}
|
||||
{protagonist.type === TankType.PREMIUM && (
|
||||
<Flex direction="column" width="100%" gap="2">
|
||||
{developerMode && (
|
||||
<Listing
|
||||
label={strings.website.tools.tankopedia.meta.dev_id}
|
||||
>
|
||||
<Code>{protagonist.id}</Code>
|
||||
</Listing>
|
||||
)}
|
||||
{protagonist.type === TankType.PREMIUM && (
|
||||
<Listing
|
||||
label={strings.website.tools.tankopedia.meta.purchase}
|
||||
>
|
||||
<Flex align="center" gap="1">
|
||||
{protagonist.price.value / 400}
|
||||
<img
|
||||
style={{ width: '1em', height: '1em' }}
|
||||
alt="gold"
|
||||
src={asset('icons/currencies/gold.webp')}
|
||||
/>
|
||||
</Flex>
|
||||
</Listing>
|
||||
)}
|
||||
<Listing
|
||||
label={strings.website.tools.tankopedia.meta.purchase}
|
||||
label={
|
||||
protagonist.type === TankType.RESEARCHABLE
|
||||
? strings.website.tools.tankopedia.meta.purchase
|
||||
: strings.website.tools.tankopedia.meta.restoration
|
||||
}
|
||||
>
|
||||
<Flex align="center" gap="1">
|
||||
{protagonist.price.value / 400}
|
||||
{protagonist.price.value.toLocaleString(locale)}
|
||||
<img
|
||||
style={{ width: '1em', height: '1em' }}
|
||||
alt="gold"
|
||||
src={asset('icons/currencies/gold.webp')}
|
||||
alt={TankPriceType[protagonist.price.type]}
|
||||
src={asset(
|
||||
`icons/currencies/${
|
||||
protagonist.price.type === TankPriceType.GOLD
|
||||
? 'gold'
|
||||
: 'silver'
|
||||
}.webp`,
|
||||
)}
|
||||
/>
|
||||
</Flex>
|
||||
</Listing>
|
||||
)}
|
||||
<Listing
|
||||
label={
|
||||
protagonist.type === TankType.RESEARCHABLE
|
||||
? strings.website.tools.tankopedia.meta.purchase
|
||||
: strings.website.tools.tankopedia.meta.restoration
|
||||
}
|
||||
>
|
||||
<Flex align="center" gap="1">
|
||||
{protagonist.price.value.toLocaleString(locale)}
|
||||
<img
|
||||
style={{ width: '1em', height: '1em' }}
|
||||
alt={TankPriceType[protagonist.price.type]}
|
||||
src={asset(
|
||||
`icons/currencies/${
|
||||
protagonist.price.type === TankPriceType.GOLD
|
||||
? 'gold'
|
||||
: 'silver'
|
||||
}.webp`,
|
||||
)}
|
||||
/>
|
||||
</Flex>
|
||||
</Listing>
|
||||
<Listing label={strings.website.tools.tankopedia.meta.sale}>
|
||||
<Flex align="center" gap="1">
|
||||
{(protagonist.price.value / 2).toLocaleString(locale)}
|
||||
<img
|
||||
style={{ width: '1em', height: '1em' }}
|
||||
alt={TankPriceType[protagonist.price.type]}
|
||||
src={asset(
|
||||
`icons/currencies/${
|
||||
protagonist.price.type === TankPriceType.GOLD
|
||||
? 'gold'
|
||||
: 'silver'
|
||||
}.webp`,
|
||||
)}
|
||||
/>
|
||||
</Flex>
|
||||
</Listing>
|
||||
{protagonist.research_cost && (
|
||||
<Listing
|
||||
label={strings.website.tools.tankopedia.meta.research}
|
||||
>
|
||||
<Listing label={strings.website.tools.tankopedia.meta.sale}>
|
||||
<Flex align="center" gap="1">
|
||||
{(
|
||||
protagonist.research_cost.research_cost_type!
|
||||
.value as number
|
||||
).toLocaleString(locale)}
|
||||
{(protagonist.price.value / 2).toLocaleString(locale)}
|
||||
<img
|
||||
style={{ width: '1em', height: '1em' }}
|
||||
alt="xp"
|
||||
src={asset('icons/currencies/xp.webp')}
|
||||
alt={TankPriceType[protagonist.price.type]}
|
||||
src={asset(
|
||||
`icons/currencies/${
|
||||
protagonist.price.type === TankPriceType.GOLD
|
||||
? 'gold'
|
||||
: 'silver'
|
||||
}.webp`,
|
||||
)}
|
||||
/>
|
||||
</Flex>
|
||||
</Listing>
|
||||
)}
|
||||
{protagonist.research_cost && (
|
||||
<Listing
|
||||
label={strings.website.tools.tankopedia.meta.research}
|
||||
>
|
||||
<Flex align="center" gap="1">
|
||||
{(
|
||||
protagonist.research_cost.research_cost_type!
|
||||
.value as number
|
||||
).toLocaleString(locale)}
|
||||
<img
|
||||
style={{ width: '1em', height: '1em' }}
|
||||
alt="xp"
|
||||
src={asset('icons/currencies/xp.webp')}
|
||||
/>
|
||||
</Flex>
|
||||
</Listing>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user