Skip to content

GitLab

Commit 3846eee2 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Continued to make styles sassy.

parent d0a6debc
Hide whitespace changes
Inline Side-by-side
src/components/AppBar.js
View file @ 3846eee2
import React from 'react';
import PropTypes from 'prop-types';
import {withStyles, withTheme} from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import {compose} from 'redux';
import classNames from 'classnames'
class CustomAppBar extends React.Component {
......@@ -29,25 +26,24 @@ class CustomAppBar extends React.Component {
render() {
return (<div>
<AppBar position="absolute" className={this.props.classes.appBar}>
<Toolbar className={this.props.classes.toolBar}>
<img src={require('../images/SRCT_square.svg')} className={this.props.classes.navbarLogo}/>
<Typography type="title"
className={classNames(this.props.classes.title, this.props.classes.navbarTextColor)}>
<AppBar position="absolute" className={'app-bar'}>
<Toolbar className={'app-bar-tool-bar'}>
<img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
<Typography type="title" className={classNames('app-bar-title', 'app-bar-text-color')}>
What's Open
</Typography>
<IconButton onClick={this.toggleExpand} aria-label="Menu"
className={classNames(this.props.classes.appBarMenuButton, this.props.classes.navbarTextColor)}>
className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
<MenuIcon/>
</IconButton>
<div
className={classNames(this.props.classes.linkContainer, !this.state.isAppBarExpanded && this.props.classes.hide)}>
className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
<Button
className={classNames(this.props.classes.appBarLinkButton, this.props.classes.navbarTextColor)}>
className={classNames('app-bar-link-button', 'app-bar-text-color')}>
About
</Button>
<Button
className={classNames(this.props.classes.appBarLinkButton, this.props.classes.navbarTextColor)}>
className={classNames('app-bar-link-button', 'app-bar-text-color')}>
Feedback
</Button>
</div>
......@@ -57,51 +53,4 @@ class CustomAppBar extends React.Component {
};
}
CustomAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
const styleSheet = {
'@media screen and (max-width: 600px)': {
appBarLinkButton: {
display: 'block',
padding: 0,
textAlign: 'left'
},
appBarMenuButton: {
display: 'inherit !important'
},
hide: {
maxHeight: '0 !important',
overflow: 'hidden'
},
toolBar: {
flexWrap: 'wrap',
},
linkContainer: {
display: 'block',
flexBasis: '100%',
transition: 'ease-in-out 2s'
}
},
appBar: {
backgroundColor: 'white',
boxShadow: '0px 1px 0px 0px rgba(0, 0, 0, 0.2)'
},
title: {
marginRight: 'auto',
},
appBarMenuButton: {
display: 'none'
},
navbarLogo: {
width: '30px',
height: '30px',
marginRight: '5px'
},
navbarTextColor: {
color: '#354052'
},
};
export default compose(withStyles(styleSheet), withTheme)(CustomAppBar);
export default CustomAppBar;
src/components/CardContainer.js
View file @ 3846eee2
......@@ -3,15 +3,15 @@ import {withStyles} from 'material-ui/styles';
import FacilityCard from '../containers/FacilityCard'
import Grid from 'material-ui/Grid';
const CardContainer = ({classes, searchTerm, facilities}) => {
const CardContainer = ({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 container className={'card-container-root'} spacing={24} justify={'center'} align={'flex-end'}>
{facilities.filter(filterCards).map(item =>{
return(
<Grid key={item.slug} item>
<FacilityCard facility={item}/>
</Grid>
......@@ -20,15 +20,5 @@ const CardContainer = ({classes, searchTerm, facilities}) => {
</Grid>
)
}
const styleSheet = {
root: {
// backgroundColor:'red',
margin: 0,
width: '100%',
display: 'flex',
flexWrap: 'wrap',
},
}
export default withStyles(styleSheet)(CardContainer)
\ No newline at end of file
export default CardContainer;
\ No newline at end of file
src/components/FacilityCategory.js
View file @ 3846eee2
......@@ -11,7 +11,7 @@ import FitnessCenterIcon from 'material-ui-icons/FitnessCenter';
import ShoppingCartIcon from 'material-ui-icons/ShoppingCart'
import {red, blue, brown, grey, teal, deepOrange, lime} from 'material-ui/colors';
const FacilityCategory = ({classes, category}) => {
const FacilityCategory = ({category}) => {
const generateAvatar = () => {
let color;
......@@ -42,42 +42,42 @@ const FacilityCategory = ({classes, category}) => {
case 2: //Restaurant
case 5: //Take out dining hall
color = red[400];
icon = <RestaurantIcon className={classes.categoryIcon}/>;
icon = <RestaurantIcon className={'facility-category-icon'}/>;
break;
case 3: //Convenience Store
color = blue[500];
icon = <StoreIcon className={classes.categoryIcon}/>;
icon = <StoreIcon className={'facility-category-icon'}/>;
break;
case 4: //Cafe
color = brown[500];
icon = <LocalCafeIcon className={classes.categoryIcon}/>;
icon = <LocalCafeIcon className={'facility-category-icon'}/>;
break;
case 6: //Athletic Facility
color = teal[500];
icon = <FitnessCenterIcon className={classes.categoryIcon}/>;
icon = <FitnessCenterIcon className={'facility-category-icon'}/>;
break;
case 7: //TODO: Print Services - NOT IN API
color = grey[500];
icon = <LocalPrintShopIcon className={classes.categoryIcon} />;
icon = <LocalPrintShopIcon className={'facility-category-icon'} />;
break;
case 8: //TODO Mailroom - NOT IN API
color = deepOrange[500];
icon = <LocalPostOfficeIcon className={classes.categoryIcon}/>;
icon = <LocalPostOfficeIcon className={'facility-category-icon'}/>;
break;
default:
color = lime[500];
icon = <ShoppingCartIcon className={classes.categoryIcon}/>
icon = <ShoppingCartIcon className={'facility-category-icon'}/>
}
return (
<Avatar className={classes.avatar} style={{backgroundColor: color}}>
<Avatar className={'facility-category-avatar'} style={{backgroundColor: color}}>
{icon}
</Avatar>
)
};
return (
<div className={classes.categoryWrapper}>
<div className={'facility-category-wrapper'}>
{/* {generateAvatar()} */}
<Typography type={'body1'} noWrap>
{category.name}
......@@ -86,21 +86,4 @@ const FacilityCategory = ({classes, category}) => {
)
};
const styleSheet = {
categoryWrapper: {
display: 'flex',
alignItems: 'center'
},
categoryIcon: {
width: '14px !important',
height: '14px !important',
padding: '4px !important',
},
avatar: {
width: 'auto !important',
height: 'auto !important',
marginRight: '8px'
},
};
export default withStyles(styleSheet)(FacilityCategory);
\ No newline at end of file
export default FacilityCategory;
\ No newline at end of file
src/components/FacilityStatus.js
View file @ 3846eee2
import React from 'react';
import {withStyles} from 'material-ui/styles';
import Typography from 'material-ui/Typography';
import DoneIcon from 'material-ui-icons/Done';
import CloseIcon from 'material-ui-icons/Close';
import {green, red} from 'material-ui/colors'
import FacilityUtils from '../utils/facilityUtils';
const FacilityStatus = ({classes, facility}) => {
const FacilityStatus = ({facility}) => {
/**
* Generates information about the facility's status.
......@@ -27,7 +26,7 @@ const FacilityStatus = ({classes, facility}) => {
label = 'OPEN';
color = green[500];
icon = <DoneIcon/>;
}else {
} else {
label = 'CLOSED';
color = red[500];
icon = <CloseIcon/>
......@@ -43,25 +42,11 @@ const FacilityStatus = ({classes, facility}) => {
const statusInfo = generateStatusInfo(facility);
return (
<Typography type={'caption'} className={classes.statusText} style={{color: statusInfo.color}}>
<Typography type={'caption'} className={'facility-status-text'} style={{color: statusInfo.color}}>
{statusInfo.icon}
{statusInfo.label}
</Typography>
)
};
const styleSheet = {
statusText: {
display: 'flex',
alignItems: 'center'
},
chip: {
height: '28px',
borderRadius: '4px',
},
isOpenText: {
color: 'white',
display: 'inline',
}
};
export default withStyles(styleSheet)(FacilityStatus);
\ No newline at end of file
export default FacilityStatus;
\ No newline at end of file
src/components/FavoriteButton.js
View file @ 3846eee2
......@@ -23,47 +23,24 @@ class FavoriteButton extends React.Component {
} else {
this.props.addFavoriteFacility(this.props.facility.slug);
}
}
};
render() {
const {heart,heartFavorited,heartHover,heartNoHover} = this.props.classes;
const {isHovered} = this.props;
if (this.props.isFavorite) {
return (<FavoriteIcon onClick={this.handleClick} className={classNames(heart,heartFavorited)}/>);
return (<FavoriteIcon onClick={this.handleClick} className={classNames('favorite-button-heart', 'favorite-button-heart-favorited')}/>);
}
return (<FavoriteBorderIcon onClick={this.handleClick} className={classNames(heart,{[heartHover]:isHovered,[heartNoHover]:!isHovered})}/>);
return (<FavoriteBorderIcon onClick={this.handleClick} className={classNames('favorite-button-heart', isHovered ? 'favorite-button-heart-hover' : 'favorite-button-heart-no-hover')}/>);
}
}
FavoriteButton.propTypes = {
classes: PropTypes.object.isRequired,
facility: PropTypes.object.isRequired,
isFavorite: PropTypes.bool.isRequired,
addFavoriteFacility: PropTypes.func.isRequired,
removeFavoriteFacility: PropTypes.func.isRequired,
};
const sizeScale = .75
const styleSheet = {
heart: {
position: 'absolute',
top: 0,
right: 0,
height: 24*sizeScale,
width: 24*sizeScale,
padding: 5*sizeScale,
cursor: 'pointer',
},
heartFavorited:{
color:pink[500]
},
heartHover:{
color:'grey'
},
heartNoHover:{
color:'rgba(0,0,0,0)'
}
};
export default withStyles(styleSheet)(FavoriteButton);
\ No newline at end of file
export default FavoriteButton;
\ No newline at end of file
src/components/Sidebar.js
View file @ 3846eee2
import React from 'react';
import {withStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper'
import Avatar from 'material-ui/Avatar'
import Typography from 'material-ui/Typography'
......@@ -9,103 +8,52 @@ import FacilitiesMap from '../components/FacilitiesMap'
import classNames from 'classnames';
import Button from 'material-ui/Button';
const Sidebar = ({classes,facility,isSidebarOpen,isSidebarMapOpen,toggleSidebarMap,facilities}) => {
const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, facilities}) => {
const removeBrackets = (name) => {
if(typeof(name) === "undefined"){
return ""
}
const openBracket = name.indexOf('[')
if(openBracket !== -1){
return name.substring(0,openBracket)
if (typeof(name) === "undefined") {
return "";
}
return name
}
// if(isSidebarOpen){
// return (<div></div>)
// }
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 className={classes.labelHolder}>
<div className={classes.labelRow}>
<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 " />
</div>
</div>
<div className={classes.row2}>
<FacilitiesMap isMapOpen={isSidebarMapOpen} facilities={facilities} facility={facility}/>
const openBracket = name.indexOf('[');
if (openBracket !== -1) {
return name.substring(0, openBracket);
}
<Button className={classes.toggleMapBtn} onClick={toggleSidebarMap}>{isSidebarMapOpen ? 'Close Map' : 'Open Map'}</Button>
</div>
</Paper>
)
}
const styleSheet = {
'@media screen and (max-width: 600px)': {
root: {
display: 'none !important'
},
},
labelRow:{
display:'flex',
},
labelHolder:{
margin:16,
},
openSidebar:{
flex:'1 0 400px',
},
closedSidebar:{
flex:'1 0 0px',
},
root:{
overflow:'hidden',
display:'block',
boxSizing:'border-box',
position:'relative',
webkitTransition: '150ms ease-in-out',
mozTransition: '150ms ease-in-out',
oTransition: ' 150ms ease-in-out',
transition: '150ms ease-in-out',
},
divider:{
margin:16,
},
row1:{
display:'flex',
padding:8,
return name;
};
},
avatar:{
width:100,
height:100,
},
title:{
height:100,
marginLeft:8,
display:'flex',
alignItems:'center'
},
row2:{
position: 'absolute',
bottom: '0px',
width: '100%'
},
toggleMapBtn: {
width: '100%'
}
}
return (
<Paper
className={classNames(['sidebar-root', (!isSidebarOpen && 'sidebar-open'), (isSidebarOpen && 'sidebar-closed')])}>
<div className={'sidebar-row1'}>
<Avatar className={'sidebar-avatar'} src={require('../images/chipotleLogo.png')}/>
<div className={'sidebar-title'}>
<Typography type='display1'>{removeBrackets(facility.facility_name)}</Typography>
</div>
</div>
<Divider className={'sidebar-divider'}/>
<div className={'sidebar-label-holder'}>
<div className={'sidebar-label-row'}>
<TextwTitle label="Location" content="The Johnson Center"/>
<TextwTitle label="Location" content="The Johnson Center"/>
</div>
<div className={'sidebar-label-row'}>
<TextwTitle label="Location" content="The Johnson Center"/>
<TextwTitle label="Location"
content="The Johnson Center asdfasdfasdfasdf asd fas as asd asdfasdfasf "/>
</div>
</div>
<div className={'sidebar-row2'}>
<FacilitiesMap isMapOpen={isSidebarMapOpen} facilities={facilities} facility={facility}/>
<Button className={'sidebar-toggle-map-btn'}
onClick={toggleSidebarMap}>{isSidebarMapOpen ? 'Close Map' : 'Open Map'}</Button>
</div>
</Paper>
)
};
export default withStyles(styleSheet)(Sidebar)
export default Sidebar;
src/styles/_mixins.scss
View file @ 3846eee2
@mixin transition($transition...) {
-moz-transition: $transition;
-o-transition: $transition;
-webkit-transition: $transition;
transition: $transition;
}
\ No newline at end of file
src/styles/_variables.scss
View file @ 3846eee2
......@@ -3,4 +3,8 @@
/*
This is the scaling that is applied to medium sized devices.
*/
$fc-mdScale: .8;
\ No newline at end of file
$fc-mdScale: .8;
/* Favorite Button */
$favorite-button-md-scale: .8;
\ No newline at end of file
src/styles/components/appBar.scss 0 → 100644
View file @ 3846eee2
.app-bar {
background-color: white !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) !important;
};
.app-bar-title {
margin-right: auto !important;
};
.app-bar-menu-button {
display: none !important;
};
.app-bar-logo {
width: 30px;
height: 30px;
margin-right: 5px;
};
.app-bar-text-color {
color: #354052;
};
@media screen and (max-width: 600px) {
.app-bar-link-button {
display: block !important;
padding: 0 !important;
text-align: left;
};
.app-bar-menu-button {
display: inherit !important;
};
.app-bar-hide {
max-height: 0 !important;
overflow: hidden
};
.app-bar-tool-bar {
flex-wrap: wrap;
};
.app-bar-link-container {
display: block;
flex-basis: 100%;
transition: ease-in-out 2s;
}
}
\ No newline at end of file
src/styles/components/cardContainer.scss 0 → 100644
View file @ 3846eee2
.card-container-root {
margin: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
};
\ No newline at end of file
src/styles/components/facilityCategory.scss 0 → 100644
View file @ 3846eee2
.facility-category-wrapper {
display: flex;
align-items: center
};
.facility-category-icon {
width: 14px !important;
height: 14px !important;
padding: 4px !important;
};
.facility-category-icon {
width: auto !important;
height: auto !important;
margin-right: 8px
};
\ No newline at end of file
src/styles/components/facilityStatus.scss 0 → 100644
View file @ 3846eee2
.facility-status-text {
display: flex;
align-items: center;
};
\ No newline at end of file
src/styles/components/favoriteButton.scss 0 → 100644
View file @ 3846eee2
.favorite-button-heart {
position: absolute;
top: 0;
right: 0;
height: 24px;
width: 24px;
padding: 5px;
cursor: pointer;
};
.favorite-button-heart-favorited {
color: #E91E63; //TODO: Somehow use materials color system
};
.favorite-button-heart-hover {
color: grey;
};
.favorite-button-heart-no-hover {
color: rgba(0,0,0,0);
}
@media screen and (min-width:1024px) and (max-width:1679px) {