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

feat: more responsive

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-01-26 22:44:15 -06:00
1 parent 8d1745d47e
commit ea68c8e82c
4 files changed
+112 -119
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx
+2 -6
View File
@@ -1,5 +1,5 @@
import { Flex } from '@radix-ui/themes';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import * as styles from '../../../../page.css';
interface ConfigurationChildWrapperProps { interface ConfigurationChildWrapperProps {
children: ReactNode; children: ReactNode;
@@ -8,9 +8,5 @@ interface ConfigurationChildWrapperProps {
export function ConfigurationChildWrapper({ export function ConfigurationChildWrapper({
children, children,
}: ConfigurationChildWrapperProps) { }: ConfigurationChildWrapperProps) {
return ( return <div className={styles.configurationChild}>{children}</div>;
<Flex direction="column" gap="2" align="end" style={{ width: '100%' }}>
{children}
</Flex>
);
} }
src/app/tools/tankopedia/[id]/components/Characteristics/components/Crew.tsx
+4 -9
View File
@@ -9,17 +9,12 @@ export function Crew() {
<Flex <Flex
align="center" align="center"
gap="4" gap="4"
style={{
width: '100%',
}}
justify="end" justify="end"
style={{
width: 240,
}}
> >
<Slider <Slider min={50} max={100} defaultValue={[100]} style={{ flex: 1 }} />
min={50}
max={100}
defaultValue={[100]}
style={{ flex: 1, maxWidth: 208 }}
/>
<TextField.Root style={{ width: 64 }}> <TextField.Root style={{ width: 64 }}>
<TextField.Input defaultValue={100} /> <TextField.Input defaultValue={100} />
<TextField.Slot>%</TextField.Slot> <TextField.Slot>%</TextField.Slot>
src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+76 -93
View File
@@ -1,4 +1,5 @@
import { Flex, Heading } from '@radix-ui/themes'; import { Flex, Heading } from '@radix-ui/themes';
import * as styles from '../../../page.css';
import { Camouflage } from './components/Camouflage'; import { Camouflage } from './components/Camouflage';
import { Consumables } from './components/Consumables'; import { Consumables } from './components/Consumables';
import { Crew } from './components/Crew'; import { Crew } from './components/Crew';
@@ -9,106 +10,88 @@ import { Provisions } from './components/Provisions';
export function Characteristics() { export function Characteristics() {
return ( return (
<Flex gap="4" direction="column"> <Flex className={styles.characteristics}>
<Flex gap="8"> <div className={styles.configuration}>
<Flex <Heading>Configure</Heading>
style={{ flex: 1 }}
wrap="wrap"
direction="column"
gap="4"
align="end"
>
<Heading>Configure</Heading>
<Modules /> <Modules />
<Equipments /> <Equipments />
<Crew /> <Crew />
<Consumables /> <Consumables />
<Provisions /> <Provisions />
<Camouflage /> <Camouflage />
</Flex> </div>
<Flex style={{ flex: 1 }} wrap="wrap" direction="column" gap="4"> <Flex style={{ flex: 1 }} wrap="wrap" direction="column" gap="4">
<Heading>Statistics</Heading> <Heading>Statistics</Heading>
<Flex direction="column" gap="6"> <Flex direction="column" gap="6">
<Flex direction="column" gap="2"> <Flex direction="column" gap="2">
<Heading size="4">Survivability</Heading> <Heading size="4">Survivability</Heading>
<Info name="Health" value="2014" unit="hp" /> <Info name="Health" value="2014" unit="hp" />
</Flex> </Flex>
<Flex direction="column" gap="2"> <Flex direction="column" gap="2">
<Heading size="4">Lethality</Heading> <Heading size="4">Lethality</Heading>
<Info name="Armor damage" value="330" unit="hp" /> <Info name="Armor damage" value="330" unit="hp" />
<Info indent name="Module damage" value="125" unit="hp" /> <Info indent name="Module damage" value="125" unit="hp" />
<Info indent name="Caliber" value="100" unit="mm" /> <Info indent name="Caliber" value="100" unit="mm" />
<Info name="Penetration" value="257" unit="mm" /> <Info name="Penetration" value="257" unit="mm" />
<Info indent name="At 500m" value="240" unit="mm" /> <Info indent name="At 500m" value="240" unit="mm" />
<Info name="Damage per minute" value="2316" unit="hp / min" /> <Info name="Damage per minute" value="2316" unit="hp / min" />
<Info indent name="Maximum" value="2316" unit="hp / min" /> <Info indent name="Maximum" value="2316" unit="hp / min" />
<Info <Info indent name="Effective at 60s" value="2316" unit="hp / min" />
indent <Info name="Reload" value="5.73" unit="s" />
name="Effective at 60s" <Info name="Shell velocity" value="1535" unit="m/s" />
value="2316" <Info name="Aim time" value="1.72" unit="s" />
unit="hp / min" <Info name="Dispersion" value="0.326" unit="m" />
/> <Info indent name="On move" value="0.100" unit="m" />
<Info name="Reload" value="5.73" unit="s" /> <Info indent name="On hull traverse" value="0.100" unit="m" />
<Info name="Shell velocity" value="1535" unit="m/s" /> <Info indent name="On turret traverse" value="0.070" unit="m" />
<Info name="Aim time" value="1.72" unit="s" /> <Info indent name="On shoot" value="3.500" unit="m" />
<Info name="Dispersion" value="0.326" unit="m" /> </Flex>
<Info indent name="On move" value="0.100" unit="m" />
<Info indent name="On hull traverse" value="0.100" unit="m" />
<Info indent name="On turret traverse" value="0.070" unit="m" />
<Info indent name="On shoot" value="3.500" unit="m" />
</Flex>
<Flex direction="column" gap="2"> <Flex direction="column" gap="2">
<Heading size="4">Flexibility</Heading> <Heading size="4">Flexibility</Heading>
<Info name="Gun depression" value="20" unit="°" /> <Info name="Gun depression" value="20" unit="°" />
<Info indent name="Elevation" value="7" unit="°" /> <Info indent name="Elevation" value="7" unit="°" />
<Info indent name="Azimuth" value="30, 30" unit="°" /> <Info indent name="Azimuth" value="30, 30" unit="°" />
</Flex> </Flex>
<Flex direction="column" gap="2"> <Flex direction="column" gap="2">
<Heading size="4">Mobility</Heading> <Heading size="4">Mobility</Heading>
<Info name="Weight" value="45" unit="mt" /> <Info name="Weight" value="45" unit="mt" />
<Info name="Speed forwards" value="55" unit="km/s" /> <Info name="Speed forwards" value="55" unit="km/s" />
<Info indent name="Backward" value="20" unit="km/s" /> <Info indent name="Backward" value="20" unit="km/s" />
<Info <Info
name="Effective power on hard terrain" name="Effective power on hard terrain"
value="36.86" value="36.86"
unit="hp/kg" unit="hp/kg"
/> />
<Info <Info indent name="On medium terrain" value="36.86" unit="hp/kg" />
indent <Info indent name="On soft terrain" value="36.86" unit="hp/kg" />
name="On medium terrain" <Info
value="36.86" name="Traverse speed on hard terrain"
unit="hp/kg" value="36.86"
/> unit="°/s"
<Info indent name="On soft terrain" value="36.86" unit="hp/kg" /> />
<Info <Info indent name="On medium terrain" value="36.86" unit="°/s" />
name="Traverse speed on hard terrain" <Info indent name="On soft terrain" value="36.86" unit="°/s" />
value="36.86" </Flex>
unit="°/s"
/>
<Info indent name="On medium terrain" value="36.86" unit="°/s" />
<Info indent name="On soft terrain" value="36.86" unit="°/s" />
</Flex>
<Flex direction="column" gap="2"> <Flex direction="column" gap="2">
<Heading size="4">Stealth</Heading> <Heading size="4">Stealth</Heading>
<Info name="View range" value="302" unit="m" /> <Info name="View range" value="302" unit="m" />
<Info name="Size" value="6.21 x 2.43 x 2.00" unit="m" /> <Info name="Size" value="6.21 x 2.43 x 2.00" unit="m" />
<Info name="Camouflage when still" value="30.00" unit="%" /> <Info name="Camouflage when still" value="30.00" unit="%" />
<Info indent name="When moving" value="30.00" unit="%" /> <Info indent name="When moving" value="30.00" unit="%" />
<Info indent name="When shooting still" value="30.00" unit="%" /> <Info indent name="When shooting still" value="30.00" unit="%" />
<Info <Info
indent indent
name="When shooting while moving" name="When shooting while moving"
value="30.00" value="30.00"
unit="%" unit="%"
/> />
</Flex>
</Flex> </Flex>
</Flex> </Flex>
</Flex> </Flex>
src/app/tools/tankopedia/page.css.ts
+30 -11
View File
@@ -56,19 +56,38 @@ export const alignTopRight = style({
}, },
}); });
export const configure = style({ export const characteristics = style({
display: 'grid', display: 'flex',
gridTemplateColumns: '1fr 1fr', gap: 32,
gap: 16,
'@media': {
'screen and (max-width: 800px)': {
flexDirection: 'column',
},
},
}); });
export const configureRight = style({ export const configurationChild = style({
display: 'flex',
gap: 8,
flexDirection: 'column',
'@media': {
'screen and (min-width: 801px)': {
alignItems: 'end',
},
},
});
export const configuration = style({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: 8, gap: 16,
}); flex: 1,
export const configureLeft = style({
display: 'flex', '@media': {
flexDirection: 'column', 'screen and (min-width: 801px)': {
gap: 8, alignItems: 'end',
},
},
}); });