From ea68c8e82c4bd44e31758635a29695317b59e878 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 26 Jan 2024 22:44:15 -0600
Subject: [PATCH] feat: more responsive

---
 .../components/ConfigurationChildWrapper.tsx  |   8 +-
 .../Characteristics/components/Crew.tsx       |  13 +-
 .../[id]/components/Characteristics/index.tsx | 169 ++++++++----------
 src/app/tools/tankopedia/page.css.ts          |  41 +++--
 4 files changed, 112 insertions(+), 119 deletions(-)

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