Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
src/containers/FacilityCard.js
View file @ f5b7adfd
......@@ -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')}>
<Button className={'fc-toggle-map-btn'} onClick={this.toggleMap}>Open Map</Button>
</Grid>
<Grid item className={'fc-toggle-map-btn-container'}>
<Button className={'fc-toggle-map-btn'} onClick={this.toggleMap}>Open Map</Button>
</Grid>
</CardActions>
</CardContent>
<Dialog open={this.state.isMapOpen} onRequestClose={this.toggleMap} classes={{paper: 'fc-map-dialog'}}>
<FacilitiesMap facilities={facilities} facility={facility} isMapOpen={true}/>
......
src/styles/_variables.scss
View file @ f5b7adfd
$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
src/styles/components/favoriteButton.scss
View file @ f5b7adfd
......@@ -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
src/styles/containers/facilityCard.scss
View file @ f5b7adfd
......@@ -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,20 +141,49 @@
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-actions {
height: inherit !important;
padding-top: 8px !important;
.fc-card-content {
padding-bottom: 0 !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 {
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