Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: responsiveness #17

Merged
merged 5 commits into from
Aug 12, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: responsive footer | graph | layout
  • Loading branch information
0xtiti committed Aug 8, 2024
commit d85ca138c00a362c6b0497fc7a5587b736f82d31
5 changes: 4 additions & 1 deletion src/components/ChainInformation.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Grid, Typography, styled, Box } from '@mui/material';
import { useTranslation } from 'next-i18next';
import { useMediaQuery } from '@mui/material';

import { InfoBox } from '~/components';
import { useData, useCustomTheme } from '~/hooks';
Expand Down Expand Up @@ -101,12 +102,14 @@ export const ChainInformation = () => {

export const DataContainer = styled(Box)(() => {
const { currentTheme, theme } = useCustomTheme();
const isMobile = useMediaQuery('(max-width:600px)');

return {
background: theme === 'dark' ? currentTheme.backgroundTertiary : currentTheme.backgroundSecondary,
borderRadius: currentTheme.borderRadius,
border: currentTheme.border,
display: 'grid',
gridTemplateColumns: 'repeat(4, 1fr)',
gridTemplateColumns: isMobile ? 'repeat(1, 1fr)' : 'repeat(4, 1fr)',
};
});

Expand Down
2 changes: 1 addition & 1 deletion src/components/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export const DataTable = ({ chains }: TableProps) => {
export const STableContainer = styled(TableContainer)(() => {
const { currentTheme } = useCustomTheme();
return {
width: '75rem',
width: '100%',
borderRadius: currentTheme.borderRadius,
border: currentTheme.border,
overflow: 'hidden',
Expand Down
78 changes: 67 additions & 11 deletions src/components/TotalValueLocked.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Typography, Grid, styled } from '@mui/material';
import { Box, Typography, Grid, styled, useMediaQuery, useTheme } from '@mui/material';
import { useTranslation } from 'next-i18next';
import { TvlData } from '~/types';
import { TvlContentBox } from '~/components';
Expand All @@ -9,17 +9,73 @@ interface TotalValueLockedProps {
}

export const TotalValueLocked = ({ tvl }: TotalValueLockedProps) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

return isMobile ? <MobileTvlContainer tvl={tvl} /> : <DesktopTvlContainer tvl={tvl} />;
Comment on lines 11 to +14
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would be nice if we can split these components into different files in another pr

};

const MobileTvlContainer = ({ tvl }: TotalValueLockedProps) => {
const { t } = useTranslation();

const renderTvlContent = (
data: TvlData,
index: number,
height: string,
xs: number,
smallCard?: boolean,
isLast?: boolean,
) => (
<Grid item xs={xs} key={index}>
<GridContainer imageUrl={data.imageUrl} height={height} smallCard={smallCard}>
<TvlContentBox
avatar={data.imageUrl}
token={data.token}
total={data.total}
tokenName={data.tokenName}
isLast={isLast}
/>
</GridContainer>
</Grid>
);

return (
<TvlContainer container spacing={0.5}>
{/* First item: full width */}
{renderTvlContent(tvl[0], 0, '12rem', 12)}

{/* Second item: full width, half height */}
{renderTvlContent(tvl[1], 1, '6rem', 12)}

{/* Third and Fourth items: half width each */}
<Grid item container xs={12} spacing={0.5}>
{renderTvlContent(tvl[2], 2, '6rem', 6)}
{renderTvlContent(tvl[3], 3, '6rem', 6)}
</Grid>

{/* Fifth item: half width */}
<Grid item container xs={12} spacing={0.5}>
{renderTvlContent(tvl[4], 4, '5rem', 6)}

{/* Sixth item: two-thirds width */}
<Grid item container xs={6} spacing={0.5}>
{renderTvlContent(tvl[5], 5, '5rem', 9)}
<Grid item xs={3}>
<GridContainer height='5rem'>
<OthersBox>
<OthersText>{t('HOME.LOCKEDASSETS.others')}</OthersText>
</OthersBox>
</GridContainer>
</Grid>
</Grid>
</Grid>
</TvlContainer>
);
};

const DesktopTvlContainer = ({ tvl }: TotalValueLockedProps) => {
const { t } = useTranslation();

/**
* Renders the TVL content within a grid container.
* @param data - The TVL data.
* @param index - The index of the item in the array.
* @param height - The height of the container.
* @param xs - The grid size for the container.
* @param smallCard - Whether the card is small or not.
* @param isLast - Whether the card is the last one or not.
*/
const renderTvlContent = (
data: TvlData,
index: number,
Expand Down Expand Up @@ -74,7 +130,7 @@ export const TotalValueLocked = ({ tvl }: TotalValueLockedProps) => {
const TvlContainer = styled(Grid)({
display: 'flex',
flexWrap: 'wrap',
width: '75rem',
alignItems: 'flex-start',
});

interface GridContainerProps {
Expand Down
6 changes: 5 additions & 1 deletion src/containers/ChainDetail/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Box, styled } from '@mui/material';
import { useMediaQuery } from '@mui/material';

import { ChainMetadata } from './ChainMetadata';
import { ChainDescription } from './ChainDescription';
Expand All @@ -13,8 +14,11 @@ export const ChainDetail = () => {
};

const ChainContainer = styled(Box)(() => {
const isMobile = useMediaQuery('(max-width:600px)');

return {
width: '85%',
width: '100%',
padding: isMobile ? '0 1rem' : '0 7rem',
display: 'flex',
flexDirection: 'column',
gap: '4rem',
Expand Down
5 changes: 3 additions & 2 deletions src/containers/Dashboard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useTranslation } from 'next-i18next';

import { NotFound, DataTable, Title } from '~/components';
import { useData, useStateContext } from '~/hooks';
import { StyledSection } from '~/containers';

export const Dashboard = () => {
const { t } = useTranslation();
Expand All @@ -22,13 +23,13 @@ export const Dashboard = () => {
const availableChains = filteredChains?.length > 0;

return (
<section>
<StyledSection>
<header>
<Title title={t('HOME.DASHBOARD.title')} />
</header>

{availableChains && <DataTable chains={filteredChains} />}
{!availableChains && <NotFound text={t('HOME.DASHBOARD.notFound')} />}
</section>
</StyledSection>
);
};
8 changes: 5 additions & 3 deletions src/containers/Footer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { styled } from '@mui/material/styles';
import { Box, Typography } from '@mui/material';
import Image from 'next/image';
import Link from 'next/link';
import { useMediaQuery } from '@mui/material';

import WonderlandDark from '~/assets/icons/wonderlandDark.svg';
import WonderlandLight from '~/assets/icons/wonderlandLight.svg';
Expand Down Expand Up @@ -42,14 +43,15 @@ export const Footer = () => {

const FooterContainer = styled('footer')(() => {
const { currentTheme } = useCustomTheme();
const isMobile = useMediaQuery('(max-width:600px)');

return {
display: 'flex',
height: '5.5rem',
display: isMobile ? 'grid' : 'flex',
padding: currentTheme.padding,
alignItems: 'center',
justifyContent: 'space-between',
justifyContent: isMobile ? 'center' : 'space-between',
width: '100%',
gap: isMobile ? '2rem' : '0',
};
});

Expand Down
25 changes: 15 additions & 10 deletions src/containers/Landing/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { styled } from '@mui/material/styles';
import { useMediaQuery } from '@mui/material';

import { Dashboard, LockedAssets } from '~/containers';
import { TitleBanner } from '~/components';
Expand All @@ -13,14 +14,18 @@ export const Landing = () => {
);
};

const LandingContainer = styled('main')({
display: 'flex',
flexDirection: 'column',
padding: '0 8rem',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
gap: '4rem',
marginTop: '4rem',
marginBottom: '4rem',
const LandingContainer = styled('main')(() => {
const isMobile = useMediaQuery('(max-width:600px)');

return {
display: 'flex',
flexDirection: 'column',
padding: isMobile ? '0 1rem' : '0 7rem',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

idem

alignItems: 'center',
justifyContent: 'center',
width: '100%',
gap: '4rem',
marginTop: '4rem',
marginBottom: '4rem',
};
});
11 changes: 2 additions & 9 deletions src/containers/Layout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ReactNode, FunctionComponent } from 'react';
import { Box, styled } from '@mui/material';
import { Box } from '@mui/material';

import { Header, Footer } from '~/containers';
interface AppLayoutProps {
Expand All @@ -11,17 +11,10 @@ const AppLayout: FunctionComponent<AppLayoutProps> = (props) => {
return (
<>
<Header />
<Container>{children}</Container>

<Box>{children}</Box>
<Footer />
</>
);
};

const Container = styled(Box)(() => {
return {
width: '85%',
};
});

export { AppLayout };
8 changes: 6 additions & 2 deletions src/containers/LockedAssets/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const LockedAssets = () => {
const { ecosystemData, totalL1TVL } = useData();

return (
<section>
<StyledSection>
{ecosystemData && (
<>
<LockedAssetsContainer>
Expand All @@ -23,10 +23,14 @@ export const LockedAssets = () => {
<TotalValueLocked tvl={ecosystemData.l1Tvl} />
</>
)}
</section>
</StyledSection>
);
};

export const StyledSection = styled('section')(() => ({
width: '100%',
}));

const LockedAssetsContainer = styled(Box)(() => ({
display: 'flex',
justifyContent: 'space-between',
Expand Down
23 changes: 0 additions & 23 deletions src/pages/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,6 @@ export default function Layout({ children }: { children: React.ReactNode }) {
<p>This website requires JavaScript to function properly.</p>
</NoScriptMessage>

{/* TODO: remove when responsive is done */}
<ResponsiveDisclaimer>
<p>
This website is not yet optimized for mobile devices. Please use a desktop browser for the best experience.
</p>
</ResponsiveDisclaimer>
<Header />
{children}
<Footer />
Expand Down Expand Up @@ -51,20 +45,3 @@ const NoScriptMessage = styled('noscript')(() => {
},
};
});

const ResponsiveDisclaimer = styled('div')(() => {
return {
display: 'none',
margin: '0 auto',
textAlign: 'start',
fontSize: '1.6rem',
padding: '1rem 0.8rem 1rem',
'@media (max-width: 600px)': {
display: 'block',
},
p: {
padding: '1rem 0',
margin: 0,
},
};
});
Loading