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
01537337
Commit
01537337
authored
Dec 23, 2017
by
Mattias J Duffy
Browse files
adding a snappy sidebar open animation
parent
94dc7a13
Pipeline
#1877
passed with stage
in 1 minute and 44 seconds
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/components/Sidebar.js
View file @
01537337
...
...
@@ -38,6 +38,7 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
}
return
(
<
div
className
=
{
classNames
([
'
card-container-offset
'
,
(
isSidebarOpen
&&
'
card-container-offset-open
'
),
(
!
isSidebarOpen
&&
'
card-container-offset-closed
'
)])}
>
<
Paper
className
=
{
classNames
([
'
sidebar-root
'
,
(
isSidebarOpen
&&
'
sidebar-open
'
),
(
!
isSidebarOpen
&&
'
sidebar-closed
'
)])}
>
<
div
className
=
{
'
sidebar-row1
'
}
>
...
...
@@ -54,8 +55,6 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
<
TextwTitle
label
=
"
Phone Number
"
content
=
"
The Johnson Center
"
/>
<
TextwTitle
label
=
"
Tags
"
content
=
{
<
FacilityTags
facility
=
{
facility
}
/>}/
>
<
TextwTitle
label
=
"
Hours
"
content
=
{
<
WeekHours
facility
=
{
facility
}
/>}/
>
<
/div
>
<
/div
>
<
div
className
=
{
'
sidebar-row2
'
}
>
...
...
@@ -64,7 +63,8 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
{
/* <Button className={'sidebar-toggle-map-btn'}
onClick={handleSidebarMapToggle}>{isSidebarMapOpen ? 'Close Map' : 'Open Map'}</Button> */
}
<
/div
>
<
/Paper
>
<
/Paper>
<
/div
>
)
};
...
...
src/styles/components/sidebar.scss
View file @
01537337
...
...
@@ -14,20 +14,36 @@
}
.sidebar-open
{
flex
:
1
0
400px
;
// flex: 1 0 400px;
transform
:
translateX
(
0px
);
}
.sidebar-closed
{
flex
:
1
0
0
;
// flex: 1 0 0;
transform
:
translateX
(
400px
);
}
.sidebar-root
{
overflow
:
hidden
;
display
:
block
;
box-sizing
:
border-box
;
position
:
relative
;
position
:
absolute
;
right
:
0
;
height
:calc
(
100
%
-
64px
)
;
width
:
400px
;
@include
transition
(
300ms
cubic-bezier
(
0
.820
,
0
.165
,
0
.340
,
0
.930
));
}
.card-container-offset-open
{
flex
:
1
0
400px
;
@include
transition
(
150ms
ease-in-out
);
}
.card-container-offset-closed
{
flex
:
1
0
0px
;
}
.card-container-offset
{
// flex: 1 0 400px;
}
.sidebar-divider
{
...
...
src/utils/facilityUtils.js
View file @
01537337
...
...
@@ -295,17 +295,17 @@ const getHoursByDay = (facility, dayOfWeek) => {
allDayOrClosed
:
false
})
}
hours
=
[{
text
:
"
11am - 2pm
"
,
start
:
"
11:00:00
"
,
end
:
"
14:00:00
"
,
allDayOrClosed
:
false
},{
text
:
"
4pm - 5pm
"
,
start
:
"
16:00:00
"
,
end
:
"
17:00:00
"
,
allDayOrClosed
:
false
}];
//
hours = [{
//
text: "11am - 2pm",
//
start:"11:00:00",
//
end:"14:00:00",
//
allDayOrClosed:false
//
},{
//
text: "4pm - 5pm",
//
start:"16:00:00",
//
end:"17:00:00",
//
allDayOrClosed:false
//
}];
return
hours
.
sort
((
a
,
b
)
=>
{
return
parseInt
(
a
.
start
)
-
parseInt
(
b
.
start
)
})
...
...
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