Commit f5b7adfd authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Changes to card on mobile (short and fat design). Introduced breakpoints map (SASS)

parent 4615625b
...@@ -168,15 +168,13 @@ class FacilityCard extends React.Component { ...@@ -168,15 +168,13 @@ class FacilityCard extends React.Component {
<FacilityCategory category={facility.facility_category} /> <FacilityCategory category={facility.facility_category} />
</Grid> </Grid>
</Grid> </Grid>
</CardContent>
<CardActions className={'fc-card-actions'}> <Grid container justify={'space-around'} className={'fc-extra-info-wrapper'}>
<Grid container justify={'space-around'}> <Grid item className={'fc-extra-info'}>
<Grid item className={'fc-extra-info-wrapper'}>
<FacilityStatus facility={facility}/> <FacilityStatus facility={facility}/>
</Grid> </Grid>
<Grid item className={'fc-extra-info-wrapper'}> <Grid item className={'fc-extra-info'}>
<Typography type={'caption'}> <Typography type={'caption'}>
<LocationOnIcon className={'fc-card-map-marker-icon'}/> <LocationOnIcon className={'fc-card-map-marker-icon'}/>
</Typography> </Typography>
...@@ -184,12 +182,12 @@ class FacilityCard extends React.Component { ...@@ -184,12 +182,12 @@ class FacilityCard extends React.Component {
{facility.facility_location.building} {facility.facility_location.building}
</Typography> </Typography>
</Grid> </Grid>
</Grid>
<Grid item className={classnames('fc-extra-info-wrapper', 'fc-toggle-map-btn-container')}> <Grid item className={'fc-toggle-map-btn-container'}>
<Button className={'fc-toggle-map-btn'} onClick={this.toggleMap}>Open Map</Button> <Button className={'fc-toggle-map-btn'} onClick={this.toggleMap}>Open Map</Button>
</Grid>
</Grid> </Grid>
</CardActions> </CardContent>
<Dialog open={this.state.isMapOpen} onRequestClose={this.toggleMap} classes={{paper: 'fc-map-dialog'}}> <Dialog open={this.state.isMapOpen} onRequestClose={this.toggleMap} classes={{paper: 'fc-map-dialog'}}>
<FacilitiesMap facilities={facilities} facility={facility} isMapOpen={true}/> <FacilitiesMap facilities={facilities} facility={facility} isMapOpen={true}/>
......
$breakpoints: (
xs: 360px,
sm: 600px,
md: 900px,
lg: 1024px,
xl: 1680px,
);
/* FacilityCard */ /* FacilityCard */
/* $fc-lg-scale: .8;
This is the scaling that is applied to medium sized devices. $fc-sm-scale: .75;
*/
$fc-mdScale: .8;
/* Favorite Button */ /* Favorite Button */
$favorite-button-md-scale: .8; $favorite-button-lg-scale: .8;
\ No newline at end of file $favorite-button-sm-scale: .75;
\ No newline at end of file
...@@ -20,10 +20,20 @@ ...@@ -20,10 +20,20 @@
color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0);
} }
@media screen and (min-width: 1024px) and (max-width: 1679px) { //Between lg and xl
@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
.favorite-button-heart { .favorite-button-heart {
height: 24px * $favorite-button-md-scale !important; height: 24px * $favorite-button-lg-scale !important;
width: 24px * $favorite-button-md-scale !important; width: 24px * $favorite-button-lg-scale !important;
padding: 5px * $favorite-button-md-scale !important; padding: 5px * $favorite-button-lg-scale !important;
}
}
//Under lg
@media screen and (max-width: map-get($breakpoints, lg)) {
.favorite-button-heart {
height: 24px * $favorite-button-sm-scale !important;
width: 24px * $favorite-button-sm-scale !important;
padding: 5px * $favorite-button-sm-scale !important;
} }
} }
\ No newline at end of file
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
} }
.fc-card-content { .fc-card-content {
padding: 8px 4px 0 4px !important; padding: 8px 4px !important;
} }
.fc-small-grid-container-spacing { .fc-small-grid-container-spacing {
...@@ -47,12 +47,16 @@ ...@@ -47,12 +47,16 @@
font-weight: bold !important; font-weight: bold !important;
} }
.fc-extra-info-wrapper { .fc-extra-info {
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 50%; max-width: 50%;
} }
.fc-extra-info-wrapper {
padding-top: 8px;
}
.fc-two-line-ellipsis { .fc-two-line-ellipsis {
position: relative; position: relative;
line-height: 1em; line-height: 1em;
...@@ -82,9 +86,10 @@ ...@@ -82,9 +86,10 @@
overflow: hidden; overflow: hidden;
} }
@media screen and (min-width: 1024px) and (max-width: 1679px) { //Between lg and xl
@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
.fc-root { .fc-root {
width: 250px * $fc-mdScale; width: 250px * $fc-lg-scale;
height: 230px; height: 230px;
} }
...@@ -93,24 +98,23 @@ ...@@ -93,24 +98,23 @@
} }
.fc-media { .fc-media {
border-radius: 5px 5px 0 0; height: 115px * $fc-lg-scale;
height: 115px * $fc-mdScale;
} }
.fc-logo-container { .fc-logo-container {
width: 100px * $fc-mdScale; width: 100px * $fc-lg-scale;
height: 100px * $fc-mdScale; height: 100px * $fc-lg-scale;
margin-top: -60px * $fc-mdScale; margin-top: -60px * $fc-lg-scale;
border-radius: 50%; border-radius: 50%;
border: 5px * $fc-mdScale solid white; border: 5px * $fc-lg-scale solid white;
} }
.fc-logo { .fc-logo {
width: 100px * $fc-mdScale; width: 100px * $fc-lg-scale;
height: 100px * $fc-mdScale; height: 100px * $fc-lg-scale;
} }
.fc-extra-info-wrapper { .fc-extra-info {
font-size: 11px; font-size: 11px;
} }
...@@ -120,10 +124,9 @@ ...@@ -120,10 +124,9 @@
} }
} }
@media screen and (max-width: 1023px) { //Under lg
@media screen and (max-width: map-get($breakpoints, lg)) {
.fc-root { .fc-root {
@include transition(150ms ease-in-out);
&.fc-selected { &.fc-selected {
.fc-one-line-ellipsis { .fc-one-line-ellipsis {
white-space: normal; white-space: normal;
...@@ -138,20 +141,49 @@ ...@@ -138,20 +141,49 @@
width: 100% !important; width: 100% !important;
} }
.fc-extra-info-wrapper { .fc-extra-info {
max-width: 100%; max-width: 100% ;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
padding: 4px !important; padding: 4px 8px !important;
} }
.fc-card-actions { .fc-card-content {
height: inherit !important; padding-bottom: 0 !important;
padding-top: 8px !important;
} }
} }
} }
.fc-small-grid-item-spacing {
padding: 0 8px !important;
}
.fc-media {
height: 115px * $fc-sm-scale;
}
.fc-logo-container {
width: 100px * $fc-sm-scale;
height: 100px * $fc-sm-scale;
margin-top: -60px * $fc-sm-scale;
border-radius: 50%;
border: 5px * $fc-sm-scale solid white;
}
.fc-logo {
width: 100px * $fc-sm-scale;
height: 100px * $fc-sm-scale;
}
.fc-extra-info {
font-size: 11px;
}
.fc-card-map-marker-icon {
height: 20px !important;
width: 20px !important;
}
.fc-map-dialog { .fc-map-dialog {
width: 100% !important; width: 100% !important;
} }
......
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