|
@ -3,32 +3,32 @@ import styled from 'styled-components'; |
|
|
import { LazyLoadImage } from 'react-lazy-load-image-component'; |
|
|
import { LazyLoadImage } from 'react-lazy-load-image-component'; |
|
|
|
|
|
|
|
|
interface Card { |
|
|
interface Card { |
|
|
cardSize: number; |
|
|
cardsize: number; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* const getCardSize = (props: any) => { |
|
|
/* const getcardsize = (props: any) => { |
|
|
return props.cardSize === 'xs' |
|
|
return props.cardsize === 'xs' |
|
|
? props.theme.cardXs |
|
|
? props.theme.cardXs |
|
|
: props.cardSize === 'sm' |
|
|
: props.cardsize === 'sm' |
|
|
? props.theme.cardSm |
|
|
? props.theme.cardSm |
|
|
: props.cardSize === 'md' |
|
|
: props.cardsize === 'md' |
|
|
? props.theme.cardMd |
|
|
? props.theme.cardMd |
|
|
: props.cardSize === 'lg' |
|
|
: props.cardsize === 'lg' |
|
|
? props.theme.cardLg |
|
|
? props.theme.cardLg |
|
|
: props.theme.cardSm; |
|
|
: props.theme.cardSm; |
|
|
}; */ |
|
|
}; */ |
|
|
|
|
|
|
|
|
export const StyledPanel = styled(Panel)<Card>` |
|
|
export const StyledPanel = styled(Panel)<Card>` |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
width: ${(props) => props.cardSize + 2}; |
|
|
width: ${(props) => props.cardsize + 2}; |
|
|
height: ${(props) => props.cardSize + 55}; |
|
|
height: ${(props) => props.cardsize + 55}; |
|
|
&:hover { |
|
|
&:hover { |
|
|
border: 1px solid ${(props) => props.theme.main}; |
|
|
border: 1px solid ${(props) => props.theme.main}; |
|
|
} |
|
|
} |
|
|
`;
|
|
|
`;
|
|
|
|
|
|
|
|
|
export const InfoPanel = styled(Panel)<Card>` |
|
|
export const InfoPanel = styled(Panel)<Card>` |
|
|
width: ${(props) => props.cardSize}; |
|
|
width: ${(props) => props.cardsize}; |
|
|
`;
|
|
|
`;
|
|
|
|
|
|
|
|
|
export const InfoSpan = styled.div` |
|
|
export const InfoSpan = styled.div` |
|
@ -45,13 +45,13 @@ export const CardTitleButton = styled(CardButton)` |
|
|
padding-top: 5px; |
|
|
padding-top: 5px; |
|
|
padding-bottom: 2px; |
|
|
padding-bottom: 2px; |
|
|
color: ${(props) => props.theme.titleText}; |
|
|
color: ${(props) => props.theme.titleText}; |
|
|
width: ${(props) => props.cardSize}; |
|
|
width: ${(props) => props.cardsize}; |
|
|
`;
|
|
|
`;
|
|
|
|
|
|
|
|
|
export const CardSubtitleButton = styled(CardButton)` |
|
|
export const CardSubtitleButton = styled(CardButton)` |
|
|
padding-bottom: 5px; |
|
|
padding-bottom: 5px; |
|
|
color: ${(props) => props.theme.subtitleText}; |
|
|
color: ${(props) => props.theme.subtitleText}; |
|
|
width: ${(props) => props.cardSize}; |
|
|
width: ${(props) => props.cardsize}; |
|
|
`;
|
|
|
`;
|
|
|
|
|
|
|
|
|
export const CardSubtitle = styled.div<Card>` |
|
|
export const CardSubtitle = styled.div<Card>` |
|
@ -60,24 +60,24 @@ export const CardSubtitle = styled.div<Card>` |
|
|
white-space: nowrap; |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
text-overflow: ellipsis; |
|
|
width: ${(props) => props.cardSize}; |
|
|
width: ${(props) => props.cardsize}; |
|
|
`;
|
|
|
`;
|
|
|
|
|
|
|
|
|
export const CardImg = styled.img<Card>` |
|
|
export const CardImg = styled.img<Card>` |
|
|
height: ${(props) => props.cardSize}; |
|
|
height: ${(props) => props.cardsize}; |
|
|
width: ${(props) => props.cardSize}; |
|
|
width: ${(props) => props.cardsize}; |
|
|
`;
|
|
|
`;
|
|
|
|
|
|
|
|
|
export const LazyCardImg = styled(LazyLoadImage)<Card>` |
|
|
export const LazyCardImg = styled(LazyLoadImage)<Card>` |
|
|
height: ${(props) => props.cardSize}; |
|
|
height: ${(props) => props.cardsize}; |
|
|
width: ${(props) => props.cardSize}; |
|
|
width: ${(props) => props.cardsize}; |
|
|
`;
|
|
|
`;
|
|
|
|
|
|
|
|
|
export const Overlay = styled.div<Card>` |
|
|
export const Overlay = styled.div<Card>` |
|
|
background-color: #1a1d24; |
|
|
background-color: #1a1d24; |
|
|
position: relative; |
|
|
position: relative; |
|
|
height: ${(props) => props.cardSize}; |
|
|
height: ${(props) => props.cardsize}; |
|
|
width: ${(props) => props.cardSize}; |
|
|
width: ${(props) => props.cardsize}; |
|
|
&:hover { |
|
|
&:hover { |
|
|
background-color: #000; |
|
|
background-color: #000; |
|
|
opacity: 0.5; |
|
|
opacity: 0.5; |
|
|