summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlexandre Pretto Nunes <anunes@thoughtworks.com>2015-02-10 17:23:07 -0200
committerAlexandre Pretto Nunes <anunes@thoughtworks.com>2015-02-19 16:41:24 -0200
commit518856ed261ba3bdd1270dff45151db967c72434 (patch)
tree80a05a28ed92dfe2b8a79e506f46a068d8fe2f57
parenta22c4a5cb9248d550e2feb430b8f047a7e555a9a (diff)
#239 make sidenav always partially visible
-rw-r--r--web-ui/app/index.html16
-rw-r--r--web-ui/app/scss/styles.scss32
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;