Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Enes Tasbasi
whats-open-web
Commits
46604bd5
Commit
46604bd5
authored
Jan 28, 2020
by
Andrew Hrdy
Browse files
Changes to app bar
parent
94a3133b
Changes
8
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.sv
g
'
)
}
className
=
{
'
app-bar-logo
'
}
/>
<
img
src
=
{
'
favicon.pn
g
'
}
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
Mobile
AppBar
from
'
../components/
Mobile
App
b
ar
'
;
import
AppBar
from
'
../components/App
B
ar
'
;
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
'
}
>
<
Mobile
AppBar
/>
<
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
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment