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
e7a15d27
Commit
e7a15d27
authored
Nov 29, 2017
by
Andrew Hrdy
Browse files
Started work on changing mobile expanded info to a dialog.
parent
d8683850
Pipeline
#1796
passed with stage
in 1 minute and 45 seconds
Changes
5
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/components/FacilityDialog.js
0 → 100644
View file @
e7a15d27
import
React
from
'
react
'
;
import
Dialog
,
{
DialogTitle
,
DialogContent
}
from
'
material-ui/Dialog
'
;
import
Grid
from
'
material-ui/Grid
'
;
import
FacilityTags
from
'
./FacilityTags
'
;
import
WeekHours
from
'
./WeekHours
'
;
import
Button
from
'
material-ui/Button
'
;
import
Avatar
from
'
material-ui/Avatar
'
;
import
Typography
from
'
material-ui/Typography
'
;
import
MapDialog
from
'
./MapDialog
'
;
import
TextwTitle
from
'
./TextwTitle
'
;
import
{
getMaxBounds
}
from
'
../utils/mapboxUtils
'
;
import
{
removeBrackets
}
from
'
../utils/nameUtils
'
;
class
FacilityDialog
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
);
this
.
state
=
{
isMapOpen
:
false
,
maxBounds
:
getMaxBounds
()
}
}
toggleMap
=
e
=>
{
e
.
stopPropagation
();
this
.
setState
({
isMapOpen
:
!
this
.
state
.
isMapOpen
});
};
render
()
{
const
{
facility
,
facilities
,
isOpen
,
onRequestClose
}
=
this
.
props
;
const
{
isMapOpen
,
maxBounds
}
=
this
.
state
;
let
mapCenter
,
mapZoom
;
try
{
mapCenter
=
facility
.
facility_location
.
coordinate_location
.
coordinates
;
mapZoom
=
[
17
];
}
catch
(
e
)
{
mapCenter
=
[(
maxBounds
[
0
][
0
]
+
maxBounds
[
1
][
0
])
/
2
,
(
maxBounds
[
0
][
1
]
+
maxBounds
[
1
][
1
])
/
2
];
mapZoom
=
[
13
];
}
return
(
<
Dialog
classes
=
{{
root
:
'
fd-dialog-root
'
,
paper
:
'
fd-dialog-paper
'
}}
open
=
{
isOpen
}
onRequestClose
=
{
onRequestClose
}
>
<
Grid
container
className
=
{
'
fd-container
'
}
>
<
Grid
item
>
<
Grid
container
className
=
{
'
fd-header
'
}
>
<
Grid
item
>
<
Avatar
src
=
{
require
(
'
../images/chipotleLogo.png
'
)}
/
>
<
/Grid
>
<
Grid
item
>
<
Typography
type
=
{
'
headline
'
}
>
{
removeBrackets
(
facility
.
facility_name
)}
<
/Typography
>
<
/Grid
>
<
/Grid
>
<
/Grid
>
<
Grid
item
>
<
TextwTitle
label
=
"
Building
"
content
=
{
facility
.
facility_location
.
building
}
/
>
<
/Grid
>
<
Grid
item
className
=
{
'
fd-facility-tags
'
}
>
<
FacilityTags
facility
=
{
facility
}
/
>
<
/Grid
>
<
Grid
item
className
=
{
'
fd-week-hours
'
}
>
<
WeekHours
facility
=
{
facility
}
/
>
<
/Grid
>
<
Grid
item
className
=
{
'
fd-toggle-map-btn-container
'
}
>
<
Button
className
=
{
'
fd-toggle-map-btn
'
}
onClick
=
{
this
.
toggleMap
}
>
Open
Map
<
/Button
>
<
/Grid
>
<
/Grid
>
<
MapDialog
open
=
{
isMapOpen
}
facilities
=
{
facilities
}
facility
=
{
facility
}
maxBounds
=
{
maxBounds
}
zoom
=
{
mapZoom
}
center
=
{
mapCenter
}
onRequestClose
=
{
this
.
toggleMap
}
/
>
<
/Dialog
>
)
}
}
export
default
FacilityDialog
;
\ No newline at end of file
src/containers/FacilityCard.js
View file @
e7a15d27
import
React
from
'
react
'
import
{
withStyles
}
from
'
material-ui/styles
'
;
import
Card
,
{
CardActions
,
CardContent
,
CardMedia
}
from
'
material-ui/Card
'
;
import
Card
,
{
CardContent
,
CardMedia
}
from
'
material-ui/Card
'
;
import
Typography
from
'
material-ui/Typography
'
;
import
Grid
from
'
material-ui/Grid
'
;
import
FacilityStatus
from
'
../components/FacilityStatus
'
;
import
FavoriteButton
from
'
../components/FavoriteButton
'
;
import
FacilityCategory
from
'
../components/FacilityCategory
'
;
import
{
compose
}
from
'
redux
'
;
import
{
connect
}
from
'
react-redux
'
;
import
{
addFavoriteFacility
,
removeFavoriteFacility
,
setSelectedFacility
}
from
'
../actions/ui
'
;
import
DirectionsWalkIcon
from
'
material-ui-icons/DirectionsWalk
'
;
import
LocationOnIcon
from
'
material-ui-icons/LocationOn
'
;
import
{
removeBrackets
}
from
'
../utils/nameUtils
'
;
import
classnames
from
'
classnames
'
;
import
MapDialog
from
'
../components/MapDialog
'
;
import
Button
from
'
material-ui/Button
'
;
import
{
getMaxBounds
}
from
'
../utils/mapboxUtils
'
;
import
WeekHours
from
'
../components/WeekHours
'
;
import
FacilityTags
from
'
../components/FacilityTags
'
;
import
{
amber
,
blue
,
blueGrey
,
brown
,
cyan
,
deepOrange
,
deepPurple
,
green
,
grey
,
indigo
,
lightBlue
,
lightGreen
,
lime
,
orange
,
pink
,
purple
,
red
,
teal
,
yellow
}
from
'
material-ui/colors
'
;
const
materialColors
=
[
red
,
pink
,
purple
,
deepPurple
,
indigo
,
blue
,
lightBlue
,
cyan
,
teal
,
green
,
lightGreen
,
lime
,
yellow
,
amber
,
orange
,
deepOrange
,
brown
,
grey
,
blueGrey
];
import
FacilityDialog
from
'
../components/FacilityDialog
'
;
class
FacilityCard
extends
React
.
Component
{
...
...
@@ -50,8 +18,6 @@ class FacilityCard extends React.Component {
super
(
props
);
this
.
state
=
{
isHovered
:
false
,
isMapOpen
:
false
,
maxBounds
:
getMaxBounds
()
};
}
...
...
@@ -60,75 +26,6 @@ class FacilityCard extends React.Component {
this
.
props
.
setSelectedFacility
(
isSelected
?
null
:
this
.
props
.
facility
);
};
toggleMap
=
e
=>
{
e
.
stopPropagation
();
this
.
setState
({
isMapOpen
:
!
this
.
state
.
isMapOpen
});
};
/**
* Gets the the initials for a facility name. The initials will be the first character of the first and last word
* of the facility. Initial lengths range from 1-2.
*
* @param name The facility name to find the initials for.
* @returns {string} The initials.
* @deprecated
*/
getInitials
=
name
=>
{
//TODO: May want to allow initials to be more than 2 characters or use a different strategy to decide which characters to use.
let
words
=
removeBrackets
(
name
).
split
(
/
[
-
]
+/
);
//TODO: Add case change to the regex (ex. IndAroma should be IA, not I).
/*
TODO: Probably want this to be a regex test and remove any useless word / symbol (ex. the, and, &, etc.)
Words that are empty or start with ( must be removed.
Example: 'Recreation and Athletic Complex (RAC)' will result in the initials 'R(' without the filter.
*/
words
=
words
.
filter
(
word
=>
word
&&
!
word
.
startsWith
(
"
(
"
));
if
(
words
.
length
===
0
)
{
return
""
;
}
if
(
words
.
length
===
1
)
{
return
words
[
0
].
substring
(
0
,
1
).
toUpperCase
();
}
return
words
[
0
].
substring
(
0
,
1
).
toUpperCase
()
+
words
[
words
.
length
-
1
].
substring
(
0
,
1
).
toUpperCase
();
};
/**
* Gets a material color based off the facility's slug.
*
* @param slug The slug of the facility to generate the material color from.
* @return {string} The color code (in hex format) of a material color.
* @deprecated
*/
materialColorFromSlug
=
slug
=>
{
/*
Generates the hash code...
https://stackoverflow.com/questions/194846/is-there-any-kind-of-hash-code-function-in-javascript
*/
let
hash
=
0
;
for
(
let
i
=
0
;
i
<
slug
.
length
;
i
++
)
{
let
c
=
slug
.
charCodeAt
(
i
);
hash
=
((
hash
<<
5
)
-
hash
)
+
c
;
hash
=
hash
&
hash
;
}
/*
materialColors is an array of all the different color palettes which contain hues for
multiples of 100.
materialColors[Math.abs(hash) % 19] will result in a color palette.
[((Math.abs(hash) % 7) + 3) * 100] will result in a hue on the palette.
Only hues 300-900 are selected because 50, 100, and 200 are usually very light and sometimes hard to read.
List of palettes:
https://material-ui-1dab0.firebaseapp.com/style/color/
*/
return
materialColors
[
Math
.
abs
(
hash
)
%
19
][((
Math
.
abs
(
hash
)
%
7
)
+
3
)
*
100
];
};
handleMouseEnter
=
()
=>
{
this
.
setState
({
...
...
@@ -144,19 +41,9 @@ class FacilityCard extends React.Component {
render
()
{
const
{
facility
,
facilities
,
favorites
,
selectedFacility
,
addFavoriteFacility
,
removeFavoriteFacility
}
=
this
.
props
;
const
{
isMapOpen
,
maxBounds
}
=
this
.
state
;
const
isSelected
=
selectedFacility
.
slug
===
facility
.
slug
;
let
mapCenter
,
mapZoom
;
try
{
mapCenter
=
facility
.
facility_location
.
coordinate_location
.
coordinates
;
mapZoom
=
[
17
];
}
catch
(
e
)
{
mapCenter
=
[(
maxBounds
[
0
][
0
]
+
maxBounds
[
1
][
0
])
/
2
,(
maxBounds
[
0
][
1
]
+
maxBounds
[
1
][
1
])
/
2
];
mapZoom
=
[
13
];
}
return
(
<
Card
onClick
=
{
this
.
handleCardClick
}
className
=
{
classnames
(
'
fc-root
'
,
isSelected
&&
'
fc-selected
'
)}
onMouseEnter
=
{
this
.
handleMouseEnter
}
onMouseLeave
=
{
this
.
handleMouseLeave
}
raised
>
...
...
@@ -198,29 +85,9 @@ class FacilityCard extends React.Component {
<
/Typography
>
<
/Grid
>
<
/Grid
>
<
Grid
item
className
=
{
'
fc-facility-tags
'
}
>
<
FacilityTags
facility
=
{
facility
}
/
>
<
/Grid
>
<
Grid
item
className
=
{
'
fc-week-hours
'
}
>
<
WeekHours
facility
=
{
facility
}
/
>
<
/Grid
>
<
Grid
item
className
=
{
'
fc-toggle-map-btn-container
'
}
>
<
Button
className
=
{
'
fc-toggle-map-btn
'
}
onClick
=
{
this
.
toggleMap
}
>
Open
Map
<
/Button
>
<
/Grid
>
<
/CardContent
>
<
MapDialog
open
=
{
isMapOpen
}
facilities
=
{
facilities
}
facility
=
{
facility
}
maxBounds
=
{
maxBounds
}
zoom
=
{
mapZoom
}
center
=
{
mapCenter
}
onRequestClose
=
{
this
.
toggleMap
}
/
>
<
FacilityDialog
facility
=
{
facility
}
facilities
=
{
facilities
}
isOpen
=
{
isSelected
}
onRequestClose
=
{
this
.
handleCardClick
}
/
>
<
/Card
>
)
}
...
...
src/styles/components/facilityDialog.scss
0 → 100644
View file @
e7a15d27
@import
'../variables'
;
.fd-dialog-paper
{
width
:
100%
;
}
.fd-container
{
margin
:
0
!
important
;
width
:
100%
!
important
;
}
.fd-header
{
display
:
flex
;
align-items
:
center
;
width
:
100%
;
}
.fd-facility-tags
{
width
:
100%
;
}
.fd-week-hours
{
width
:
100%
;
}
.fd-toggle-map-btn-container
{
padding
:
0
!
important
;
width
:
100%
;
}
.fd-toggle-map-btn
{
width
:
100%
;
}
@media
screen
and
(
min-width
:
map-get
(
$breakpoints
,
lg
))
{
.fd-dialog-root
{
display
:
none
!
important
;
}
}
//Under lg
@media
screen
and
(
max-width
:
map-get
(
$breakpoints
,
lg
)
-
1px
)
{
}
\ No newline at end of file
src/styles/containers/facilityCard.scss
View file @
e7a15d27
...
...
@@ -67,18 +67,6 @@
overflow
:
hidden
;
}
.fc-toggle-map-btn-container
{
display
:
none
!
important
;
}
.fc-week-hours
{
display
:
none
!
important
;
}
.fc-facility-tags
{
display
:
none
!
important
;
}
@supports
(
-webkit-line-clamp
:
2
)
{
.fc-two-line-ellipsis
{
overflow
:
hidden
;
...
...
@@ -148,42 +136,6 @@
//Under lg
@media
screen
and
(
max-width
:
map-get
(
$breakpoints
,
lg
)
-
1px
)
{
.fc-root
{
&
.fc-selected
{
.fc-one-line-ellipsis
{
white-space
:
normal
;
overflow
:
inherit
;
}
.fc-toggle-map-btn-container
{
display
:
block
!
important
;
}
.fc-week-hours
{
display
:
block
!
important
;
}
.fc-facility-tags
{
display
:
block
!
important
;
}
.fc-toggle-map-btn
{
width
:
100%
!
important
;
}
.fc-extra-info
{
max-width
:
100%
;
width
:
100%
;
justify-content
:
center
;
padding
:
4px
8px
!
important
;
}
.fc-card-content
{
padding-bottom
:
0
!
important
;
}
}
}
.fc-small-grid-item-spacing
{
padding
:
0
8px
!
important
;
}
...
...
src/styles/whatsOpen.scss
View file @
e7a15d27
...
...
@@ -5,6 +5,7 @@
@import
'./components/appBar'
;
@import
'./components/cardContainer'
;
@import
'./components/facilityCategory'
;
@import
'./components/facilityDialog'
;
@import
'./components/facilityStatus'
;
@import
'./components/facilityTags'
;
@import
'./components/favoriteButton'
;
...
...
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