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
SRCT
whats-open-web
Commits
af713e04
Commit
af713e04
authored
Nov 11, 2017
by
Andrew Hrdy
Browse files
Finished making all components sassy.
parent
3846eee2
Changes
13
Hide whitespace changes
Inline
Side-by-side
src/components/TextwTitle.js
View file @
af713e04
import
React
from
'
react
'
import
{
withStyles
}
from
'
material-ui/styles
'
;
const
TextwTitle
=
({
classes
,
label
,
content
})
=>
{
const
TextwTitle
=
({
label
,
content
})
=>
{
return
(
<
div
>
<
div
className
=
{
classes
.
label
}
>
<
div
className
=
{
'
text-w-title-
label
'
}
>
{
label
}
<
/div
>
<
div
className
=
{
classes
.
content
}
>
<
div
className
=
{
'
text-w-title-
content
'
}
>
{
content
}
<
/div
>
<
/div>
)
}
const
styleSheet
=
{
label
:{
fontWeight
:
400
,
fontSize
:
"
12px
"
,
color
:
"
rgba(0,0,0,.54)
"
,
},
content
:{
fontWeight
:
400
,
fontSize
:
"
14px
"
,
textOverflow
:
'
ellipsis
'
,
width
:
176
,
whiteSpace
:
'
nowrap
'
,
overflow
:
'
hidden
'
,
};
}
}
export
default
withStyles
(
styleSheet
)(
TextwTitle
)
\ No newline at end of file
export
default
TextwTitle
;
\ No newline at end of file
src/containers/Layout.js
View file @
af713e04
import
React
from
'
react
'
;
import
{
withStyles
}
from
'
material-ui/styles
'
;
import
{
compose
}
from
'
redux
'
;
import
{
connect
}
from
'
react-redux
'
;
import
{
toggleSidebar
,
toggleSidebarMap
,
setAllFavorites
}
from
'
../actions/ui
'
;
import
{
setAllFavorites
,
toggleSidebar
,
toggleSidebarMap
}
from
'
../actions/ui
'
;
import
AppBar
from
'
../components/AppBar
'
;
import
Sidebar
from
'
../components/Sidebar
'
;
import
{
getFacilities
,
setFacilities
}
from
'
../actions/api
'
;
import
Button
from
'
material-ui/Button
'
;
import
{
getFacilities
,
setFacilities
}
from
'
../actions/api
'
;
import
CardContainer
from
'
../components/CardContainer
'
;
import
SearchBar
from
'
./SearchBar
'
;
import
Icon
from
'
material-ui/Icon
'
;
import
KeyboardArrowLeft
from
'
material-ui-icons/KeyboardArrowLeft
'
;
import
KeyboardArrowRight
from
'
material-ui-icons/KeyboardArrowRight
'
;
class
Layout
extends
React
.
Component
{
constructor
(
props
){
constructor
(
props
)
{
super
(
props
);
}
componentWillMount
()
{
/*
This is done in order to immediately load the page (retrieving from local storage is faster
than an API call). After retrieving from local storage, then call the API to see if there
are any updates.
*/
if
(
localStorage
.
getItem
(
'
facilities
'
)){
if
(
localStorage
.
getItem
(
'
facilities
'
))
{
const
facilities
=
localStorage
.
getItem
(
'
facilities
'
);
this
.
props
.
setFacilities
(
facilities
)
}
if
(
localStorage
.
getItem
(
'
favorites
'
)){
if
(
localStorage
.
getItem
(
'
favorites
'
))
{
const
favorites
=
JSON
.
parse
(
localStorage
.
getItem
(
'
favorites
'
));
this
.
props
.
setAllFavorites
(
favorites
);
}
...
...
@@ -39,98 +34,53 @@ class Layout extends React.Component {
};
render
()
{
const
{
classes
,
isSidebarOpen
,
isSidebarMapOpen
,
toggleSidebar
,
toggleSidebarMap
,
getFacilities
,
sidebarFacility
}
=
this
.
props
;
const
{
isSidebarOpen
,
isSidebarMapOpen
,
toggleSidebar
,
toggleSidebarMap
,
getFacilities
,
sidebarFacility
}
=
this
.
props
;
return
(
<
div
className
=
{
classes
.
root
}
>
<
AppBar
isOpen
=
{
false
}
handleMenuClick
=
{
()
=>
{}
}
/
>
<
div
className
=
{
classes
.
container
}
>
<
div
className
=
{
classes
.
mainContent
}
>
<
SearchBar
styles
=
{
styleSheet
.
searchBar
}
suggestions
=
{{}}
/
>
<
div
className
=
{
classes
.
cardContainer
}
>
<
CardContainer
styles
=
{
styleSheet
.
cardContainer
}
searchTerm
=
{
this
.
props
.
searchTerm
}
facilities
=
{
this
.
props
.
facilities
}
/
>
<
div
className
=
{
'
layout-root
'
}
>
<
AppBar
isOpen
=
{
false
}
handleMenuClick
=
{()
=>
{
}}
/
>
<
div
className
=
{
'
layout-container
'
}
>
<
div
className
=
{
'
layout-main-content
'
}
>
<
SearchBar
suggestions
=
{{}}
/
>
<
div
className
=
{
'
layout-card-container
'
}
>
<
CardContainer
styles
=
{
'
layout-card-container
'
}
searchTerm
=
{
this
.
props
.
searchTerm
}
facilities
=
{
this
.
props
.
facilities
}
/
>
<
/div
>
<
/div>
<
div
className
=
{
c
la
sses
.
sidebar
T
oggle
C
ontainer
}
>
<
button
onClick
=
{
toggleSidebar
}
className
=
{
c
la
sses
.
openCloseButton
}
>
<
/div
>
<
div
className
=
{
'
la
yout-
sidebar
-t
oggle
-c
ontainer
'
}
>
<
button
onClick
=
{
toggleSidebar
}
className
=
{
'
la
yout-sidebar-toggle-btn
'
}
>
{
isSidebarOpen
&&
<
KeyboardArrowLeft
className
=
{
c
la
sses
.
arrow
I
con
}
/
>
<
KeyboardArrowLeft
className
=
{
'
la
yout-
arrow
-i
con
'
}
/
>
}
{
!
isSidebarOpen
&&
<
KeyboardArrowRight
className
=
{
c
la
sses
.
arrow
I
con
}
/
>
<
KeyboardArrowRight
className
=
{
'
la
yout-
arrow
-i
con
'
}
/
>
}
<
/button
>
<
/div
>
<
Sidebar
facilities
=
{
this
.
props
.
facilities
}
facility
=
{
sidebarFacility
}
isSidebarOpen
=
{
isSidebarOpen
}
isSidebarMapOpen
=
{
isSidebarMapOpen
}
toggleSidebarMap
=
{
toggleSidebarMap
}
/
>
<
/div>
<
Sidebar
facilities
=
{
this
.
props
.
facilities
}
facility
=
{
sidebarFacility
}
isSidebarOpen
=
{
isSidebarOpen
}
isSidebarMapOpen
=
{
isSidebarMapOpen
}
toggleSidebarMap
=
{
toggleSidebarMap
}
/
>
<
/div
>
<
/div
>
)
}
}
const
styleSheet
=
{
root
:{
paddingTop
:
64
,
boxSizing
:
'
border-box
'
,
height
:
'
100%
'
,
},
container
:{
width
:
'
100%
'
,
height
:
'
100%
'
,
display
:
'
flex
'
},
mainContent
:{
boxSizing
:
'
border-box
'
,
position
:
'
relative
'
,
flex
:
'
1 1 100%
'
,
height
:
'
100%
'
,
width
:
'
100%
'
,
paddingTop
:
16
,
},
sidebarToggleContainer
:{
width
:
16
,
position
:
'
relative
'
,
},
openCloseButton
:{
width
:
24
,
height
:
48
,
position
:
'
absolute
'
,
top
:
16
,
right
:
-
1
,
border
:
0
,
backgroundColor
:
'
white
'
,
boxShadow
:
'
0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)
'
,
outline
:
'
none
'
,
borderRadius
:
1
,
},
arrowIcon
:{
position
:
'
absolute
'
,
top
:
12
,
right
:
0
,
width
:
24
,
height
:
24
,
},
cardContainer
:{
height
:
'
calc(100% - 86px)
'
,
overflowY
:
'
auto
'
,
overflowX
:
'
hidden
'
,
},
'
@media screen and (max-width: 600px)
'
:
{
sidebarToggleContainer
:
{
display
:
'
none
'
}
}
};
function
mapStateToProps
(
state
)
{
return
{
facilities
:
state
.
facilities
.
data
,
favorites
:
state
.
ui
.
favorites
,
searchTerm
:
state
.
ui
.
search
.
term
,
favorites
:
state
.
ui
.
favorites
,
searchTerm
:
state
.
ui
.
search
.
term
,
isLoading
:
state
.
facilities
.
isLoading
,
sidebarFacility
:
state
.
ui
.
sidebar
.
facility
,
sidebarFacility
:
state
.
ui
.
sidebar
.
facility
,
isSidebarOpen
:
state
.
ui
.
sidebar
.
isOpen
,
isSidebarMapOpen
:
state
.
ui
.
sidebar
.
isMapOpen
,
}
}
export
default
compose
(
connect
(
mapStateToProps
,{
toggleSidebar
,
toggleSidebarMap
,
getFacilities
,
setFacilities
,
setAllFavorites
}),
withStyles
(
styleSheet
))(
Layout
);
export
default
connect
(
mapStateToProps
,
{
toggleSidebar
,
toggleSidebarMap
,
getFacilities
,
setFacilities
,
setAllFavorites
})(
Layout
);
src/index.js
View file @
af713e04
...
...
@@ -2,7 +2,6 @@ import React from 'react';
import
ReactDOM
from
'
react-dom
'
;
import
{
applyMiddleware
,
compose
,
createStore
}
from
'
redux
'
;
import
'
./index.css
'
;
import
'
./styles/whatsOpen.css
'
import
Layout
from
'
./containers/Layout
'
;
import
registerServiceWorker
from
'
./registerServiceWorker
'
;
import
createHistory
from
'
history/createBrowserHistory
'
...
...
@@ -12,6 +11,7 @@ import ReduxThunk from 'redux-thunk';
import
reducers
from
'
./reducers/index
'
;
import
{
MuiThemeProvider
}
from
'
material-ui/styles
'
;
import
theme
from
'
./theme
'
;
import
'
./styles/whatsOpen.css
'
;
// Create a history of your choosing (we're using a browser history in this case)
const
history
=
createHistory
();
...
...
src/styles/components/appBar.scss
View file @
af713e04
.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
;
...
...
src/styles/components/cardContainer.scss
View file @
af713e04
...
...
@@ -3,4 +3,4 @@
width
:
100%
;
display
:
flex
;
flex-wrap
:
wrap
;
};
\ No newline at end of file
}
\ No newline at end of file
src/styles/components/facilityCategory.scss
View file @
af713e04
.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
}
\ No newline at end of file
src/styles/components/facilityStatus.scss
View file @
af713e04
.facility-status-text
{
display
:
flex
;
align-items
:
center
;
};
\ No newline at end of file
}
\ No newline at end of file
src/styles/components/favoriteButton.scss
View file @
af713e04
...
...
@@ -2,28 +2,28 @@
position
:
absolute
;
top
:
0
;
right
:
0
;
height
:
24px
;
width
:
24px
;
padding
:
5px
;
height
:
24px
!
important
;
width
:
24px
!
important
;
padding
:
5px
!
important
;
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
);
color
:
rgba
(
0
,
0
,
0
,
0
);
}
@media
screen
and
(
min-width
:
1024px
)
and
(
max-width
:
1679px
)
{
@media
screen
and
(
min-width
:
1024px
)
and
(
max-width
:
1679px
)
{
.favorite-button-heart
{
height
:
24
*
$favorite-button-md-scale
;
width
:
24
*
$favorite-button-md-scale
;
padding
:
5
*
$favorite-button-md-scale
;
height
:
24
px
*
$favorite-button-md-scale
!
important
;
width
:
24
px
*
$favorite-button-md-scale
!
important
;
padding
:
5
px
*
$favorite-button-md-scale
!
important
;
}
}
\ No newline at end of file
src/styles/components/sidebar.scss
View file @
af713e04
.sidebar-label-row
{
display
:flex
;
}
;
display
:
flex
;
}
.sidebar-label-holder
{
margin
:
16px
;
}
;
}
.sidebar-open
{
flex
:
1
0
400px
;
}
;
}
.sidebar-closed
{
flex
:
1
0
0
;
}
;
}
.sidebar-root
{
overflow
:
hidden
;
...
...
@@ -21,35 +21,34 @@
position
:
relative
;
@include
transition
(
150ms
ease-in-out
);
}
;
}
.sidebar-divider
{
margin
:
16px
;
}
;
}
.sidebar-row1
{
display
:
flex
;
padding
:
8px
;
};
}
.sidebar-avatar
{
width
:
100px
!
important
;
height
:
100px
!
important
;
}
;
}
.sidebar-title
{
height
:
100px
;
margin-left
:
8px
;
display
:
flex
;
align-items
:
center
;
}
;
}
.sidebar-row2
{
position
:
absolute
;
bottom
:
0
;
width
:
100%
;
}
;
}
.sidebar-toggle-map-btn
{
width
:
100%
;
...
...
@@ -58,5 +57,5 @@
@media
screen
and
(
max-width
:
600px
)
{
.sidebar-root
{
display
:
none
!
important
;
}
;
}
}
\ No newline at end of file
src/styles/components/textwTitle.scss
0 → 100644
View file @
af713e04
.text-w-title-label
{
font-weight
:
400
;
font-size
:
12px
;
color
:
rgba
(
0
,
0
,
0
,.
54
);
};
.text-w-title-content
{
font-weight
:
400
;
font-size
:
14px
;
text-overflow
:
ellipsis
;
width
:
176px
;
white-space
:
nowrap
;
overflow
:
hidden
;
}
\ No newline at end of file
src/styles/containers/facilityCard.scss
View file @
af713e04
...
...
@@ -4,6 +4,7 @@
max-height
:
2em
;
overflow
:
hidden
;
}
.fc-two-line-ellipsis-webkit
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
...
...
@@ -14,92 +15,106 @@
/* autoprefixer: on */
}
@media
screen
and
(
min-width
:
1024px
)
and
(
max-width
:
1679px
)
{
.fc-root
{
width
:
250px
*
$fc-mdScale
;
height
:
230px
;
border-radius
:
5px
!
important
;
position
:
relative
;
}
.fc-card-content
{
padding
:
8px
4px
0
4px
!
important
;
}
.fc-small-grid-container-spacing
{
margin
:
-2px
-8px
!
important
;
}
.fc-small-grid-item-spacing
{
padding
:
0
8px
!
important
;
}
.fc-media
{
flex
:
1
;
border-radius
:
5px
5px
0
0
;
height
:
115px
*
$fc-mdScale
;
}
.fc-logo-container
{
width
:
100px
*
$fc-mdScale
;
height
:
100px
*
$fc-mdScale
;
margin
:
auto
;
margin-top
:
-60px
*
$fc-mdScale
;
border-radius
:
50%
;
border
:
5px
solid
white
;
}
.fc-logo
{
width
:
100px
*
$fc-mdScale
;
height
:
100px
*
$fc-mdScale
;
margin
:
auto
;
border-radius
:
50%
;
box-shadow
:
0
5px
5px
-3px
rgba
(
0
,
0
,
0
,
0
.2
)
,
0px
8px
10px
1px
rgba
(
0
,
0
,
0
,
0
.14
)
,
0px
3px
14px
2px
rgba
(
0
,
0
,
0
,
0
.12
);
}
.fc-extra-info-wrapper
{
display
:
flex
;
align-items
:
center
;
max-width
:
50%
;
font-size
:
11px
;
}
@media
screen
and
(
min-width
:
1024px
)
and
(
max-width
:
1679px
)
{
.fc-root
{
width
:
250px
*
$fc-mdScale
;
height
:
230px
;
border-radius
:
5px
!
important
;
position
:
relative
;
}
.fc-card-content
{
padding
:
8px
4px
0
4px
!
important
;
}
.fc-small-grid-container-spacing
{
margin
:
-2px
-8px
!
important
;
}
.fc-small-grid-item-spacing
{
padding
:
0
8px
!
important
;
}
.fc-media
{
flex
:
1
;
border-radius
:
5px
5px
0
0
;
height
:
115px
*
$fc-mdScale
;
}
.fc-logo-container
{
width
:
100px
*
$fc-mdScale
;
height
:
100px
*
$fc-mdScale
;
margin
:
auto
;
margin-top
:
-60px
*
$fc-mdScale
;
border-radius
:
50%
;
border
:
5px
solid
white
;
}
.fc-logo
{
width
:
100px
*
$fc-mdScale
;
height
:
100px
*
$fc-mdScale
;
margin
:
auto
;
border-radius
:
50%
;
box-shadow
:
0
5px
5px
-3px
rgba
(
0
,
0
,
0
,
0
.2
)
,
0px
8px
10px
1px
rgba
(
0
,
0
,
0
,
0
.14
)
,
0px
3px
14px
2px
rgba
(
0
,
0
,
0
,
0
.12
);
}
.fc-extra-info-wrapper
{
display
:
flex
;
align-items
:
center
;
max-width
:
50%
;
font-size
:
11px
;
}
.fc-card-map-marker-icon
{
height
:
20px
!
important
;
width
:
20px
!
important
;
}
.fc-card-map-marker-icon
{
height
:
20px
!
important
;
width
:
20px
!
important
;
}
}
@media
screen
and
(
min-width
:
1680px
)
{
.fc-root
{
width
:
250px
;
border-radius
:
5px
;
position
:
relative
;
}
.fc-card-content
{
padding
:
8px
4px
0
4px
!
important
;
}
.fc-small-grid-container-spacing
{
margin
:
-2px
-8px
!
important
;
}
.fc-small-grid-item-spacing
{
padding
:
3px
8px
!
important
;
}
.fc-media
{
flex
:
1
;
height
:
115px
;
}
.fc-logo-container
{
width
:
100px
;
height
:
100px
;
margin
:
auto
;
margin-top
:
-60px
;
border-radius
:
90px
;
border
:
5px
solid
white
;
}
.fc-logo
{
width
:
100px
;
height
:
100px
;
margin
:
auto
;
border-radius
:
50%
;
box-shadow
:
0px
5px
5px
-3px
rgba
(
0
,
0
,
0
,
0
.2
)
,
0px
8px
10px
1px
rgba
(
0
,
0
,
0
,
0
.14
)
,
0px
3px
14px
2px
rgba
(
0
,
0
,
0
,
0
.12
);
}
.fc-extra-info-wrapper
{
display
:
flex
;
align-items
:
center
;
max-width
:
50%
;
}
@media
screen
and
(
min-width
:
1680px
)
{
.fc-root
{
width
:
250px
;
border-radius
:
5px
;
position
:
relative
;
}
.fc-card-content
{
padding
:
8px
4px
0
4px
!
important
;
}
.fc-small-grid-container-spacing
{
margin
:
-2px
-8px
!
important
;
}