Commit 9cb98b9e authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Continued work on facility mobile dialog.

parent e7a15d27
Pipeline #1797 passed with stage
in 1 minute and 40 seconds
import React from 'react'; import React from 'react';
import Dialog, {DialogTitle, DialogContent} from 'material-ui/Dialog'; import Dialog from 'material-ui/Dialog';
import Grid from 'material-ui/Grid'; import Grid from 'material-ui/Grid';
import FacilityTags from './FacilityTags'; import FacilityTags from './FacilityTags';
import WeekHours from './WeekHours'; import WeekHours from './WeekHours';
...@@ -7,7 +7,9 @@ import Button from 'material-ui/Button'; ...@@ -7,7 +7,9 @@ import Button from 'material-ui/Button';
import Avatar from 'material-ui/Avatar'; import Avatar from 'material-ui/Avatar';
import Typography from 'material-ui/Typography'; import Typography from 'material-ui/Typography';
import MapDialog from './MapDialog'; import MapDialog from './MapDialog';
import TextwTitle from './TextwTitle'; import CloseIcon from 'material-ui-icons/Close';
import IconButton from 'material-ui/IconButton';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import {getMaxBounds} from '../utils/mapboxUtils'; import {getMaxBounds} from '../utils/mapboxUtils';
import {removeBrackets} from '../utils/nameUtils'; import {removeBrackets} from '../utils/nameUtils';
...@@ -42,24 +44,32 @@ class FacilityDialog extends React.Component { ...@@ -42,24 +44,32 @@ class FacilityDialog extends React.Component {
return ( return (
<Dialog classes={{root: 'fd-dialog-root', paper: 'fd-dialog-paper'}} open={isOpen} onRequestClose={onRequestClose}> <Dialog classes={{root: 'fd-dialog-root', paper: 'fd-dialog-paper'}} open={isOpen} onRequestClose={onRequestClose}>
<Grid container className={'fd-container'}> <IconButton className={'fd-close-btn'} onClick={onRequestClose}>
<Grid item> <CloseIcon />
</IconButton>
<Grid container className={'fd-container'} justify={'center'}>
<Grid item className={'fd-header-container'}>
<Grid container className={'fd-header'}> <Grid container className={'fd-header'}>
<Grid item> <Grid item>
<Avatar src={require('../images/chipotleLogo.png')} /> <Avatar src={require('../images/chipotleLogo.png')} />
</Grid> </Grid>
<Grid item> <Grid item className={'fd-header-text-container'}>
<Typography type={'headline'}>{removeBrackets(facility.facility_name)}</Typography> <Typography className={'fd-header-text'} type={'headline'}>
{removeBrackets(facility.facility_name)}
</Typography>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item className={'fd-location-wrapper'}>
<Grid item> <Typography type={'caption'}>
<TextwTitle label="Building" content={facility.facility_location.building} /> <LocationOnIcon/>
</Typography>
<Typography title={facility.facility_location.building} type={'caption'} align={'center'}>
{facility.facility_location.building}
</Typography>
</Grid> </Grid>
<Grid item className={'fd-facility-tags'}> <Grid item className={'fd-facility-tags'}>
<FacilityTags facility={facility}/> <FacilityTags facility={facility}/>
</Grid> </Grid>
......
@import '../variables'; @import '../variables';
.fd-small-grid {
padding: 4px !important;
}
.fd-dialog-paper { .fd-dialog-paper {
width: 100%; //width: 100%;
width: auto !important;
border-radius: 5px !important;
} }
.fd-container { .fd-container {
margin: 0 !important; margin: 0 !important;
width: 100% !important; width: 100% !important;
overflow-x: hidden;
}
.fd-close-btn {
position: absolute !important;
width: 24px !important;
height: 24px !important;
top: 5px;
right: 5px;
}
.fd-header-container {
@extend .fd-small-grid;
width: 100%;
} }
.fd-header { .fd-header {
display: flex; display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
}
.fd-header-text-container {
flex: 1 !important;
}
.fd-header-text {
max-width: 80% !important;
}
.fd-location-wrapper {
@extend .fd-small-grid;
display: flex !important;
align-items: center; align-items: center;
width: 100%;
} }
.fd-facility-tags { .fd-facility-tags {
@extend .fd-small-grid;
width: 100%; width: 100%;
} }
.fd-week-hours { .fd-week-hours {
@extend .fd-small-grid;
width: 100%; width: 100%;
} }
......
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