Commit 4137dd7d authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

More work on mobile cards.

parent 15b43742
Pipeline #1806 passed with stage
in 1 minute and 41 seconds
...@@ -61,7 +61,7 @@ class FacilityCard extends React.Component { ...@@ -61,7 +61,7 @@ class FacilityCard extends React.Component {
<CardContent className={'fc-card-content'}> <CardContent className={'fc-card-content'}>
<Grid container alignItems={'center'} direction={'column'} className={'fc-small-grid-container-spacing'}> <Grid container alignItems={'center'} direction={'column'} className={'fc-small-grid-container-spacing'}>
<Grid item className={classnames('fc-small-grid-item-spacing', 'fc-ellipsis-container')}> <Grid item className={classnames('fc-small-grid-item-spacing', 'fc-ellipsis-container', 'fc-title-container')}>
<Typography type={'subheading'} align={'center'} className={classnames('fc-title', 'fc-one-line-ellipsis')}> <Typography type={'subheading'} align={'center'} className={classnames('fc-title', 'fc-one-line-ellipsis')}>
{removeBrackets(facility.facility_name)} {removeBrackets(facility.facility_name)}
</Typography> </Typography>
......
...@@ -60,6 +60,31 @@ ...@@ -60,6 +60,31 @@
padding-top: 8px; padding-top: 8px;
} }
.fc-one-line-ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.fc-two-line-ellipsis {
position: relative;
line-height: 1em;
max-height: 2em;
overflow: hidden;
}
@supports (-webkit-line-clamp: 2) {
.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 */
}
}
//Above lg //Above lg
@media screen and (min-width: map-get($breakpoints, lg)) { @media screen and (min-width: map-get($breakpoints, lg)) {
.fc-root { .fc-root {
...@@ -69,31 +94,6 @@ ...@@ -69,31 +94,6 @@
transform: scale(.9); transform: scale(.9);
} }
} }
.fc-two-line-ellipsis {
position: relative;
line-height: 1em;
max-height: 2em;
overflow: hidden;
}
@supports (-webkit-line-clamp: 2) {
.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;
overflow: hidden;
}
} }
//Between lg and xl //Between lg and xl
...@@ -142,14 +142,15 @@ ...@@ -142,14 +142,15 @@
.fc-card-content { .fc-card-content {
flex: 1; flex: 1;
min-width: 0;
} }
.fc-media { .fc-media {
display: none !important; display: none !important;
} }
.fc-logo-container { .fc-title-container {
margin: 0 !important; width: 90%;
} }
.fc-extra-info { .fc-extra-info {
...@@ -157,24 +158,17 @@ ...@@ -157,24 +158,17 @@
width: 100% !important; width: 100% !important;
padding: 0 !important; padding: 0 !important;
justify-content: center; justify-content: center;
font-size: 11px;
} }
}
//Under lg
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.fc-small-grid-item-spacing { .fc-small-grid-item-spacing {
padding: 0 8px !important; padding: 0 8px !important;
} }
.fc-media {
height: 115px * $fc-sm-scale;
}
.fc-logo-container { .fc-logo-container {
width: 100px * $fc-sm-scale; width: 100px * $fc-sm-scale;
height: 100px * $fc-sm-scale; height: 100px * $fc-sm-scale;
margin-top: -60px * $fc-sm-scale; margin: 0 !important;
border-radius: 50%; border-radius: 50%;
border: 5px * $fc-sm-scale solid white; border: 5px * $fc-sm-scale solid white;
} }
...@@ -184,16 +178,8 @@ ...@@ -184,16 +178,8 @@
height: 100px * $fc-sm-scale; height: 100px * $fc-sm-scale;
} }
.fc-extra-info {
font-size: 11px;
}
.fc-card-map-marker-icon { .fc-card-map-marker-icon {
height: 20px !important; height: 20px !important;
width: 20px !important; width: 20px !important;
} }
.fc-map-dialog {
width: 100% !important;
}
} }
\ No newline at end of file
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