Commit 333d78aa authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Ellipsis on card titles after one line instead of two.

parent fe56c7a1
...@@ -132,13 +132,6 @@ class FacilityCard extends React.Component { ...@@ -132,13 +132,6 @@ class FacilityCard extends React.Component {
render() { render() {
const {facility, favorites, addFavoriteFacility, removeFavoriteFacility} = this.props; const {facility, favorites, addFavoriteFacility, removeFavoriteFacility} = this.props;
/**
* 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) ? 'fc-two-line-ellipsis-webkit' : 'fc-two-line-ellipsis';
return ( return (
<Card onClick={this.handleClick} className={'fc-root'} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised> <Card onClick={this.handleClick} className={'fc-root'} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
<CardMedia className={'fc-media'} <CardMedia className={'fc-media'}
...@@ -155,8 +148,8 @@ class FacilityCard extends React.Component { ...@@ -155,8 +148,8 @@ class FacilityCard extends React.Component {
<CardContent className={'fc-card-content'}> <CardContent className={'fc-card-content'}>
<Grid container align={'center'} direction={'column'} className={'fc-small-grid-container-spacing'}> <Grid container align={'center'} direction={'column'} className={'fc-small-grid-container-spacing'}>
<Grid item className={'fc-small-grid-item-spacing'}> <Grid item className={classnames('fc-small-grid-item-spacing', 'fc-ellipsis-container')}>
<Typography type={'subheading'} align={'center'} className={classnames('fc-title', twoLineEllipsis)}> <Typography type={'subheading'} align={'center'} className={classnames('fc-title', 'fc-one-line-ellipsis')}>
{removeBrackets(facility.facility_name)} {removeBrackets(facility.facility_name)}
</Typography> </Typography>
</Grid> </Grid>
...@@ -176,7 +169,7 @@ class FacilityCard extends React.Component { ...@@ -176,7 +169,7 @@ class FacilityCard extends React.Component {
<Typography type={'caption'}> <Typography type={'caption'}>
<LocationOnIcon className={'fc-card-map-marker-icon'}/> <LocationOnIcon className={'fc-card-map-marker-icon'}/>
</Typography> </Typography>
<Typography type={'caption'} align={'center'} className={twoLineEllipsis}> <Typography type={'caption'} align={'center'} className={'fc-two-line-ellipsis'}>
{facility.facility_location.building} {facility.facility_location.building}
</Typography> </Typography>
</Grid> </Grid>
......
.fc-root { .fc-root {
width: 250px; width: 250px;
border-radius: 5px; border-radius: 5px !important;
position: relative; position: relative;
} }
...@@ -16,9 +16,14 @@ ...@@ -16,9 +16,14 @@
padding: 3px 8px !important; padding: 3px 8px !important;
} }
.fc-ellipsis-container {
width: 100%;
}
.fc-media { .fc-media {
flex: 1; flex: 1;
height: 115px; height: 115px;
border-radius: 5px 5px 0 0 !important;
} }
.fc-logo-container { .fc-logo-container {
...@@ -55,14 +60,22 @@ ...@@ -55,14 +60,22 @@
overflow: hidden; overflow: hidden;
} }
.fc-two-line-ellipsis-webkit { @supports (-webkit-line-clamp: 2) {
overflow: hidden; .fc-two-line-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box !important;
/* autoprefixer: off */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
}
.fc-one-line-ellipsis {
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box !important; overflow: hidden;
/* autoprefixer: off */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* autoprefixer: on */
} }
@media screen and (min-width: 1024px) and (max-width: 1679px) { @media screen and (min-width: 1024px) and (max-width: 1679px) {
......
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