ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update sprinkles breakpoints (#4480)

Browse Source 
update breakpoints

Co-authored-by: Charlie <charlie@uniswap.org>
This commit is contained in:
Charles Bachmeier 2022-08-24 19:01:11 -07:00 committed by GitHub
parent 4424205814
commit 49c31ddfc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 41 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/NavBar/Navbar.css.ts
View File

@ -20,7 +20,7 @@ export const nav = style([
export const logoContainer = style([ export const logoContainer = style([
sprinkles({ sprinkles({
display: 'flex', display: 'flex',
marginRight: { mobile: '12', desktopXl: '20' }, marginRight: { sm: '12', xxl: '20' },
alignItems: 'center', alignItems: 'center',
}), }),
]) ])

2
src/components/NavBar/Navbar.tsx
View File

@ -65,7 +65,7 @@ const Navbar = () => {
const { pathname } = useLocation() const { pathname } = useLocation()
const nftFlag = useNftFlag() const nftFlag = useNftFlag()
if (windowWidth && windowWidth < breakpoints.desktopXl) { if (windowWidth && windowWidth < breakpoints.xl) {
return <MobileNavbar /> return <MobileNavbar />
} }

4
src/components/NavBar/SearchBar.css.ts
View File

@ -8,14 +8,14 @@ const DESKTOP_NAVBAR_WIDTH = '360px'
const baseSearchStyle = style([ const baseSearchStyle = style([
sprinkles({ sprinkles({
paddingY: '12', paddingY: '12',
width: { mobile: 'viewWidth' }, width: { sm: 'viewWidth' },
borderStyle: 'solid', borderStyle: 'solid',
borderWidth: '1px', borderWidth: '1px',
borderColor: 'medGray', borderColor: 'medGray',
}), }),
{ {
'@media': { '@media': {
[`screen and (min-width: ${breakpoints.tabletSm}px)`]: { [`screen and (min-width: ${breakpoints.sm}px)`]: {
width: DESKTOP_NAVBAR_WIDTH, width: DESKTOP_NAVBAR_WIDTH,
}, },
}, },

18
src/components/NavBar/SearchBar.tsx
View File

@ -318,15 +318,15 @@ export const SearchBar = () => {
setSearchValue('') setSearchValue('')
}, [pathname]) }, [pathname])
const isMobile = useMemo(() => windowWidth && windowWidth <= breakpoints.tabletSm, [windowWidth]) const isMobile = useMemo(() => windowWidth && windowWidth <= breakpoints.sm, [windowWidth])
return ( return (
<> <>
<Box <Box
position={{ mobile: isOpen ? 'absolute' : 'relative', tabletSm: 'relative' }} position={{ sm: isOpen ? 'absolute' : 'relative', md: 'relative' }}
top={{ mobile: '0', tabletSm: 'unset' }} top={{ sm: '0', md: 'unset' }}
left={{ mobile: '0', tabletSm: 'unset' }} left={{ sm: '0', md: 'unset' }}
width={{ mobile: isOpen ? 'viewWidth' : 'auto', tabletSm: 'auto' }} width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
ref={searchRef} ref={searchRef}
style={{ zIndex: '1000' }} style={{ zIndex: '1000' }}
> >
@ -335,16 +335,16 @@ export const SearchBar = () => {
borderRadius={isOpen ? undefined : '12'} borderRadius={isOpen ? undefined : '12'}
borderTopRightRadius={isOpen && !isMobile ? '12' : undefined} borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined} borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
display={{ mobile: isOpen ? 'flex' : 'none', desktopXl: 'flex' }} display={{ sm: isOpen ? 'flex' : 'none', xxl: 'flex' }}
justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'} justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
onFocus={() => !isOpen && toggleOpen()} onFocus={() => !isOpen && toggleOpen()}
onClick={() => !isOpen && toggleOpen()} onClick={() => !isOpen && toggleOpen()}
gap="12" gap="12"
> >
<Box display={{ mobile: 'none', tabletSm: 'flex' }}> <Box display={{ sm: 'none', md: 'flex' }}>
<MagnifyingGlassIcon /> <MagnifyingGlassIcon />
</Box> </Box>
<Box display={{ mobile: 'flex', tabletSm: 'none' }} color="placeholder" onClick={toggleOpen}> <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
<ChevronLeftIcon /> <ChevronLeftIcon />
</Box> </Box>
<Box <Box
@ -359,7 +359,7 @@ export const SearchBar = () => {
value={searchValue} value={searchValue}
/> />
</Row> </Row>
<Box display={{ mobile: isOpen ? 'none' : 'flex', desktopXl: 'none' }}> <Box display={{ sm: isOpen ? 'none' : 'flex', xxl: 'none' }}>
<NavIcon onClick={toggleOpen}> <NavIcon onClick={toggleOpen}>
<NavMagnifyingGlassIcon width={28} height={28} /> <NavMagnifyingGlassIcon width={28} height={28} />
</NavIcon> </NavIcon>

6
src/nft/components/collection/Card.css.ts
View File

@ -11,7 +11,7 @@ export const card = style([
boxSizing: 'border-box', boxSizing: 'border-box',
WebkitBoxSizing: 'border-box', WebkitBoxSizing: 'border-box',
'@media': { '@media': {
[`(max-width: ${breakpoints.tabletSm - 1}px)`]: { [`(max-width: ${breakpoints.sm - 1}px)`]: {
':hover': { ':hover': {
borderColor: themeVars.colors.medGray, borderColor: themeVars.colors.medGray,
cursor: 'pointer', cursor: 'pointer',
@ -48,7 +48,7 @@ export const button = style([
width: 'full', width: 'full',
position: 'relative', position: 'relative',
paddingY: '8', paddingY: '8',
marginTop: { mobile: '8', tabletSm: '10' }, marginTop: { sm: '8', md: '10' },
marginBottom: '12', marginBottom: '12',
borderRadius: '12', borderRadius: '12',
border: 'none', border: 'none',
@ -78,7 +78,7 @@ export const marketplaceIcon = style([
export const erc1155ButtonRow = sprinkles({ export const erc1155ButtonRow = sprinkles({
flexShrink: '0', flexShrink: '0',
gap: '12', gap: '12',
marginTop: { mobile: '8', tabletSm: '10' }, marginTop: { sm: '8', md: '10' },
marginBottom: '12', marginBottom: '12',
}) })

2
src/nft/components/collection/CollectionNfts.css.ts
View File

@ -6,7 +6,7 @@ export const assetList = style([
sprinkles({ sprinkles({
display: 'grid', display: 'grid',
marginTop: '24', marginTop: '24',
gap: { mobile: '8', tablet: '12', tabletXl: '20' }, gap: { sm: '8', md: '12', lg: '20' },
}), }),
{ {
gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr) )', gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr) )',

8
src/nft/components/collection/CollectionStats.css.ts
View File

@ -5,12 +5,12 @@ import { breakpoints, sprinkles } from '../../css/sprinkles.css'
export const statsText = style([ export const statsText = style([
sprinkles({ sprinkles({
marginTop: { mobile: '8', tabletSm: '40' }, marginTop: { sm: '8', md: '40' },
marginBottom: { mobile: '0', tabletSm: '28' }, marginBottom: { sm: '0', md: '28' },
}), }),
{ {
'@media': { '@media': {
[`(max-width: ${breakpoints.tabletSm - 1}px)`]: { [`(max-width: ${breakpoints.sm - 1}px)`]: {
marginLeft: '68px', marginLeft: '68px',
}, },
}, },
@ -38,7 +38,7 @@ export const collectionImage = style([
verticalAlign: 'top', verticalAlign: 'top',
top: '-118px', top: '-118px',
'@media': { '@media': {
[`(max-width: ${breakpoints.tabletSm - 1}px)`]: { [`(max-width: ${breakpoints.sm - 1}px)`]: {
width: '60px', width: '60px',
height: '60px', height: '60px',
borderWidth: '2px', borderWidth: '2px',

6
src/nft/components/collection/CollectionStats.tsx
View File

@ -137,7 +137,7 @@ const CollectionName = ({
</Box> </Box>
{isVerified && <VerifiedIcon style={{ width: '32px', height: '32px' }} />} {isVerified && <VerifiedIcon style={{ width: '32px', height: '32px' }} />}
<Row <Row
display={{ mobile: 'none', tabletSm: 'flex' }} display={{ sm: 'none', md: 'flex' }}
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
marginLeft="32" marginLeft="32"
@ -211,7 +211,7 @@ const CollectionDescription = ({ description }: { description: string }) => {
}, [descriptionRef, baseRef]) }, [descriptionRef, baseRef])
return ( return (
<Box ref={baseRef} marginTop={{ mobile: '12', tabletSm: '16' }} style={{ maxWidth: '680px' }}> <Box ref={baseRef} marginTop={{ sm: '12', md: '16' }} style={{ maxWidth: '680px' }}>
<Box <Box
ref={descriptionRef} ref={descriptionRef}
className={clsx(styles.description, styles.nameText, readMore && styles.descriptionOpen)} className={clsx(styles.description, styles.nameText, readMore && styles.descriptionOpen)}
@ -248,7 +248,7 @@ const StatsRow = ({ stats, isMobile, ...props }: { stats: GenieCollection; isMob
const floorPriceStr = ethNumberStandardFormatter(stats.floorPrice) const floorPriceStr = ethNumberStandardFormatter(stats.floorPrice)
return ( return (
<Row gap={{ mobile: '20', tabletSm: '60' }} {...props}> <Row gap={{ sm: '20', md: '60' }} {...props}>
<StatsItem label="Items" isMobile={isMobile ?? false}> <StatsItem label="Items" isMobile={isMobile ?? false}>
{totalSupplyStr} {totalSupplyStr}
</StatsItem> </StatsItem>

6
src/nft/components/explore/Banner.css.ts
View File

@ -3,8 +3,8 @@ import { breakpoints, sprinkles } from 'nft/css/sprinkles.css'
export const section = style([ export const section = style([
sprinkles({ sprinkles({
paddingLeft: { mobile: '16', desktopL: '0' }, paddingLeft: { sm: '16', xl: '0' },
paddingRight: { mobile: '16', desktopL: '0' }, paddingRight: { sm: '16', xl: '0' },
}), }),
{ {
maxWidth: '1000px', maxWidth: '1000px',
@ -63,7 +63,7 @@ export const collectionDetails = style([
}), }),
{ {
'@media': { '@media': {
[`screen and (min-width: ${breakpoints.tabletL}px)`]: { [`screen and (min-width: ${breakpoints.md}px)`]: {
width: '40%', width: '40%',
}, },
}, },

29
src/nft/css/sprinkles.css.ts
View File

@ -235,27 +235,24 @@ const borderWidth = ['1px', '1.5px', '2px', '4px']
const borderStyle = ['none', 'solid'] as const const borderStyle = ['none', 'solid'] as const
export const breakpoints = { export const breakpoints = {
tabletSm: 656, sm: 640,
tablet: 708, md: 768,
tabletL: 784, lg: 1024,
tabletXl: 830, xl: 1280,
desktop: 948, xxl: 1536,
desktopL: 1030, xxxl: 1920,
desktopXl: 1260,
} }
const layoutStyles = defineProperties({ const layoutStyles = defineProperties({
conditions: { conditions: {
mobile: {}, sm: {},
tabletSm: { '@media': `screen and (min-width: ${breakpoints.tabletSm}px)` }, md: { '@media': `screen and (min-width: ${breakpoints.sm}px)` },
tablet: { '@media': `screen and (min-width: ${breakpoints.tablet})` }, lg: { '@media': `screen and (min-width: ${breakpoints.md}px)` },
tabletL: { '@media': `screen and (min-width: ${breakpoints.tabletL}px)` }, xl: { '@media': `screen and (min-width: ${breakpoints.lg}px)` },
tabletXl: { '@media': `screen and (min-width: ${breakpoints.tabletXl}px)` }, xxl: { '@media': `screen and (min-width: ${breakpoints.xl}px)` },
desktop: { '@media': `screen and (min-width: ${breakpoints.desktop}px)` }, xxxl: { '@media': `screen and (min-width: ${breakpoints.xxl}px)` },
desktopL: { '@media': `screen and (min-width: ${breakpoints.desktopL}px)` },
desktopXl: { '@media': `screen and (min-width: ${breakpoints.desktopXl}px)` },
}, },
defaultCondition: 'mobile', defaultCondition: 'sm',
properties: { properties: {
alignItems: flexAlignment, alignItems: flexAlignment,
alignSelf: flexAlignment, alignSelf: flexAlignment,

2
src/nft/hooks/useIsMobile.ts
View File

@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
const isClient = typeof window === 'object' const isClient = typeof window === 'object'
function getIsMobile() { function getIsMobile() {
return isClient ? window.innerWidth < breakpoints.tabletSm : false return isClient ? window.innerWidth < breakpoints.sm : false
} }
export function useIsMobile(): boolean { export function useIsMobile(): boolean {