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 Dialog, {DialogTitle, DialogContent} from 'material-ui/Dialog';
import Dialog from 'material-ui/Dialog';
import Grid from 'material-ui/Grid';
import FacilityTags from './FacilityTags';
import WeekHours from './WeekHours';
......@@ -7,7 +7,9 @@ import Button from 'material-ui/Button';
import Avatar from 'material-ui/Avatar';
import Typography from 'material-ui/Typography';
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 {removeBrackets} from '../utils/nameUtils';
......@@ -42,24 +44,32 @@ class FacilityDialog extends React.Component {
return (
<Dialog classes={{root: 'fd-dialog-root', paper: 'fd-dialog-paper'}} open={isOpen} onRequestClose={onRequestClose}>
<Grid container className={'fd-container'}>
<Grid item>
<IconButton className={'fd-close-btn'} onClick={onRequestClose}>
<CloseIcon />
</IconButton>
<Grid container className={'fd-container'} justify={'center'}>
<Grid item className={'fd-header-container'}>
<Grid container className={'fd-header'}>
<Grid item>
<Avatar src={require('../images/chipotleLogo.png')} />
</Grid>
<Grid item>
<Typography type={'headline'}>{removeBrackets(facility.facility_name)}</Typography>
<Grid item className={'fd-header-text-container'}>
<Typography className={'fd-header-text'} type={'headline'}>
{removeBrackets(facility.facility_name)}
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>
<TextwTitle label="Building" content={facility.facility_location.building} />
<Grid item className={'fd-location-wrapper'}>
<Typography type={'caption'}>
<LocationOnIcon/>
</Typography>
<Typography title={facility.facility_location.building} type={'caption'} align={'center'}>
{facility.facility_location.building}
</Typography>
</Grid>
<Grid item className={'fd-facility-tags'}>
<FacilityTags facility={facility}/>
</Grid>
......
@import '../variables';
.fd-small-grid {
padding: 4px !important;
}
.fd-dialog-paper {
width: 100%;
//width: 100%;
width: auto !important;
border-radius: 5px !important;
}
.fd-container {
margin: 0 !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 {
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;
width: 100%;
}
.fd-facility-tags {
@extend .fd-small-grid;
width: 100%;
}
.fd-week-hours {
@extend .fd-small-grid;
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