diff options
| author | Alexandre Pretto Nunes <anunes@thoughtworks.com> | 2015-02-10 17:23:07 -0200 |
|---|---|---|
| committer | Alexandre Pretto Nunes <anunes@thoughtworks.com> | 2015-02-19 16:41:24 -0200 |
| commit | 518856ed261ba3bdd1270dff45151db967c72434 (patch) | |
| tree | 80a05a28ed92dfe2b8a79e506f46a068d8fe2f57 | |
| parent | a22c4a5cb9248d550e2feb430b8f047a7e555a9a (diff) | |
#239 make sidenav always partially visible
| -rw-r--r-- | web-ui/app/index.html | 16 | ||||
| -rw-r--r-- | web-ui/app/scss/styles.scss | 32 |
2 files changed, 31 insertions, 17 deletions
diff --git a/web-ui/app/index.html b/web-ui/app/index.html index 33b54b85..84d70a2a 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -17,13 +17,22 @@ <body> +<div class="off-canvas-wrap move-right menu" data-offcanvas> + <div class="inner-wrap"> + <section id="left-pane" class="left-off-canvas-menu"> + <nav id="tag-list"></nav> + <nav id="logout"></nav> +</section> +</div> +</div> + <div class="off-canvas-wrap" data-offcanvas> <header id="main" > <div id="user-alerts" class="message-panel"></div> <div id="loading" class="message-panel"><span>Loading...</span></div> </header> - <div class="inner-wrap"> + <div class="inner-wrap content"> <div id="menu" class="column collapsed-nav no-padding"> <a class="left-off-canvas-logo" href="#"> <img id="pixelated-logo" src="/assets/images/pixelated-logo_symbol_orange.png" alt="Pixelated"> @@ -43,11 +52,6 @@ <a class="exit-off-canvas"></a> </div> - <section id="left-pane" class="left-off-canvas-menu"> - <nav id="tag-list"></nav> - <nav id="logout"></nav> - </section> - <article id='middle-pane-container' class="small-5 medium-5 large-5 columns no-padding"> <section id="top-pane" class="small-12 large-12 no-padding"> <div id="compose-search-trigger"> diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index e5556f2f..c3da4604 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -572,15 +572,6 @@ button { bottom: 0; position: absolute; overflow-y: auto; - z-index: 1001; - transition: transform 500ms ease 0s; - -webkit-overflow-scrolling: touch; - -ms-transform: translate(-100%, 0); - -webkit-transform: translate3d(-100%, 0, 0); - -moz-transform: translate3d(-100%, 0, 0); - -ms-transform: translate3d(-100%, 0, 0); - -o-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); } .left-off-canvas-menu * { -webkit-backface-visibility: hidden; } @@ -610,13 +601,15 @@ display: table; } .inner-wrap:after { clear: both; } -.move-right > .inner-wrap { +.off-canvas-wrap.move-right > .inner-wrap.content { -ms-transform: translate(13.88889rem, 0); -webkit-transform: translate3d(13.88889rem, 0, 0); -moz-transform: translate3d(13.88889rem, 0, 0); -ms-transform: translate3d(13.88889rem, 0, 0); -o-transform: translate3d(13.88889rem, 0, 0); -transform: translate3d(13.88889rem, 0, 0); } + transform: translate3d(13.88889rem, 0, 0); +} + .move-right .exit-off-canvas { -webkit-backface-visibility: hidden; transition: background 300ms ease; @@ -634,6 +627,23 @@ transform: translate3d(13.88889rem, 0, 0); } .move-right .exit-off-canvas:hover { background: rgba(255, 255, 255, 0.05); } } +.off-canvas-wrap.move-right.menu { + position: absolute; +} + +.off-canvas-wrap.move-right.menu > .inner-wrap.content { + transform: translate3d(0, 0, 0); +} + +.off-canvas-wrap .inner-wrap.content { + -ms-transform: translate(75px, 0); + -webkit-transform: translate3d(75px, 0, 0); + -moz-transform: translate3d(75px, 0, 0); + -ms-transform: translate3d(75px, 0, 0); + -o-transform: translate3d(75px, 0, 0); + transform: translate3d(75px, 0, 0); +} + .offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu { -ms-transform: none; -webkit-transform: none; |