mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 19:49:50 +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();
|
const { locale, strings } = useLocale();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Flex justify="center">
|
||||||
style={{
|
|
||||||
background: `url(/assets/images/national-wallpapers/${protagonist.nation}.jpg)`,
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition:
|
|
||||||
NATIONAL_BANNER_POSITION_OVERRIDES[protagonist.nation] ?? 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
<Box
|
||||||
style={{
|
style={{
|
||||||
background: `url(${asset(`flags/scratched/${protagonist.nation}.webp`)})`,
|
background: `url(/assets/images/national-wallpapers/${protagonist.nation}.jpg)`,
|
||||||
backgroundRepeat: 'no-repeat',
|
backgroundRepeat: 'no-repeat',
|
||||||
backgroundSize: '53rem',
|
backgroundSize: 'cover',
|
||||||
backgroundPosition: '-8rem 50%',
|
backgroundPosition:
|
||||||
|
NATIONAL_BANNER_POSITION_OVERRIDES[protagonist.nation] ?? 'center',
|
||||||
}}
|
}}
|
||||||
|
flexGrow="1"
|
||||||
|
maxWidth="120rem"
|
||||||
>
|
>
|
||||||
<Flex
|
<Box
|
||||||
justify="center"
|
|
||||||
align="center"
|
|
||||||
py="6rem"
|
|
||||||
style={{
|
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
|
||||||
<Flex
|
justify="center"
|
||||||
gap={{ initial: '2', sm: '8' }}
|
align="center"
|
||||||
direction={{ initial: 'column', sm: 'row' }}
|
py="6rem"
|
||||||
>
|
style={{
|
||||||
<Flex direction="column" width="100%" gap="2">
|
background: `linear-gradient(${Var('gray-1')}, ${Var('black-a8')}, ${Var('black-a8')}, ${Var('gray-1')})`,
|
||||||
<Listing label={strings.website.tools.tankopedia.meta.nation}>
|
}}
|
||||||
<Flex align="center" gap="1">
|
>
|
||||||
<img
|
<Flex direction="column" align="center" gap="6">
|
||||||
style={{ width: '1em', height: '1em' }}
|
<Flex
|
||||||
alt={protagonist.nation}
|
gap={{ initial: '2', sm: '8' }}
|
||||||
src={asset(`flags/circle/${protagonist.nation}.webp`)}
|
direction={{ initial: 'column', sm: 'row' }}
|
||||||
/>
|
>
|
||||||
{
|
<Flex direction="column" width="100%" gap="2">
|
||||||
strings.common.nations[
|
<Listing label={strings.website.tools.tankopedia.meta.nation}>
|
||||||
protagonist.nation as keyof typeof strings.common.nations
|
<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>
|
{strings.common.tree_type[protagonist.type]}
|
||||||
<Listing label={strings.website.tools.tankopedia.meta.class}>
|
</Listing>
|
||||||
<Flex align="center" gap="1">
|
</Flex>
|
||||||
<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>
|
|
||||||
|
|
||||||
<Flex direction="column" width="100%" gap="2">
|
<Flex direction="column" width="100%" gap="2">
|
||||||
{developerMode && (
|
{developerMode && (
|
||||||
<Listing label={strings.website.tools.tankopedia.meta.dev_id}>
|
<Listing
|
||||||
<Code>{protagonist.id}</Code>
|
label={strings.website.tools.tankopedia.meta.dev_id}
|
||||||
</Listing>
|
>
|
||||||
)}
|
<Code>{protagonist.id}</Code>
|
||||||
{protagonist.type === TankType.PREMIUM && (
|
</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
|
<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">
|
<Flex align="center" gap="1">
|
||||||
{protagonist.price.value / 400}
|
{protagonist.price.value.toLocaleString(locale)}
|
||||||
<img
|
<img
|
||||||
style={{ width: '1em', height: '1em' }}
|
style={{ width: '1em', height: '1em' }}
|
||||||
alt="gold"
|
alt={TankPriceType[protagonist.price.type]}
|
||||||
src={asset('icons/currencies/gold.webp')}
|
src={asset(
|
||||||
|
`icons/currencies/${
|
||||||
|
protagonist.price.type === TankPriceType.GOLD
|
||||||
|
? 'gold'
|
||||||
|
: 'silver'
|
||||||
|
}.webp`,
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Listing>
|
</Listing>
|
||||||
)}
|
<Listing label={strings.website.tools.tankopedia.meta.sale}>
|
||||||
<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}
|
|
||||||
>
|
|
||||||
<Flex align="center" gap="1">
|
<Flex align="center" gap="1">
|
||||||
{(
|
{(protagonist.price.value / 2).toLocaleString(locale)}
|
||||||
protagonist.research_cost.research_cost_type!
|
|
||||||
.value as number
|
|
||||||
).toLocaleString(locale)}
|
|
||||||
<img
|
<img
|
||||||
style={{ width: '1em', height: '1em' }}
|
style={{ width: '1em', height: '1em' }}
|
||||||
alt="xp"
|
alt={TankPriceType[protagonist.price.type]}
|
||||||
src={asset('icons/currencies/xp.webp')}
|
src={asset(
|
||||||
|
`icons/currencies/${
|
||||||
|
protagonist.price.type === TankPriceType.GOLD
|
||||||
|
? 'gold'
|
||||||
|
: 'silver'
|
||||||
|
}.webp`,
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Listing>
|
</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>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Flex>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user