Skip to content

GitLab

Commit 46604bd5 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Changes to app bar

parent 94a3133b
Hide whitespace changes
Inline Side-by-side
src/components/AppBar.tsx
View file @ 46604bd5
......@@ -8,41 +8,26 @@ import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
class CustomAppBar extends React.Component<{}, CustomAppBarState> {
class CustomAppBar extends React.Component<CustomAppBarProps, CustomAppBarState> {
constructor(props: {}) {
constructor(props: CustomAppBarProps) {
super(props);
this.state = {
isAppBarExpanded: false,
isSearchExpanded: false
};
this.toggleExpand = this.toggleExpand.bind(this);
}
/**
* Toggles whether the app bar is expanded. This is
* mobile only functionality.
*
* @memberof CustomAppBar
*/
toggleExpand() {
this.setState({
isAppBarExpanded: !this.state.isAppBarExpanded
});
}
render() {
const {isMobile} = this.props;
return (
<div>
<AppBar position="absolute"
className={classNames('app-bar', this.state.isSearchExpanded && 'app-bar-search-expanded')}>
className={classNames('app-bar', this.state.isSearchExpanded && 'app-bar-search-expanded', isMobile && 'app-bar-mobile')}>
<Toolbar className={'app-bar-tool-bar'}>
<div className={'app-bar-logo-name'}>
<img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
<img src={'favicon.png'} className={'app-bar-logo'}/>
<Typography variant="h6" className={classNames('app-bar-title', 'app-bar-text-color')}>
What's Open
</Typography>
......@@ -59,15 +44,9 @@ class CustomAppBar extends React.Component<{}, CustomAppBarState> {
onSearchCollapse={() => this.setState({
isSearchExpanded: false
})}/>
<IconButton onClick={this.toggleExpand} aria-label="Menu"
className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
<MenuIcon/>
</IconButton>
</div>
<div
className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
<div className={'app-bar-link-container'}>
<Button className={classNames('app-bar-link-button', 'app-bar-text-color')}
href={'https://srct.gmu.edu/'} target="_blank" rel="noopener">
About
......@@ -84,8 +63,11 @@ class CustomAppBar extends React.Component<{}, CustomAppBarState> {
}
}
export interface CustomAppBarProps {
isMobile?: boolean;
}
export interface CustomAppBarState {
isAppBarExpanded: boolean;
isSearchExpanded: boolean;
}
......
src/components/MobileAppBar.tsx deleted 100644 → 0
View file @ 94a3133b
import * as React from 'react';
import * as classNames from 'classnames';
import AlertContainer from '../containers/AlertContainer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
const MobileAppBar = () => {
return (
<div>
<AppBar position="absolute" className={classNames('mobile-app-bar')}>
<Toolbar>
<div className={'app-bar-logo-name'}>
<img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
<Typography variant="h6" className={classNames('app-bar-title', 'app-bar-text-color')}>
What's Open
</Typography>
</div>
<div className={'app-bar-right-section'}>
<div className={'app-bar-alert-container'}>
<AlertContainer />
</div>
</div>
</Toolbar>
</AppBar>
</div>
);
};
export default MobileAppBar;
\ No newline at end of file
src/containers/MobileLayout.tsx
View file @ 46604bd5
......@@ -5,7 +5,7 @@ import { fetchFacilities } from '../store/facility/facility.actions';
import { fetchAlerts } from '../store/alert/alert.actions';
import { useDispatch, useSelector } from 'react-redux';
import facilityUtils from '../utils/facilityUtils';
import MobileAppBar from '../components/MobileAppbar';
import AppBar from '../components/AppBar';
import CardContainer from '../components/CardContainer';
import FacilityDetail from './FacilityDetail';
import { Drawer } from '@material-ui/core';
......@@ -43,7 +43,7 @@ const MobileLayout = () => {
return (
<div className={'mobile-layout-root'}>
<MobileAppBar />
<AppBar isMobile={true} />
<CardContainer facilities={facilityUtils.filterFacilities(facilities, searchTerm.searchTerm, searchTerm.campusRegion)} showFavoriteIcons={false} />
......
src/containers/SearchBar.tsx
View file @ 46604bd5
......@@ -5,6 +5,7 @@ import { CampusRegion } from '../models/facility.model';
import { Dispatch } from 'redux';
import { setSearchTerm, setSelectedCampusRegion } from '../store/ui/ui.actions';
import { trackPiwikEvent } from '../piwik/piwik';
import { isMobile } from 'react-device-detect';
import SearchIcon from '@material-ui/icons/Search';
import CloseIcon from '@material-ui/icons/Close';
......@@ -102,7 +103,8 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
render() {
return (
<Paper className={classNames('search-bar-paper-background', this.state.isFocused && 'search-bar-focus',
this.state.value && 'search-bar-has-value', this.state.isMobileOpen && 'search-bar-mobile-open')}>
this.state.value && 'search-bar-has-value', this.state.isMobileOpen && 'search-bar-mobile-open',
isMobile && 'search-bar-mobile')}>
<IconButton onClick={this.handleMobileExpand} disableRipple={true} className={'search-bar-search-btn'}>
<SearchIcon className={'search-bar-search-icon'}/>
</IconButton>
......
src/styles/components/appBar.scss
View file @ 46604bd5
......@@ -28,21 +28,15 @@
align-items: center;
}
@media screen and (min-width: map-get($breakpoints, lg)) {
.app-bar:not(.app-bar-mobile) {
.app-bar-logo-name {
margin-right: auto !important;
}
.app-bar-menu-button {
display: none !important;
}
}
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.app-bar-link-button {
display: block !important;
padding: 0 !important;
text-align: left;
.app-bar-mobile {
.app-bar-link-container {
display: none !important;
}
.app-bar-hide {
......@@ -55,14 +49,16 @@
justify-content: space-between;
}
.app-bar-link-container {
display: block;
flex-basis: 100%;
transition: ease-in-out 2s;
}
&.app-bar-search-expanded {
.app-bar-tool-bar {
padding: 0 !important;
}
.app-bar-right-section {
width: 100%
}
.app-bar-search-expanded {
.app-bar-logo, .app-bar-title, .app-bar-alert-container, .app-bar-menu-button, .app-bar-link-container {
.app-bar-logo, .app-bar-title, .app-bar-alert-container, .app-bar-link-container {
display: none !important;
}
}
......
src/styles/components/mobileAppBar.scss deleted 100644 → 0
View file @ 94a3133b
.mobile-app-bar {
background-color: white !important;
@media (prefers-color-scheme: dark) {
background-color: #424242 !important;
}
}
\ No newline at end of file
src/styles/containers/searchBar.scss
View file @ 46604bd5
......@@ -5,7 +5,6 @@
width: 400px;
display: flex;
border-radius: 4px !important;
background-color: rgba(0, 0, 0, 0.04) !important;
box-shadow: none !important;
}
......@@ -49,14 +48,12 @@
justify-content: center;
}
@media screen and (min-width: map-get($breakpoints, lg)) {
.search-bar-paper-background {
&.search-bar-focus {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
border: 1px solid rgba(0, 0, 0, 0.15);
}
.search-bar-paper-background:not(.search-bar-mobile) {
&.search-bar-focus {
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;
}
......@@ -68,8 +65,8 @@
}
}
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.search-bar-paper-background {
.search-bar-mobile {
&.search-bar-paper-background {
width: auto !important;
&.search-bar-mobile-open {
......@@ -81,6 +78,7 @@
.hide-search-input {
display: none !important;
}
.search-bar-input {
width: 0 !important;
}
......@@ -93,7 +91,7 @@
display: none !important;
}
.search-bar-mobile-open {
&.search-bar-mobile-open {
&.search-bar-has-value {
.search-bar-close-btn {
display: inline-flex !important;
......
src/styles/whatsOpenMobile.scss
View file @ 46604bd5
@import "./containers/mobileLayout.scss";
@import "./containers/facilityDetail.scss";
@import './components/mobileAppBar.scss';
body {
overflow-y: auto;
......
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