Commit 4526e385 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Set a max line height of 2 for card titles and locations. Ellipsis occur on...

Set a max line height of 2 for card titles and locations. Ellipsis occur on webkit browsers, otherwise text is cut off.
parent 21282d36
......@@ -12,6 +12,7 @@ import {addFavoriteFacility, removeFavoriteFacility, setSidebar} from '../action
import DirectionsWalkIcon from 'material-ui-icons/DirectionsWalk';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import {removeBrackets} from '../utils/nameUtils';
import classnames from 'classnames'
import {
amber,
......@@ -108,6 +109,13 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
return materialColors[Math.abs(hash) % 19][((Math.abs(hash) % 7) + 3) * 100];
};
/**
* By adding this property to an element, the text will not exceed 2 lines. On webkit browsers,
* -webkit-line-clamp will show ellipsis. This checks to see if the browser is webkit and uses
* an appropriate class.
*/
const twoLineEllipsis = CSS.supports('-webkit-line-clamp', 2) ? classes.twoLineEllipsisWebkit : classes.twoLineEllipsis;
return (
<Card onClick={handleClick} className={classes.root} raised>
<CardMedia className={classes.media}
......@@ -125,7 +133,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
<CardContent className={classes.cardContent}>
<Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}>
<Grid item className={classes.smallGridItemSpacing}>
<Typography type={'title'} align={'center'} className={classes.title}>
<Typography type={'title'} align={'center'} className={classnames(classes.title, twoLineEllipsis)}>
{removeBrackets(facility.facility_name)}
</Typography>
</Grid>
......@@ -153,7 +161,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
<Typography type={'caption'}>
<LocationOnIcon/>
</Typography>
<Typography type={'caption'} align={'center'}>
<Typography type={'caption'} align={'center'} className={twoLineEllipsis}>
{facility.facility_location.building}
</Typography>
</Grid>
......@@ -216,6 +224,19 @@ const styleSheet = {
},
nunito: {
fontFamily: 'Nunito'
},
twoLineEllipsis: {
position: 'relative',
lineHeight: '1em',
maxHeight: '2em',
overflow: 'hidden',
},
twoLineEllipsisWebkit: {
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment