Merge pull request #87 from dragoni7/dashboard-layout

Dashboard layout
dragoni7 · Sep 16, 2024 · 9920763 · 9920763
2 parents 6d2b28d + aca8b3b
commit 9920763
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 80 deletions.
diff --git a/src/app/routes/Dashboard.tsx b/src/app/routes/Dashboard.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react';
-import { Box, Container, styled } from '@mui/system';
+import { Box, styled } from '@mui/system';
 import { useDispatch, useSelector } from 'react-redux';
-import { AppDispatch, RootState, store } from '../../store';
+import { AppDispatch, RootState } from '../../store';
 import { generatePermutations } from '../../features/armor-optimization/generate-permutations';
 import {
   filterFromSharedLoadout,
@@ -16,7 +16,6 @@ import {
   Character,
   CharacterClass,
   DecodedLoadoutData,
-  DestinyArmor,
   FilteredPermutation,
   FragmentStatModifications,
   StatName,
@@ -44,53 +43,28 @@ import { decodeLoadout } from '../../features/loadouts/util/loadout-encoder';
 import {
   resetDashboard,
   updateSelectedCharacter,
-  updateSelectedExoticClassCombo,
   updateSelectedExoticItemHash,
 } from '../../store/DashboardReducer';
 import StatModifications from '../../features/subclass/StatModifications';
-import { Grid, Paper } from '@mui/material';
+import { Grid } from '@mui/material';
 import { ManifestArmorStatMod, ManifestExoticArmor } from '../../types/manifest-types';
 import { SharedLoadoutDto } from '../../features/loadouts/types';
 import { updateProfileCharacters } from '../../store/ProfileReducer';
 import { getProfileData } from '../../util/profile-characters';
 import RefreshCharacters from '../../components/RefreshCharacters';
 
-const PageContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100vh',
-  overflow: 'hidden',
-}));
-
-const ContentContainer = styled(Box)(({ theme }) => ({
-  flex: 1,
-  width: '100vw',
-  overflowY: 'auto',
+const DashboardContent = styled(Grid)(({ theme }) => ({
   backgroundImage: `url(${greyBackground})`,
   backgroundSize: 'cover',
   backgroundPosition: 'center',
-  padding: theme.spacing(3),
-  paddingTop: '200px',
 }));
 
-const HeaderWrapper = styled(Box)({
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  right: 0,
-  zIndex: 1100,
-});
-
 const NumberBoxesContainer = styled(Box)(({ theme }) => ({
   marginTop: theme.spacing(4),
   marginLeft: theme.spacing(25),
   backgroundColor: 'rgba(0, 0, 0, 0.1)',
   backdropFilter: 'blur(5px)',
   borderRadius: 0,
-  padding: theme.spacing(2),
-  alignSelf: 'flex-start',
-  width: 'auto',
-  maxWidth: '100%',
 }));
 
 export const Dashboard: React.FC = () => {
@@ -430,7 +404,7 @@ export const Dashboard: React.FC = () => {
   };
 
   return (
-    <PageContainer>
+    <>
       {showAbilitiesModification && customizingSubclass ? (
         <SubclassCustomizationWrapper
           onBackClick={() => setShowAbilitiesModification(false)}
@@ -448,43 +422,56 @@ export const Dashboard: React.FC = () => {
         />
       ) : sharedLoadoutDto === undefined && selectedSubclass ? (
         <>
+          <HeaderComponent
+            emblemUrl={characters[selectedCharacterIndex]?.emblem?.secondarySpecial || ''}
+            overlayUrl={characters[selectedCharacterIndex]?.emblem?.secondaryOverlay || ''}
+            displayName={membership.bungieGlobalDisplayName}
+            characters={characters}
+            selectedCharacter={characters[selectedCharacterIndex]!}
+            onCharacterClick={handleCharacterClick}
+          />
           <RefreshCharacters />
-          <HeaderWrapper>
-            <HeaderComponent
-              emblemUrl={characters[selectedCharacterIndex]?.emblem?.secondarySpecial || ''}
-              overlayUrl={characters[selectedCharacterIndex]?.emblem?.secondaryOverlay || ''}
-              displayName={membership.bungieGlobalDisplayName}
-              characters={characters}
-              selectedCharacter={characters[selectedCharacterIndex]!}
-              onCharacterClick={handleCharacterClick}
-            />
-          </HeaderWrapper>
-          <ContentContainer>
-            <Grid container spacing={3} justifyContent={'center'} alignItems={'flex-start'}>
-              <Grid item md={4.5}>
-                <SingleDiamondButton
-                  subclasses={subclasses}
-                  selectedSubclass={selectedSubclass}
-                  onSubclassSelect={handleSubclassSelect}
-                  onSubclassRightClick={handleSubclassRightClick}
-                />
-                <NumberBoxesContainer>
-                  <NumberBoxes />
-                </NumberBoxesContainer>
+          <Grid
+            container
+            sx={{ width: '100vw', height: '100vh', overflowY: 'auto', paddingTop: '130px' }}
+          >
+            <DashboardContent item container md={12}>
+              <Grid item container direction="column" md={4.5} spacing={6} sx={{ marginTop: '3%' }}>
+                <Grid item>
+                  <SingleDiamondButton
+                    subclasses={subclasses}
+                    selectedSubclass={selectedSubclass}
+                    onSubclassSelect={handleSubclassSelect}
+                    onSubclassRightClick={handleSubclassRightClick}
+                  />
+                </Grid>
+                <Grid item>
+                  <NumberBoxesContainer>
+                    <NumberBoxes />
+                  </NumberBoxesContainer>
+                </Grid>
               </Grid>
-
-              <Grid container item md={3} justifyContent={'center'} alignItems={'flex-start'}>
-                <Grid item md={12}>
+              <Grid
+                container
+                item
+                md={3}
+                spacing={3}
+                direction="column"
+                justifyContent={'flex-start'}
+                alignItems={'center'}
+                sx={{ marginTop: '3%' }}
+              >
+                <Grid item>
                   <ExoticSelector
                     selectedCharacter={characters[selectedCharacterIndex]!}
                     selectedExoticItemHash={selectedExotic.itemHash}
                   />
                 </Grid>
-                <Grid item md={8} lg={6}>
+                <Grid item>
                   <StatModifications />
                 </Grid>
               </Grid>
-              <Grid item md={4.5}>
+              <Grid item md={4.5} sx={{ marginTop: '3%' }}>
                 {generatingPermutations ? (
                   <p>Loading...</p>
                 ) : filteredPermutations ? (
@@ -496,13 +483,13 @@ export const Dashboard: React.FC = () => {
                   <p>Loading....</p>
                 )}
               </Grid>
-            </Grid>
-          </ContentContainer>
+            </DashboardContent>
+          </Grid>
         </>
       ) : (
         <div>loading...</div>
       )}
-    </PageContainer>
+    </>
   );
 };
 

diff --git a/src/components/LoadoutCustomization.tsx b/src/components/LoadoutCustomization.tsx
@@ -7,7 +7,6 @@ import EquipLoadout from '../features/loadouts/components/EquipLoadout';
 import AbilitiesModification from '../features/subclass/AbilitiesModification';
 import ShareLoadout from '../features/loadouts/components/ShareLoadout';
 import { SubclassConfig } from '../types/d2l-types';
-import SaveLoadout from '../features/loadouts/components/SaveLoadout';
 import TotalStatsDisplay from '../features/subclass/TotalStatsDisplay';
 
 interface LoadoutCustomizationProps {
@@ -38,9 +37,7 @@ const LoadoutCustomization: React.FC<LoadoutCustomizationProps> = ({
     <Box
       sx={{
         width: '100vw',
-        display: 'flex',
-        flexGrow: 1,
-        position: 'relative',
+        height: '100vh',
         overflow: 'auto',
         '&::before': {
           content: '""',
@@ -83,7 +80,7 @@ const LoadoutCustomization: React.FC<LoadoutCustomizationProps> = ({
         }}
       />
 
-      <Grid container columns={2} sx={{ position: 'relative', zIndex: 3 }}>
+      <Grid container columns={2} sx={{ position: 'relative', zIndex: 3, height: '100%' }}>
         <Grid item md={1}>
           <TransparentButton
             onClick={onBackClick}
@@ -113,7 +110,7 @@ const LoadoutCustomization: React.FC<LoadoutCustomizationProps> = ({
         >
           <TotalStatsDisplay />
         </Grid>
-        <Grid item md={1} sx={{ textAlign: 'center' }}>
+        <Grid item md={1} sx={{ textAlign: 'center', alignContent: 'end', paddingBottom: '6px' }}>
           <EquipLoadout />
           <ShareLoadout />
         </Grid>

diff --git a/src/components/RefreshCharacters.tsx b/src/components/RefreshCharacters.tsx
@@ -16,7 +16,13 @@ export default function RefreshCharacters() {
 
   return (
     <Box
-      sx={{ position: 'fixed', top: '1%', right: '1%', zIndex: 9999, mixBlendMode: 'difference' }}
+      sx={{
+        position: 'absolute',
+        top: '1%',
+        right: '1%',
+        zIndex: 9999,
+        mixBlendMode: 'difference',
+      }}
     >
       {refreshing ? (
         <CircularProgress color="inherit" />

diff --git a/src/features/armor-optimization/NumberBoxes.tsx b/src/features/armor-optimization/NumberBoxes.tsx
@@ -22,25 +22,28 @@ interface NumberBoxProps {
 
 const NumberBox = styled(ButtonBase, {
   shouldForwardProp: (prop) => prop !== 'isSelected',
-})<NumberBoxProps>(({ isSelected }) => ({
-  width: 32, // Increased size
-  height: 32, // Increased size
-  lineHeight: '32px',
+})<NumberBoxProps>(({ isSelected, theme }) => ({
+  width: '30px',
+  height: '30px',
+  [theme.breakpoints.between('lg', 'xl')]: {
+    width: '50px',
+    height: '50px',
+  },
   textAlign: 'center',
   border: `1px solid ${isSelected ? '#bdab6d' : 'rgba(255, 255, 255, 0.5)'}`,
-  margin: '0 2px', // Increased margin between boxes
+  margin: '0 2px',
   backgroundColor: isSelected ? 'rgba(189, 171, 109, 0.2)' : 'transparent',
   color: isSelected ? '#bdab6d' : 'white',
   cursor: 'pointer',
-  fontSize: 14, // Increased font size
+  fontSize: 16,
   '&:hover': {
     backgroundColor: 'rgba(255, 255, 255, 0.1)',
   },
 }));
 
 const StatIcon = styled('img')({
-  width: 24,
-  height: 24,
+  width: '50%',
+  height: '50%',
   marginRight: 12,
 });
 

diff --git a/src/features/armor-optimization/StatsTable.tsx b/src/features/armor-optimization/StatsTable.tsx
@@ -1,6 +1,15 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, Card, Grid, Typography, IconButton, Tooltip } from '@mui/material';
+import {
+  Box,
+  Card,
+  Grid,
+  Typography,
+  IconButton,
+  Tooltip,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { FilteredPermutation, DestinyArmor, StatName } from '../../types/d2l-types';
@@ -115,7 +124,9 @@ const TableFooter = styled(Typography)(({ theme }) => ({
 
 const StatsTable: React.FC<StatsTableProps> = ({ permutations, onPermutationClick }) => {
   const [currentPage, setCurrentPage] = useState(0);
-  const itemsPerPage = 4;
+  const theme = useTheme();
+  const large = useMediaQuery(theme.breakpoints.between('lg', 'xl'));
+  const [itemsPerPage, setItemsPerPage] = useState<number>(4);
 
   const subclassConfig = useSelector(
     (state: RootState) => state.loadoutConfig.loadout.subclassConfig
@@ -143,11 +154,19 @@ const StatsTable: React.FC<StatsTableProps> = ({ permutations, onPermutationClic
     return modifications;
   }, [subclassConfig.fragments]);
 
+  useEffect(() => {
+    if (large) {
+      setItemsPerPage(5);
+    } else {
+      setItemsPerPage(4);
+    }
+  }, [large]);
+
   const paginatedData = useMemo(() => {
     const start = currentPage * itemsPerPage;
     const end = start + itemsPerPage;
     return permutations.slice(start, end);
-  }, [currentPage, permutations]);
+  }, [currentPage, permutations, itemsPerPage]);
 
   const calculateTotal = (perm: FilteredPermutation, stat: StatName) => {
     const baseSum = perm.permutation.reduce((sum, item) => sum + (item[stat] || 0), 0);

diff --git a/src/features/loadouts/components/SaveLoadout.tsx b/src/features/loadouts/components/SaveLoadout.tsx
@@ -191,7 +191,7 @@ export default function SaveLoadout() {
     <>
       <Button onClick={() => setLoadoutDrawerOpen(true)}>SAVE IN-GAME</Button>
       <Drawer open={loadoutDrawerOpen} anchor="right">
-        <Box sx={{ width: '24vw' }}>
+        <Box sx={{ width: '18vw' }}>
           {identifiersSet ? SelectLoadoutSlotDrawer : SetIdentifiersDrawer}
         </Box>
       </Drawer>