Merge branch 'searchbar-to-navbar' of https://git.gmu.edu/srct/whats-open-web...

Merge branch 'searchbar-to-navbar' of https://git.gmu.edu/srct/whats-open-web into searchbar-to-navbar

src/components/AppBar.js

@@ -13,7 +13,8 @@ class CustomAppBar extends React.Component {
     constructor(props) {
         super();
         this.state = {
-            isAppBarExpanded: false
+            isAppBarExpanded: false,
+            isSearchExpanded: false,
         };
 
         this.toggleExpand = this.toggleExpand.bind(this);
@@ -27,17 +28,19 @@ class CustomAppBar extends React.Component {
 
     render() {
         return (<div>
-            <AppBar position="absolute" className={'app-bar'}>
+            <AppBar position="absolute"
+                    className={classNames('app-bar', this.state.isSearchExpanded && 'app-bar-search-expanded')}>
                 <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>
+                    <SearchBar onSearchExpand={() => this.setState({isSearchExpanded: true})}
+                               onSearchCollapse={() => this.setState({isSearchExpanded: false})}/>
                     <IconButton onClick={this.toggleExpand} aria-label="Menu"
                                 className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
                         <MenuIcon/>
                     </IconButton>
-                    <SearchBar />
                     <div
                         className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
                         <Button

src/components/CardContainer.js

 import React from 'react'
-import {withStyles} from 'material-ui/styles';
 import FacilityCard from '../containers/FacilityCard'
 import Grid from 'material-ui/Grid';
 
 const CardContainer = ({searchTerm, facilities}) => {
+
     const filterCards = (facility) => {
-        const lsearchTerm = searchTerm.toLowerCase()
-        const name = facility.facility_name.toLowerCase()
-        const tags = facility.facility_product_tags
-        tags.forEach((tag) =>{
+        const lSearchTerm = searchTerm.toLowerCase();
+        const facilityName = facility.facility_name.toLowerCase();
+        const facilityLocation = facility.facility_location.building.toLowerCase();
+        const facilityCategory = facility.facility_category.name.toLowerCase();
+        const facilityTags = facility.facility_product_tags;
+
+        facilityTags.forEach((tag) => {
             return tag.toLowerCase()
-        })
-        let hasTag = true;
-        let index = tags.findIndex((tag) =>{
-            return tag.includes(lsearchTerm)
-        })
-        if(index === -1){
-            hasTag = false
-        }
-        return name.includes(lsearchTerm) || hasTag
-     }
-    //  console.log(facilities)
+        });
+
+        let index = facilityTags.findIndex((tag) => {
+            return tag.includes(lSearchTerm)
+        });
+
+        const hasTag = index !== -1;
+
+        return facilityName.includes(lSearchTerm) || facilityLocation.includes(lSearchTerm) ||
+            facilityCategory.includes(lSearchTerm) || hasTag;
+    };
+
     return (
         <Grid container className={'card-container-root'} spacing={24} justify={'center'} alignItems={'flex-end'}>
-            {facilities.filter(filterCards).map(item =>{
-                return(
+            {facilities.filter(filterCards).map(item => {
+                return (
                     <Grid key={item.slug} item>
                         <FacilityCard facility={item} facilities={facilities}/>
                     </Grid>
@@ -32,6 +36,6 @@ const CardContainer = ({searchTerm, facilities}) => {
             })}
         </Grid>
     )
-}
+};
 
 export default CardContainer;
\ No newline at end of file

src/containers/SearchBar.js

 import React from 'react';
+import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {setSearchTerm} from '../actions/ui';
 import SearchIcon from 'material-ui-icons/Search';
 import CloseIcon from 'material-ui-icons/Close';
+import ArrowBackIcon from 'material-ui-icons/ArrowBack';
 import IconButton from 'material-ui/IconButton';
 import Input from 'material-ui/Input';
 import Paper from 'material-ui/Paper';
@@ -15,6 +17,7 @@ class SearchBar extends React.Component {
 
         this.state = {
             isFocused: false,
+            isMobileOpen: false,
             value: ''
         };
     }
@@ -38,6 +41,24 @@ class SearchBar extends React.Component {
         });
     };
 
+    handleMobileExpand = () => {
+        this.setState({
+            isMobileOpen: true
+        });
+
+        this.props.onSearchExpand();
+
+        this.inputElement.focus();
+    };
+
+    handleMobileCollapse = () => {
+        this.setState({
+            isMobileOpen: false
+        });
+
+        this.props.onSearchCollapse();
+    };
+
     clear = () => {
         this.setState({
             value: ''
@@ -49,13 +70,15 @@ class SearchBar extends React.Component {
     render() {
         return (
             <Paper className={classNames('search-bar-paper-background', this.state.isFocused && 'search-bar-focus',
-                this.state.value && 'search-bar-has-value')}>
-                <div className={'search-bar-left-search-container'}>
+                this.state.value && 'search-bar-has-value', this.state.isMobileOpen && 'search-bar-mobile-open')}>
+                <IconButton onClick={this.handleMobileExpand} disableRipple className={'search-bar-search-btn'}>
                     <SearchIcon className={'search-bar-search-icon'}/>
-                </div>
+                </IconButton>
+                <IconButton onClick={this.handleMobileCollapse} disableRipple className={'search-bar-back-btn'}>
+                    <ArrowBackIcon className={'search-bar-back-icon'}/>
+                </IconButton>
                 <Input
-                    placeholder="Names, Locations, etc."
-                    autoFocus
+                    placeholder="Name, Location, etc."
                     disableUnderline
                     className={'search-bar-input'}
                     onChange={this.handleChange}
@@ -64,14 +87,20 @@ class SearchBar extends React.Component {
                     inputProps={{
                         'aria-label': 'Search Bar',
                     }}
+                    inputRef={el => this.inputElement = el}
                     value={this.state.value}
                 />
-                <IconButton onClick={this.clear} className={'search-bar-close-btn'}>
-                    <CloseIcon />
+                <IconButton onClick={this.clear} disableRipple className={'search-bar-close-btn'}>
+                    <CloseIcon/>
                 </IconButton>
             </Paper>
         );
     }
 }
 
+SearchBar.propTypes = {
+    onSearchExpand: PropTypes.func,
+    onSearchCollapse: PropTypes.func
+};
+
 export default connect(null, {setSearchTerm})(SearchBar);
\ No newline at end of file

src/styles/components/appBar.scss

+@import '../variables';
+
 .app-bar {
   background-color: white !important;
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) !important;
@@ -21,7 +23,7 @@
   color: #354052;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
   .app-bar-link-button {
     display: block !important;
     padding: 0 !important;
@@ -46,4 +48,10 @@
     flex-basis: 100%;
     transition: ease-in-out 2s;
   }
+
+  .app-bar-search-expanded {
+    .app-bar-logo, .app-bar-title, .app-bar-menu-button, .app-bar-link-container {
+      display: none !important;
+    }
+  }
 }
\ No newline at end of file

src/styles/containers/searchBar.scss

+@import '../_variables.scss';
+
 .search-bar-paper-background {
   height: 44px;
   width: 400px;
@@ -5,30 +7,30 @@
   border-radius: 4px !important;
   background-color: rgba(0, 0, 0, 0.04) !important;
   box-shadow: none !important;
+}
 
-  &.search-bar-focus {
-    background-color: rgba(255, 255, 255, 1) !important;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
-    border: 1px solid rgba(0,0,0,0.15);
-  }
+.search-bar-search-btn {
+  width: 44px !important;
+  height: 44px !important;
+  cursor: default !important;
 }
 
-.search-bar-left-search-container {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  margin: 0 8px;
+.search-bar-back-btn {
+  display: none !important;
 }
 
-.search-bar-search-icon {
+.search-bar-search-icon, .search-bar-arrow-icon {
   display: block;
   color: rgba(0,0,0,0.54);
 }
 
+.search-bar-arrow-icon {
+  display: none !important;
+}
+
 .search-bar-input {
   display: flex !important;
   align-items: center !important;
-  transition: ease-in-out width 250ms;
   width: 100%
 }
 
@@ -42,4 +44,55 @@
   .search-bar-close-btn {
     display: inline-flex !important;
   }
+}
+
+@media screen and (min-width: map-get($breakpoints, lg)) {
+  .search-bar-paper-background {
+    &.search-bar-focus {
+      background-color: rgba(255, 255, 255, 1) !important;
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
+      border: 1px solid rgba(0,0,0,0.15);
+    }
+  }
+
+  .search-bar-input {
+    transition: ease-in-out width 250ms;
+  }
+}
+
+@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
+  .search-bar-paper-background {
+    background-color: rgba(255, 255, 255, 1) !important;
+    width: auto !important;
+
+    &.search-bar-mobile-open {
+      height: 100% !important;
+      width: 100% !important;
+    }
+  }
+
+  .search-bar-input {
+    width: 0 !important;
+  }
+
+  .search-bar-mobile-open {
+    .search-bar-input {
+      width: 100% !important;
+    }
+
+    .search-bar-search-btn {
+      display: none !important;
+    }
+
+    .search-bar-back-btn {
+      display: inline-flex !important;
+      width: 56px !important;
+      height: 56px !important;
+    }
+
+    .search-bar-close-btn {
+      width: 56px !important;
+      height: 56px !important;
+    }
+  }
 }
\ No newline at end of file