enhancement(media-library): use checkerboard pattern as background (#2152)
This commit is contained in:
committed by
Shawn Erquhart
parent
5980f630fa
commit
a6c20cf688
@ -2,7 +2,9 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import styled from 'react-emotion';
|
||||
import { colors, borders, lengths } from 'netlify-cms-ui-default';
|
||||
import { colors, borders, lengths, shadows, effects } from 'netlify-cms-ui-default';
|
||||
|
||||
const IMAGE_HEIGHT = 160;
|
||||
|
||||
const Card = styled.div`
|
||||
width: ${props => props.width};
|
||||
@ -20,10 +22,17 @@ const Card = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const CardImageWrapper = styled.div`
|
||||
height: ${IMAGE_HEIGHT + 2}px;
|
||||
${effects.checkerboard};
|
||||
${shadows.inset};
|
||||
border-bottom: solid ${lengths.borderWidth} ${colors.textFieldBorder};
|
||||
`;
|
||||
|
||||
const CardImage = styled.img`
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
object-fit: cover;
|
||||
height: ${IMAGE_HEIGHT}px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px 2px 0 0;
|
||||
`;
|
||||
|
||||
@ -57,7 +66,9 @@ class MediaLibraryCard extends React.Component {
|
||||
tabIndex="-1"
|
||||
isPrivate={isPrivate}
|
||||
>
|
||||
<div>{url ? <CardImage src={url} /> : <CardFileIcon>{type}</CardFileIcon>}</div>
|
||||
<CardImageWrapper>
|
||||
{url ? <CardImage src={url} /> : <CardFileIcon>{type}</CardFileIcon>}
|
||||
</CardImageWrapper>
|
||||
<CardText>{text}</CardText>
|
||||
</Card>
|
||||
);
|
||||
|
@ -8,6 +8,7 @@ import { colors } from 'netlify-cms-ui-default';
|
||||
|
||||
const CardGridContainer = styled.div`
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
`;
|
||||
|
||||
const CardGrid = styled.div`
|
||||
|
Reference in New Issue
Block a user