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 ...@@ -38,6 +38,7 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
} }
return ( return (
<div className={classNames(['card-container-offset', (isSidebarOpen && 'card-container-offset-open'), (!isSidebarOpen && 'card-container-offset-closed')])}>
<Paper <Paper
className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}> className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}>
<div className={'sidebar-row1'}> <div className={'sidebar-row1'}>
...@@ -54,8 +55,6 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f ...@@ -54,8 +55,6 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
<TextwTitle label="Phone Number" content="The Johnson Center"/> <TextwTitle label="Phone Number" content="The Johnson Center"/>
<TextwTitle label="Tags" content={<FacilityTags facility={facility} />}/> <TextwTitle label="Tags" content={<FacilityTags facility={facility} />}/>
<TextwTitle label="Hours" content={<WeekHours facility={facility} />}/> <TextwTitle label="Hours" content={<WeekHours facility={facility} />}/>
</div> </div>
</div> </div>
<div className={'sidebar-row2'}> <div className={'sidebar-row2'}>
...@@ -64,7 +63,8 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f ...@@ -64,7 +63,8 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
{/* <Button className={'sidebar-toggle-map-btn'} {/* <Button className={'sidebar-toggle-map-btn'}
onClick={handleSidebarMapToggle}>{isSidebarMapOpen ? 'Close Map' : 'Open Map'}</Button> */} onClick={handleSidebarMapToggle}>{isSidebarMapOpen ? 'Close Map' : 'Open Map'}</Button> */}
</div> </div>
</Paper> </Paper>
</div>
) )
}; };
......
...@@ -14,20 +14,36 @@ ...@@ -14,20 +14,36 @@
} }
.sidebar-open { .sidebar-open {
flex: 1 0 400px; // flex: 1 0 400px;
transform: translateX(0px);
} }
.sidebar-closed { .sidebar-closed {
flex: 1 0 0; // flex: 1 0 0;
transform: translateX(400px);
} }
.sidebar-root { .sidebar-root {
overflow: hidden; overflow: hidden;
display: block; display: block;
box-sizing: border-box; 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 { .sidebar-divider {
......
...@@ -295,17 +295,17 @@ const getHoursByDay = (facility, dayOfWeek) => { ...@@ -295,17 +295,17 @@ const getHoursByDay = (facility, dayOfWeek) => {
allDayOrClosed:false allDayOrClosed:false
}) })
} }
hours = [{ // hours = [{
text: "11am - 2pm", // text: "11am - 2pm",
start:"11:00:00", // start:"11:00:00",
end:"14:00:00", // end:"14:00:00",
allDayOrClosed:false // allDayOrClosed:false
},{ // },{
text: "4pm - 5pm", // text: "4pm - 5pm",
start:"16:00:00", // start:"16:00:00",
end:"17:00:00", // end:"17:00:00",
allDayOrClosed:false // allDayOrClosed:false
}]; // }];
return hours.sort((a,b) => { return hours.sort((a,b) => {
return parseInt(a.start) - parseInt(b.start) 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