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