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

fix: make carousel responsive (#5300)

Browse Source 
* fix: make carousel responsive

* remove padding from CarouselItemIcon
This commit is contained in:
Jordan Frankfurt 2022-11-18 11:12:26 -06:00 committed by GitHub
parent ec6c843db6
commit 54a7b943ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/nft/components/explore/Carousel.tsx
View File

@ -8,18 +8,13 @@ import styled, { css } from 'styled-components/macro'
const MAX_CARD_WIDTH = 530
const carouselHeightStyle = css`
height: 315px;
height: 296px;
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
height: 296px;
@media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
height: 316px;
}
`
const carouselItemStyle = css`
padding-top: 3px;
padding-bottom: 32px;
`
const CarouselContainer = styled.div`
display: flex;
width: 100%;
@ -37,36 +32,31 @@ const CarouselCardContainer = styled.div`
const CarouselItemCard = styled(a.div)`
${carouselHeightStyle}
${carouselItemStyle}
display: flex;
justify-content: center;
padding: 3px 32px 32px 32px;
padding: 4px 12px 32px;
position: absolute;
will-change: transform;
@media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) {
padding: 4px 32px 32px;
}
`
const CarouselItemIcon = styled.div`
${carouselHeightStyle}
${carouselItemStyle}
display: flex;
align-items: center;
padding-left: 8px;
padding-right: 8px;
cursor: pointer;
user-select: none;
color: ${({ theme }) => theme.textPrimary};
cursor: pointer;
display: none;
user-select: none;
@media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
display: flex;
}
:hover {
opacity: ${({ theme }) => theme.opacity.hover};
}
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
display: none;
}
`
interface CarouselProps {

31
src/nft/components/explore/CarouselCard.tsx
View File

@ -11,12 +11,15 @@ import { ThemedText } from 'theme'
const CarouselCardContainer = styled.div`
display: flex;
flex-direction: column;
gap: 20px;
background-color: ${({ theme }) => theme.backgroundSurface};
border: 1px solid ${({ theme }) => theme.backgroundOutline};
border-radius: 20px;
gap: 8px;
overflow: hidden;
height: 100%;
@media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) {
gap: 20px;
}
`
const CarouselCardBorder = styled.div`
width: 100%;
@ -26,7 +29,7 @@ const CarouselCardBorder = styled.div`
border: 2px solid transparent;
transition-property: border-color;
transition-duration: ${({ theme }) => theme.transition.duration.fast};
transition-timing: ${({ theme }) => theme.transition.timing.inOut};
transition-timing-function: ${({ theme }) => theme.transition.timing.inOut};
:hover {
border: 2px solid ${({ theme }) => theme.backgroundOutline};
@ -45,7 +48,7 @@ const CarouselCardBorder = styled.div`
box-shadow: ${({ theme }) => theme.deepShadow};
transition-property: opacity;
transition-duration: ${({ theme }) => theme.transition.duration.fast};
transition-timing: ${({ theme }) => theme.transition.timing.inOut};
transition-timing-function: ${({ theme }) => theme.transition.timing.inOut};
}
:hover::after {
@ -90,8 +93,11 @@ const CardHeaderRow = styled.div`
position: relative;
z-index: 1;
display: flex;
gap: 12px;
gap: 8px;
align-items: center;
@media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) {
gap: 12px;
}
`
const CardNameRow = styled.div`
@ -155,28 +161,29 @@ const LoadingCollectionImage = styled.div`
const CardBottomContainer = styled.div`
display: grid;
grid-template-columns: auto auto auto;
row-gap: 16px;
row-gap: 8px;
column-gap: 20px;
padding-right: 28px;
padding-left: 28px;
padding-bottom: 20px;
justify-content: space-between;
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
row-gap: 12px;
@media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
row-gap: 16px;
}
`
const HeaderRow = styled.div`
color: ${({ theme }) => theme.userThemeColor};
font-size: 16px;
line-height: 24px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
row-gap: 8px;
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
@media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
font-size: 16px;
line-height: 24px;
row-gap: 12px;
font-size: 14px;
line-height: 20px;
}
`