Skip to content

Commit

Permalink
fix: responsiveness in buyer portal (#689)
Browse files Browse the repository at this point in the history 
* fix: improving responsiveness in jsx

* fix: improving responsiveness for tablet/small desktop

* fix: new div for shorter dimensions

* style: comment removal

* fix: measures in review

* style: fixing nits

* Update apps/storefront/src/components/layout/B3Layout.tsx

Co-authored-by: bc-marco <109162781+bc-marco@users.noreply.github.com>

* fix: scroll in media query

* fix: improving for pixel perfection

---------

Co-authored-by: bc-marco <109162781+bc-marco@users.noreply.github.com>
  • Loading branch information
@bc-victor @bc-marco @CarlLiu2023
2 people authored and CarlLiu2023 committed Sep 8, 2023
1 parent c5272b3 commit 5c72e02
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 122 deletions.
17 changes: 11 additions & 6 deletions apps/storefront/src/components/layout/B3Layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ReactNode, useContext, useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { Box } from '@mui/material'
import { Box, useMediaQuery } from '@mui/material'

import useMobile from '@/hooks/useMobile'
import { DynamicallyVariableedContext } from '@/shared/dynamicallyVariable'
Expand All @@ -17,6 +17,7 @@ import B3Nav from './B3Nav'

export default function B3Layout({ children }: { children: ReactNode }) {
const [isMobile] = useMobile()
const isDesktopLimit = useMediaQuery('(min-width:1775px)')

const location = useLocation()

Expand Down Expand Up @@ -98,17 +99,19 @@ export default function B3Layout({ children }: { children: ReactNode }) {
sx={{
display: 'flex',
minHeight: '100vh',
width: '100%',
margin: 'auto',
width: !isDesktopLimit ? '100%' : 1775,
minWidth: !isDesktopLimit ? '100%' : 1775,
maxWidth: !isDesktopLimit ? '100%' : 1775,
flexDirection: 'row',
p: '30px 40px',
p: '32px 63px 70px 63px',
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
width: '250px',
pl: '20px',
width: '199px',
displayPrint: 'none',
}}
>
Expand All @@ -127,7 +130,9 @@ export default function B3Layout({ children }: { children: ReactNode }) {
flex: 1,
display: 'flex',
flexDirection: 'column',
p: '0 24px 50px 50px',
maxWidth: '1450px',
width: '100%',
p: '0 0px 0px 50px',
}}
>
<B3Mainheader title={title} />
Expand Down
222 changes: 106 additions & 116 deletions apps/storefront/src/pages/quickorder/components/QuickOrderFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,16 @@ import {
import { useNavigate } from 'react-router-dom'
import { useB3Lang } from '@b3/lang'
import { ArrowDropDown } from '@mui/icons-material'
import { Box, Button, Grid, Menu, MenuItem, Typography } from '@mui/material'
import {
Box,
Button,
Grid,
Menu,
MenuItem,
SxProps,
Typography,
useMediaQuery,
} from '@mui/material'
import { v1 as uuid } from 'uuid'

import { CustomButton, successTip } from '@/components'
Expand Down Expand Up @@ -114,6 +123,7 @@ function QuickOrderFooter(props: QuickOrderFooterProps) {

const { role, checkedArr, isAgenting, setIsRequestLoading, isB2BUser } = props

const isDesktopLimit = useMediaQuery('(min-width:1775px)')
const [isMobile] = useMobile()
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
const [open, setOpen] = useState<boolean>(Boolean(anchorEl))
Expand Down Expand Up @@ -596,6 +606,20 @@ function QuickOrderFooter(props: QuickOrderFooterProps) {
}
}, [checkedArr])

let gridBarStyles: SxProps = {
display: isMobile ? 'initial' : 'flex',
flexBasis: '100%',
}

if (isDesktopLimit) {
gridBarStyles = {
display: 'flex',
flexGrow: 1,
maxWidth: 1775,
margin: 'auto',
}
}

return (
<>
<Grid
Expand All @@ -605,9 +629,7 @@ function QuickOrderFooter(props: QuickOrderFooterProps) {
left: 0,
backgroundColor: '#fff',
width: '100%',
padding: isMobile
? '0 0 1rem 0'
: `0 ${open ? '57px' : '40px'} 1rem 40px`,
padding: isMobile ? '0 0 1rem 0' : '16px 0 16px',
height: isMobile ? '8rem' : 'auto',
marginLeft: 0,
display: 'flex',
Expand All @@ -617,152 +639,120 @@ function QuickOrderFooter(props: QuickOrderFooterProps) {
container
spacing={2}
>
<Grid
item
sx={{
display: isMobile ? 'none' : 'block',
width: '305px',
paddingLeft: '20px',
marginRight: '30px',
}}
/>
<Grid
item
sx={
isMobile
? {
flexBasis: '100%',
}
: {
flexBasis: '66.6667%',
flexGrow: 1,
maxWidth: '66.6667%',
}
}
>
<Grid item={isMobile} sx={gridBarStyles}>
<Box
sx={{
width: 263,
display: isMobile ? 'none' : 'block',
}}
/>
<Box
sx={{
width: '100%',
flex: 1,
display: 'flex',
zIndex: '999',
justifyContent: 'space-between',
...containerStyle,
alignItems: 'center',
paddingLeft: isMobile ? 0 : '50px',
paddingRight: isMobile ? 0 : '80px',
}}
>
<Typography
sx={{
color: '#000000',
fontSize: '16px',
fontWeight: '400',
}}
>
{b3Lang('purchasedProducts.footer.selectedProducts', {
quantity: checkedArr.length,
})}
</Typography>
<Box
sx={{
width: isMobile ? '100%' : 'calc(66.6667% + 32px)',
display: 'flex',
alignItems: 'center',
flexWrap: isMobile ? 'wrap' : 'nowrap',
width: isMobile ? '100%' : 'auto',
zIndex: '999',
justifyContent: 'space-between',
...containerStyle,
}}
>
<Typography
variant="h6"
sx={{
fontSize: '16px',
fontWeight: '700',
color: '#000000',
fontSize: '16px',
fontWeight: '400',
}}
>
{b3Lang('purchasedProducts.footer.subtotal', {
subtotal: currencyFormat(selectedSubTotal),
{b3Lang('purchasedProducts.footer.selectedProducts', {
quantity: checkedArr.length,
})}
</Typography>
<Box
sx={{
display: 'flex',
alignItems: 'center',
marginTop: isMobile ? '0.5rem' : 0,
marginLeft: isMobile ? 0 : '20px',
flexWrap: isMobile ? 'wrap' : 'nowrap',
width: isMobile ? '100%' : 'auto',
}}
>
<CustomButton
variant="contained"
onClick={handleOpenBtnList}
<Typography
variant="h6"
sx={{
marginRight: isMobile ? '1rem' : 0,
width: isMobile ? '100%' : 'auto',
fontSize: '16px',
fontWeight: '700',
color: '#000000',
}}
endIcon={<ArrowDropDown />}
>
{b3Lang('purchasedProducts.footer.addSelectedTo')}
</CustomButton>

<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
{b3Lang('purchasedProducts.footer.subtotal', {
subtotal: currencyFormat(selectedSubTotal),
})}
</Typography>
<Box
sx={{
display: 'flex',
alignItems: 'center',
marginTop: isMobile ? '0.5rem' : 0,
marginLeft: isMobile ? 0 : '20px',
width: isMobile ? '100%' : 'auto',
}}
>
{buttonList.length > 0 &&
buttonList.map((button) => {
if (button.isDisabled) return null

return (
<MenuItem
key={button.key}
onClick={() => {
button.handleClick()
}}
>
{button.name}
</MenuItem>
)
})}
</Menu>
<CustomButton
variant="contained"
onClick={handleOpenBtnList}
sx={{
marginRight: isMobile ? '1rem' : 0,
width: isMobile ? '100%' : 'auto',
}}
endIcon={<ArrowDropDown />}
>
{b3Lang('purchasedProducts.footer.addSelectedTo')}
</CustomButton>

<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
{buttonList.length > 0 &&
buttonList.map((button) => {
if (button.isDisabled) return null

return (
<MenuItem
key={button.key}
onClick={() => {
button.handleClick()
}}
>
{button.name}
</MenuItem>
)
})}
</Menu>
</Box>
</Box>
</Box>
<Box
sx={{
width: '33.3333%',
display: !isMobile ? 'block' : 'none',
}}
/>
</Box>
</Grid>
<Grid
item
sx={
isMobile
? {
flexBasis: '100%',
display: isMobile ? 'none' : 'block',
}
: {
flexBasis: '33.3333%',
display: isMobile ? 'none' : 'block',
maxWidth: '33.3333%',
marginRight: '16px',
}
}
/>
</Grid>
{/* <Box
sx={{
position: 'fixed',
bottom: 0,
left: 0,
backgroundColor: '#fff',
width: '100%',
padding: '1rem',
height: isMobile ? '8rem' : 'auto',
display: 'flex',
zIndex: '999',
...containerStyle,
}}
>
</Box> */}

<OrderShoppingList
isOpen={openShoppingList}
Expand Down

0 comments on commit 5c72e02

Please sign in to comment.