Commit 01537337 authored by Mattias J Duffy's avatar Mattias J Duffy
Browse files

adding a snappy sidebar open animation

parent 94dc7a13
Pipeline #1877 passed with stage
in 1 minute and 44 seconds
......@@ -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>
)
};
......
......@@ -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 {
......
......@@ -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)
})
......
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