Commit 09b0ddf3 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Work on mobile card design. WIP.

parent cdd37e36
......@@ -170,7 +170,7 @@ class FacilityCard extends React.Component {
</Grid>
</CardContent>
<CardActions>
<CardActions className={'fc-card-actions'}>
<Grid container justify={'space-around'}>
<Grid item className={'fc-extra-info-wrapper'}>
<FacilityStatus facility={facility}/>
......@@ -184,11 +184,13 @@ class FacilityCard extends React.Component {
{facility.facility_location.building}
</Typography>
</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>
</CardActions>
<Button className={'fc-toggle-map-btn'} onClick={this.toggleMap}>Open Map</Button>
<Dialog open={this.state.isMapOpen} onRequestClose={this.toggleMap} classes={{paper: 'fc-map-dialog'}}>
<FacilitiesMap facilities={facilities} facility={facility} isMapOpen={true}/>
</Dialog>
......
......@@ -2,8 +2,8 @@
.facility-status-text {
align-items: center;
border: 2px solid;
border-radius: 10px;
border: 1.5px solid;
border-radius: 7px;
padding: 5px;
font-weight: bold !important;
......
......@@ -60,7 +60,7 @@
overflow: hidden;
}
.fc-toggle-map-btn {
.fc-toggle-map-btn-container {
display: none !important;
}
......@@ -130,10 +130,25 @@
overflow: inherit;
}
.fc-toggle-map-btn {
.fc-toggle-map-btn-container {
display: block !important;
}
.fc-toggle-map-btn {
width: 100% !important;
}
.fc-extra-info-wrapper {
max-width: 100%;
width: 100%;
justify-content: center;
padding: 4px !important;
}
.fc-card-actions {
height: inherit !important;
padding-top: 8px !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