Улучшение дизайна после телепорт фичи

src/App.tsx

@@ -69,7 +69,7 @@ function AppBarContent() {
         <>
             {isDark ? (
                 <StyledAppBar position="sticky">
-                    <Container maxWidth="lg">
+                    <Container maxWidth="lg" sx={{ px: { xs: 1, sm: 3, md: 3 } }}>
                         <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
                             <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                                 <img src="/images/dowdelogo.png" alt="logo" style={{ height: 32, cursor: 'pointer' }} onClick={handleLogoClick}/>
@@ -85,7 +85,7 @@ function AppBarContent() {
                 </StyledAppBar>
             ) : (
                 <StyledAppBarLight position="sticky">
-                    <Container maxWidth="lg">
+                    <Container maxWidth="lg" sx={{ px: { xs: 1, sm: 3, md: 3 } }}>
                         <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
                             <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                                 <img src="/images/dowdelogo.png" alt="logo" style={{ height: 32, cursor: 'pointer' }} onClick={handleLogoClick}/>
@@ -110,7 +110,7 @@ function App() {
             <Box sx={{ minHeight: '100vh' }}>
                 <BrowserRouter>
                     <AppBarContent />
-                    <Container maxWidth="lg" sx={{ py: 4 }}>
+                    <Container maxWidth="lg" sx={{ py: 4, px: { xs: 1, sm: 3, md: 3 } }}>
                         <MyRoutes />
                     </Container>
                 </BrowserRouter>

src/classes/Ability.tsx

@@ -31,7 +31,7 @@ function Ability(props: IAbilityProps){
                 <span style={{fontSize: 20, color: textColor, display: 'flex', alignItems: 'center'}}>
                 {ability.activationType === "Passive ability" ? <img className="abilityIcon" src="/images/PassiveIcon.png"/> : <img className="abilityIcon" src={getIcon(ability.icon)}/>}
                     &nbsp; {ability.name ? ability.name : ability.fileName.charAt(0).toUpperCase() + ability.fileName.slice(1).replaceAll('_', ' ').replace('.rgd', '')}
-                    <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}>  ({ability.activationType})</i>
+                    <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)', marginLeft: 4}}>({ability.activationType})</i>
                 </span>
 
         </AccordionSummary>

src/classes/AbilityFull.tsx

@@ -34,7 +34,10 @@ interface IAbilityFullState {
 
 export default function AbilityFull(props: { abilityId?: number, mod: IMod, race: Irace, isChild?: boolean, abilityFull?: IAbilityFill }) {
     const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const isSmallMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    const isMediumMobile = useMediaQuery(theme.breakpoints.between('sm', 'md'));
+    const isMobile = isSmallMobile || isMediumMobile;
+    const columnsPerRow = isSmallMobile ? 4 : 6;
     const isDark = theme.palette.mode === 'dark';
     const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
@@ -233,8 +236,8 @@ export default function AbilityFull(props: { abilityId?: number, mod: IMod, race
                                         ];
 
                                         const chunks = [];
-                                        for (let i = 0; i < items.length; i += 5) {
+                                        for (let i = 0; i < items.length; i += columnsPerRow) {
-                                            chunks.push(items.slice(i, i + 5));
+                                            chunks.push(items.slice(i, i + columnsPerRow));
                                         }
 
                                         return (<>{chunks.map((chunk, chunkIndex) => (

src/classes/DpsTable.tsx

@@ -17,7 +17,10 @@ import {StyledTableCell} from "../commons/StyledTableCell";
 
 export default function DpsTable(props: { mod: IMod, minDamageValue?: number, minDamage?: number, maxDamage?: number, piercings: IPiercing[], targetFilter: IArmorType[], moraleDamage?: number }) {
     const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const isSmallMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    const isMediumMobile = useMediaQuery(theme.breakpoints.between('sm', 'md'));
+    const isMobile = isSmallMobile || isMediumMobile;
+    const columnsPerRow = isSmallMobile ? 4 : 6;
 
         function getPiercingK(armorType: string): number|null {
             if(props.targetFilter.length > 0 && props.targetFilter.find(tf => tf.name == armorType) === undefined) return null
@@ -118,8 +121,8 @@ export default function DpsTable(props: { mod: IMod, minDamageValue?: number, mi
             ];
 
             const chunks = [];
-            for (let i = 0; i < items.length; i += 5) {
+            for (let i = 0; i < items.length; i += columnsPerRow) {
-                chunks.push(items.slice(i, i + 5));
+                chunks.push(items.slice(i, i + columnsPerRow));
             }
 
             return (<>{chunks.map((chunk, chunkIndex) => (

src/classes/Jump.tsx

@@ -21,9 +21,9 @@ function Jump(props: IJumpProps) {
     const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
     const jumps = props.jumps;
-    const isTeleport = jumps.teleport;
+    const isTeleport = jumps.isTeleport;
     const icon = isTeleport ? "/images/Teleport.png" : "/images/Jump.png";
-    const title = isTeleport ? "Teleport" : "Jumps";
+    const title = isTeleport ? "Teleport" : "Jump";
 
     return (
         <div style={{marginBottom: 10}}>
@@ -64,9 +64,10 @@ function Jump(props: IJumpProps) {
                                     rows.push({ label: "Go down time", value: <span><img style={{verticalAlign: "top"}} src="/images/Time_icon.webp"/>&nbsp;{jumps.goDownTime}s</span> });
                                 }
                             }
+                            const chunkSize = isTeleport ? 2 : 3;
                             const chunks: { label: string; value: React.ReactNode }[][] = [];
-                            for (let i = 0; i < rows.length; i += 3) {
+                            for (let i = 0; i < rows.length; i += chunkSize) {
-                                chunks.push(rows.slice(i, i + 3));
+                                chunks.push(rows.slice(i, i + chunkSize));
                             }
                             return chunks.map((chunk, chunkIndex) => (
                                 <Grid2 key={chunkIndex} size={{xs: 12, md: 4}}>

src/classes/Weapon.tsx

@@ -52,7 +52,7 @@ class Weapon extends React.Component<IWeaponProps, any> {
                                 <img className="weaponIcon" src="/images/MeleeStance_icon_bw.jpg"/> :
                                 <img className="weaponIcon" src="/images/RangedStance_icon_bw.jpg"/>
                         )} &nbsp; {weapon.name ? weapon.name : this.humanReadableName(weapon.filename)}
-                        {this.props.isDefault && <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}> (default)</i>}
+                        {this.props.isDefault && <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)', marginLeft: 4}}>(default)</i>}
                     </span>
                 </AccordionSummary>
                 <AccordionDetails sx={{color: textColor}}>

src/classes/WeaponFull.tsx

@@ -29,7 +29,10 @@ interface IWeaponFull {
 
 export default function WeaponFull(props: {weaponId: number, isDefault: Boolean, mod: IMod, race: Irace, haveReinforceMenu: Boolean}) {
     const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const isSmallMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    const isMediumMobile = useMediaQuery(theme.breakpoints.between('sm', 'md'));
+    const isMobile = isSmallMobile || isMediumMobile;
+    const columnsPerRow = isSmallMobile ? 4 : 6;
     const isDark = theme.palette.mode === 'dark';
     const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
 
@@ -274,8 +277,8 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
                                 ];
 
                                 const chunks = [];
-                                for (let i = 0; i < items.length; i += 5) {
+                                for (let i = 0; i < items.length; i += columnsPerRow) {
-                                    chunks.push(items.slice(i, i + 5));
+                                    chunks.push(items.slice(i, i + columnsPerRow));
                                 }
 
                                 return chunks.map((chunk, chunkIndex) => (

src/pages/UnitPage.tsx

@@ -198,7 +198,7 @@ function Unit(unit: IUnit, mod: IMod, theme: Theme) {
                                 </TableRow>
                                 {(unit?.reinforceTime !== 0 && unit.reinforceTime !== null && unit.squadMaxSize > 1) &&
                                     <TableRow>
-                                        <TableCell >Reinforce cost</TableCell>
+                                        <TableCell>Reinforce cost</TableCell>
                                         <TableCell>
                                             {unit.reinforceCostRequisition && unit.reinforceCostRequisition > 0 ?
                                                 <span>&nbsp;<img style={{verticalAlign: "top"}}
@@ -355,7 +355,6 @@ function Unit(unit: IUnit, mod: IMod, theme: Theme) {
                 </Grid2>}
 
                 {unit.jumps != null && <Grid2 size={12}>
-                    <SectionTitle>Jumps</SectionTitle>
                     <Jump jumps={unit.jumps} race={unit.race} mod={mod}/>
                 </Grid2>}
 

src/types/IUnit.tsx

@@ -24,7 +24,7 @@ export interface IJumps {
     chargeMax: number;
     setupTime: number;
     goDownTime?: number;
-    teleport: boolean;
+    isTeleport: boolean;
     requirements: IRequirement | null;
 }