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([
sprinkles({
display: 'flex',
marginRight: { mobile: '12', desktopXl: '20' },
marginRight: { sm: '12', xxl: '20' },
alignItems: 'center',
}),
])

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

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

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

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

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

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

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

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

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

@ -6,7 +6,7 @@ export const assetList = style([
sprinkles({
display: 'grid',
marginTop: '24',
gap: { mobile: '8', tablet: '12', tabletXl: '20' },
gap: { sm: '8', md: '12', lg: '20' },
}),
{
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([
sprinkles({
marginTop: { mobile: '8', tabletSm: '40' },
marginBottom: { mobile: '0', tabletSm: '28' },
marginTop: { sm: '8', md: '40' },
marginBottom: { sm: '0', md: '28' },
}),
{
'@media': {
[`(max-width: ${breakpoints.tabletSm - 1}px)`]: {
[`(max-width: ${breakpoints.sm - 1}px)`]: {
marginLeft: '68px',
},
},
@ -38,7 +38,7 @@ export const collectionImage = style([
verticalAlign: 'top',
top: '-118px',
'@media': {
[`(max-width: ${breakpoints.tabletSm - 1}px)`]: {
[`(max-width: ${breakpoints.sm - 1}px)`]: {
width: '60px',
height: '60px',
borderWidth: '2px',

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

@ -137,7 +137,7 @@ const CollectionName = ({
</Box>
{isVerified && <VerifiedIcon style={{ width: '32px', height: '32px' }} />}
<Row
display={{ mobile: 'none', tabletSm: 'flex' }}
display={{ sm: 'none', md: 'flex' }}
alignItems="center"
justifyContent="center"
marginLeft="32"
@ -211,7 +211,7 @@ const CollectionDescription = ({ description }: { description: string }) => {
}, [descriptionRef, baseRef])
return (
<Box ref={baseRef} marginTop={{ mobile: '12', tabletSm: '16' }} style={{ maxWidth: '680px' }}>
<Box ref={baseRef} marginTop={{ sm: '12', md: '16' }} style={{ maxWidth: '680px' }}>
<Box
ref={descriptionRef}
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)
return (
<Row gap={{ mobile: '20', tabletSm: '60' }} {...props}>
<Row gap={{ sm: '20', md: '60' }} {...props}>
<StatsItem label="Items" isMobile={isMobile ?? false}>
{totalSupplyStr}
</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([
sprinkles({
paddingLeft: { mobile: '16', desktopL: '0' },
paddingRight: { mobile: '16', desktopL: '0' },
paddingLeft: { sm: '16', xl: '0' },
paddingRight: { sm: '16', xl: '0' },
}),
{
maxWidth: '1000px',
@ -63,7 +63,7 @@ export const collectionDetails = style([
}),
{
'@media': {
[`screen and (min-width: ${breakpoints.tabletL}px)`]: {
[`screen and (min-width: ${breakpoints.md}px)`]: {
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
export const breakpoints = {
tabletSm: 656,
tablet: 708,
tabletL: 784,
tabletXl: 830,
desktop: 948,
desktopL: 1030,
desktopXl: 1260,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
xxl: 1536,
xxxl: 1920,
}
const layoutStyles = defineProperties({
conditions: {
mobile: {},
tabletSm: { '@media': `screen and (min-width: ${breakpoints.tabletSm}px)` },
tablet: { '@media': `screen and (min-width: ${breakpoints.tablet})` },
tabletL: { '@media': `screen and (min-width: ${breakpoints.tabletL}px)` },
tabletXl: { '@media': `screen and (min-width: ${breakpoints.tabletXl}px)` },
desktop: { '@media': `screen and (min-width: ${breakpoints.desktop}px)` },
desktopL: { '@media': `screen and (min-width: ${breakpoints.desktopL}px)` },
desktopXl: { '@media': `screen and (min-width: ${breakpoints.desktopXl}px)` },
sm: {},
md: { '@media': `screen and (min-width: ${breakpoints.sm}px)` },
lg: { '@media': `screen and (min-width: ${breakpoints.md}px)` },
xl: { '@media': `screen and (min-width: ${breakpoints.lg}px)` },
xxl: { '@media': `screen and (min-width: ${breakpoints.xl}px)` },
xxxl: { '@media': `screen and (min-width: ${breakpoints.xxl}px)` },
},
defaultCondition: 'mobile',
defaultCondition: 'sm',
properties: {
alignItems: 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'
function getIsMobile() {
return isClient ? window.innerWidth < breakpoints.tabletSm : false
return isClient ? window.innerWidth < breakpoints.sm : false
}
export function useIsMobile(): boolean {