Commit 412cb1e6 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Started working on making the general layout more responsive.

parent 2c48318f
......@@ -2,28 +2,29 @@ import React from 'react'
import {withStyles} from 'material-ui/styles';
import FacilityCard from '../containers/FacilityCard'
import Grid from 'material-ui/Grid';
import fuzzysearch from 'fuzzysearch';
const CardContainer = ({classes, searchTerm,facilities}) => {
const CardContainer = ({classes, searchTerm, facilities}) => {
const filterCards = (facility) => {
const name = facility.facility_name.toLowerCase()
return name.includes(searchTerm.toLowerCase())
}
return (
<Grid container className={classes.root} spacing={24} justify={'center'} align={'flex-end'}>
{facilities.filter(filterCards).map(item =>{
return(<Grid key={item.slug} item>
<FacilityCard facility={item}/>
</Grid>)
{facilities.filter(filterCards).map(item => {
return (
<Grid key={item.slug} item>
<FacilityCard facility={item}/>
</Grid>
)
})}
</Grid>
)
}
const styleSheet = {
root:{
root: {
// backgroundColor:'red',
margin:0,
margin: 0,
width: '100%',
display: 'flex',
flexWrap: 'wrap',
......
......@@ -12,44 +12,48 @@ const Sidebar = ({classes,facility,isSidebarOpen,facilities}) => {
const removeBrackets = (name) => {
if(typeof(name) === "undefined"){
return ""
}
}
const openBracket = name.indexOf('[')
if(openBracket !== -1){
return name.substring(0,openBracket)
}
return name
}
}
// if(isSidebarOpen){
// return (<div></div>)
// }
return(
return(
<Paper className={classNames([classes.root,(!isSidebarOpen && classes.openSidebar),(isSidebarOpen && classes.closedSidebar)])}>
<div className={classes.row1}>
<Avatar className={classes.avatar} src={require('../images/chipotleLogo.png')} />
<div className={classes.title}>
<Typography type='display1'>{removeBrackets(facility.facility_name)}</Typography>
</div>
</div>
<Divider className={classes.divider}/>
</div>
<Divider className={classes.divider}/>
<div className={classes.labelHolder}>
<div className={classes.labelRow}>
<TextwTitle label="Location" content="The Johnson Center" />
<TextwTitle label="Location" content="The Johnson Center" />
<TextwTitle label="Location" content="The Johnson Center" />
<TextwTitle label="Location" content="The Johnson Center" />
</div>
<div className={classes.labelRow}>
<TextwTitle label="Location" content="The Johnson Center" />
<TextwTitle label="Location" content="The Johnson Center asdfasdfasdfasdf asd fas as asd asdfasdfasf " />
<TextwTitle label="Location" content="The Johnson Center" />
<TextwTitle label="Location" content="The Johnson Center asdfasdfasdfasdf asd fas as asd asdfasdfasf " />
</div>
</div>
</div>
<div className={classes.row2}>
<FacilitiesMap facilities={facilities}facility={facility}/>
</div>
</Paper>
)
)
}
const styleSheet = {
'@media screen and (max-width: 600px)': {
root: {
display: 'none !important'
}
},
labelRow:{
display:'flex',
},
......
......@@ -118,6 +118,7 @@ const styleSheet = {
position:'relative',
flex:'1 1 100%',
height:'100%',
width: '100%',
paddingTop:16,
},
sidebarToggleContainer:{
......@@ -147,9 +148,13 @@ const styleSheet = {
height:'calc(100% - 86px)',
overflowY:'auto',
overflowX:'hidden',
},
'@media screen and (max-width: 600px)': {
sidebarToggleContainer: {
display: 'none'
}
}
}
};
function mapStateToProps(state) {
return {
......
......@@ -97,6 +97,11 @@ function getSuggestions(value,suggestions) {
}
const styles = theme => ({
'@media screen and (max-width: 600px)': {
paperBackground: {
width: '90% !important'
}
},
container: {
flexGrow: 1,
position: 'relative',
......
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