Skip to content

Commit 9c865ac

Browse files
dragoni7dragoni7
committed
Improved grid layout for dashboard. Added dynamic resizing to number boxes.
1 parent 6d2b28d commit 9c865ac

File tree

4 files changed

+87
-72
lines changed

4 files changed

+87
-72
lines changed

‎src/app/routes/Dashboard.tsx

Lines changed: 47 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState, useMemo } from 'react';
2-
import { Box, Container, styled } from '@mui/system';
2+
import { Box, styled } from '@mui/system';
33
import { useDispatch, useSelector } from 'react-redux';
44
import { AppDispatch, RootState, store } from '../../store';
55
import { generatePermutations } from '../../features/armor-optimization/generate-permutations';
@@ -16,7 +16,6 @@ import {
1616
Character,
1717
CharacterClass,
1818
DecodedLoadoutData,
19-
DestinyArmor,
2019
FilteredPermutation,
2120
FragmentStatModifications,
2221
StatName,
@@ -44,53 +43,28 @@ import { decodeLoadout } from '../../features/loadouts/util/loadout-encoder';
4443
import {
4544
resetDashboard,
4645
updateSelectedCharacter,
47-
updateSelectedExoticClassCombo,
4846
updateSelectedExoticItemHash,
4947
} from '../../store/DashboardReducer';
5048
import StatModifications from '../../features/subclass/StatModifications';
51-
import { Grid, Paper } from '@mui/material';
49+
import { Grid } from '@mui/material';
5250
import { ManifestArmorStatMod, ManifestExoticArmor } from '../../types/manifest-types';
5351
import { SharedLoadoutDto } from '../../features/loadouts/types';
5452
import { updateProfileCharacters } from '../../store/ProfileReducer';
5553
import { getProfileData } from '../../util/profile-characters';
5654
import RefreshCharacters from '../../components/RefreshCharacters';
5755

58-
const PageContainer = styled(Box)(({ theme }) => ({
59-
display: 'flex',
60-
flexDirection: 'column',
61-
height: '100vh',
62-
overflow: 'hidden',
63-
}));
64-
65-
const ContentContainer = styled(Box)(({ theme }) => ({
66-
flex: 1,
67-
width: '100vw',
68-
overflowY: 'auto',
56+
const DashboardContent = styled(Grid)(({ theme }) => ({
6957
backgroundImage: `url(${greyBackground})`,
7058
backgroundSize: 'cover',
7159
backgroundPosition: 'center',
72-
padding: theme.spacing(3),
73-
paddingTop: '200px',
7460
}));
7561

76-
const HeaderWrapper = styled(Box)({
77-
position: 'fixed',
78-
top: 0,
79-
left: 0,
80-
right: 0,
81-
zIndex: 1100,
82-
});
83-
8462
const NumberBoxesContainer = styled(Box)(({ theme }) => ({
8563
marginTop: theme.spacing(4),
8664
marginLeft: theme.spacing(25),
8765
backgroundColor: 'rgba(0, 0, 0, 0.1)',
8866
backdropFilter: 'blur(5px)',
8967
borderRadius: 0,
90-
padding: theme.spacing(2),
91-
alignSelf: 'flex-start',
92-
width: 'auto',
93-
maxWidth: '100%',
9468
}));
9569

9670
export const Dashboard: React.FC = () => {
@@ -430,7 +404,7 @@ export const Dashboard: React.FC = () => {
430404
};
431405

432406
return (
433-
<PageContainer>
407+
<>
434408
{showAbilitiesModification && customizingSubclass ? (
435409
<SubclassCustomizationWrapper
436410
onBackClick={() => setShowAbilitiesModification(false)}
@@ -448,43 +422,56 @@ export const Dashboard: React.FC = () => {
448422
/>
449423
) : sharedLoadoutDto === undefined && selectedSubclass ? (
450424
<>
425+
<HeaderComponent
426+
emblemUrl={characters[selectedCharacterIndex]?.emblem?.secondarySpecial || ''}
427+
overlayUrl={characters[selectedCharacterIndex]?.emblem?.secondaryOverlay || ''}
428+
displayName={membership.bungieGlobalDisplayName}
429+
characters={characters}
430+
selectedCharacter={characters[selectedCharacterIndex]!}
431+
onCharacterClick={handleCharacterClick}
432+
/>
451433
<RefreshCharacters />
452-
<HeaderWrapper>
453-
<HeaderComponent
454-
emblemUrl={characters[selectedCharacterIndex]?.emblem?.secondarySpecial || ''}
455-
overlayUrl={characters[selectedCharacterIndex]?.emblem?.secondaryOverlay || ''}
456-
displayName={membership.bungieGlobalDisplayName}
457-
characters={characters}
458-
selectedCharacter={characters[selectedCharacterIndex]!}
459-
onCharacterClick={handleCharacterClick}
460-
/>
461-
</HeaderWrapper>
462-
<ContentContainer>
463-
<Grid container spacing={3} justifyContent={'center'} alignItems={'flex-start'}>
464-
<Grid item md={4.5}>
465-
<SingleDiamondButton
466-
subclasses={subclasses}
467-
selectedSubclass={selectedSubclass}
468-
onSubclassSelect={handleSubclassSelect}
469-
onSubclassRightClick={handleSubclassRightClick}
470-
/>
471-
<NumberBoxesContainer>
472-
<NumberBoxes />
473-
</NumberBoxesContainer>
434+
<Grid
435+
container
436+
sx={{ width: '100vw', height: '100vh', overflowY: 'auto', paddingTop: '130px' }}
437+
>
438+
<DashboardContent item container md={12}>
439+
<Grid item container direction="column" md={4.5} spacing={6} sx={{ marginTop: '3%' }}>
440+
<Grid item>
441+
<SingleDiamondButton
442+
subclasses={subclasses}
443+
selectedSubclass={selectedSubclass}
444+
onSubclassSelect={handleSubclassSelect}
445+
onSubclassRightClick={handleSubclassRightClick}
446+
/>
447+
</Grid>
448+
<Grid item>
449+
<NumberBoxesContainer>
450+
<NumberBoxes />
451+
</NumberBoxesContainer>
452+
</Grid>
474453
</Grid>
475-
476-
<Grid container item md={3} justifyContent={'center'} alignItems={'flex-start'}>
477-
<Grid item md={12}>
454+
<Grid
455+
container
456+
item
457+
md={3}
458+
spacing={3}
459+
direction="column"
460+
justifyContent={'flex-start'}
461+
alignItems={'center'}
462+
sx={{ marginTop: '3%' }}
463+
>
464+
<Grid item>
478465
<ExoticSelector
479466
selectedCharacter={characters[selectedCharacterIndex]!}
480467
selectedExoticItemHash={selectedExotic.itemHash}
481468
/>
482469
</Grid>
483-
<Grid item md={8} lg={6}>
470+
<Grid item>
484471
<StatModifications />
485472
</Grid>
486473
</Grid>
487-
<Grid item md={4.5}>
474+
<Grid item md={4.5} sx={{ marginTop: '3%' }}>
488475
{generatingPermutations ? (
489476
<p>Loading...</p>
490477
) : filteredPermutations ? (
@@ -496,13 +483,13 @@ export const Dashboard: React.FC = () => {
496483
<p>Loading....</p>
497484
)}
498485
</Grid>
499-
</Grid>
500-
</ContentContainer>
486+
</DashboardContent>
487+
</Grid>
501488
</>
502489
) : (
503490
<div>loading...</div>
504491
)}
505-
</PageContainer>
492+
</>
506493
);
507494
};
508495

‎src/components/RefreshCharacters.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,13 @@ export default function RefreshCharacters() {
1616

1717
return (
1818
<Box
19-
sx={{ position: 'fixed', top: '1%', right: '1%', zIndex: 9999, mixBlendMode: 'difference' }}
19+
sx={{
20+
position: 'absolute',
21+
top: '1%',
22+
right: '1%',
23+
zIndex: 9999,
24+
mixBlendMode: 'difference',
25+
}}
2026
>
2127
{refreshing ? (
2228
<CircularProgress color="inherit" />

‎src/features/armor-optimization/NumberBoxes.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,28 @@ interface NumberBoxProps {
2222

2323
const NumberBox = styled(ButtonBase, {
2424
shouldForwardProp: (prop) => prop !== 'isSelected',
25-
})<NumberBoxProps>(({ isSelected }) => ({
26-
width: 32, // Increased size
27-
height: 32, // Increased size
28-
lineHeight: '32px',
25+
})<NumberBoxProps>(({ isSelected, theme }) => ({
26+
width: '30px',
27+
height: '30px',
28+
[theme.breakpoints.between('lg', 'xl')]: {
29+
width: '50px',
30+
height: '50px',
31+
},
2932
textAlign: 'center',
3033
border: `1px solid ${isSelected ? '#bdab6d' : 'rgba(255, 255, 255, 0.5)'}`,
31-
margin: '0 2px', // Increased margin between boxes
34+
margin: '0 2px',
3235
backgroundColor: isSelected ? 'rgba(189, 171, 109, 0.2)' : 'transparent',
3336
color: isSelected ? '#bdab6d' : 'white',
3437
cursor: 'pointer',
35-
fontSize: 14, // Increased font size
38+
fontSize: 16,
3639
'&:hover': {
3740
backgroundColor: 'rgba(255, 255, 255, 0.1)',
3841
},
3942
}));
4043

4144
const StatIcon = styled('img')({
42-
width: 24,
43-
height: 24,
45+
width: '50%',
46+
height: '50%',
4447
marginRight: 12,
4548
});
4649

‎src/features/armor-optimization/StatsTable.tsx

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
import React, { useMemo, useState, useEffect } from 'react';
22
import { styled } from '@mui/material/styles';
3-
import { Box, Card, Grid, Typography, IconButton, Tooltip } from '@mui/material';
3+
import {
4+
Box,
5+
Card,
6+
Grid,
7+
Typography,
8+
IconButton,
9+
Tooltip,
10+
useMediaQuery,
11+
useTheme,
12+
} from '@mui/material';
413
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
514
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
615
import { FilteredPermutation, DestinyArmor, StatName } from '../../types/d2l-types';
@@ -115,7 +124,9 @@ const TableFooter = styled(Typography)(({ theme }) => ({
115124

116125
const StatsTable: React.FC<StatsTableProps> = ({ permutations, onPermutationClick }) => {
117126
const [currentPage, setCurrentPage] = useState(0);
118-
const itemsPerPage = 4;
127+
const theme = useTheme();
128+
const large = useMediaQuery(theme.breakpoints.between('lg', 'xl'));
129+
const [itemsPerPage, setItemsPerPage] = useState<number>(4);
119130

120131
const subclassConfig = useSelector(
121132
(state: RootState) => state.loadoutConfig.loadout.subclassConfig
@@ -143,11 +154,19 @@ const StatsTable: React.FC<StatsTableProps> = ({ permutations, onPermutationClic
143154
return modifications;
144155
}, [subclassConfig.fragments]);
145156

157+
useEffect(() => {
158+
if (large) {
159+
setItemsPerPage(6);
160+
} else {
161+
setItemsPerPage(4);
162+
}
163+
}, [large]);
164+
146165
const paginatedData = useMemo(() => {
147166
const start = currentPage * itemsPerPage;
148167
const end = start + itemsPerPage;
149168
return permutations.slice(start, end);
150-
}, [currentPage, permutations]);
169+
}, [currentPage, permutations, itemsPerPage]);
151170

152171
const calculateTotal = (perm: FilteredPermutation, stat: StatName) => {
153172
const baseSum = perm.permutation.reduce((sum, item) => sum + (item[stat] || 0), 0);

0 commit comments

Comments
 (0)