mobile menu now better

wagtail/wagtailadmin/static/wagtailadmin/css/core.less

@@ -135,18 +135,20 @@ img{
     }
 
     #nav-toggle{
-        margin-left:20px;
-        .box-shadow(0px 0px 10px 5px rgba(255, 255, 255, 0.5));
+        left:0%;
+        //margin-left:20px;
+        //.box-shadow(0px 0px 10px 5px rgba(255, 255, 255, 0.5));
         cursor:pointer;
-        position:fixed;
-        background: @color-grey-1;
+        position:absolute;
+        //background: @color-grey-1;
         width:40px;
-        opacity:0.8;
+        //opacity:0.8;
 
         &:before{
-            font-size:30px;
+            font-size:40px;
             color:white;
             line-height:40px;
+            content:"\2261";
         }
     }
 
@@ -326,12 +328,12 @@ img{
     position: relative;
     background-color:white;
     border-bottom:1px solid @color-grey-4;
-    transform: translate3d(0,0,0);
-    -webkit-transform: translate3d(0,0,0);
+   /* transform: translate3d(0,0,0);
+    -webkit-transform: translate3d(0,0,0);*/
 }
     .content{
         .row();
-        border-top:40px solid @color-grey-5; /* this top border provides space for the floating logo to toggle the menu */
+        border-top:0px solid @color-grey-5; /* this top border provides space for the floating logo to toggle the menu */
         padding-bottom:4em;
          position:relative; /* yuk. necessary for positions for jquery ui widgets */
     }
@@ -349,9 +351,12 @@ body.nav-open .content-wrapper{
 
 body.nav-open #nav-toggle{
     left:80%;
-    &:before{
-        content:"z";
-    }
+}
+body.nav-open footer{
+    bottom:1px;
+}
+body.nav-closed footer{
+    bottom:0;
 }
 
 body.explorer-open {
@@ -372,8 +377,10 @@ body.explorer-open {
 }
 
 header{
-    padding-top:1.5em;
+
+    padding-top:1em;
     padding-bottom:1em;
+    padding-left: 4em !important;
     background-color: @color-header-bg;
     margin-bottom:2em;
     color:white;
@@ -446,6 +453,7 @@ footer{
     .row();
     .border-radius(3px 3px 0 0);
     .box-shadow(0px 0px 2px rgba(255,255,255,0.5));
+    .transition(bottom 0.5s ease 1s);
     background: @color-grey-1;
     position:fixed;
     bottom:0;

wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less

@@ -226,7 +226,7 @@
             width:3.3em;
             background-color:@color-teal;
             padding:0;
-            margin:0 0 0 -50px;
+            margin:0 0 0 -20px;
             cursor:pointer;
 
             a{
@@ -300,5 +300,9 @@
             padding-left:0;
             padding-right:0;
         }
+
+        &.empty .add{
+            margin:0 0 0 -50px;
+        }
     }
 }

wagtail/wagtailadmin/static/wagtailadmin/js/core.js

@@ -14,6 +14,11 @@ $(function(){
     // Enable toggle to open/close nav
     $('#nav-toggle').click(function(){ 
         $('body').toggleClass('nav-open');
+        if(!$('body').hasClass('nav-open')){
+            $('body').addClass('nav-closed');
+        }else{
+            $('body').removeClass('nav-closed');
+        }
     });
 
     // Enable swishy section navigation menu

wagtail/wagtailadmin/templates/wagtailadmin/base.html

@@ -2,7 +2,7 @@
 {% load wagtailadmin_nav %}
 
 {% block furniture %}
-    <div id="nav-toggle" data-afteropen="Collapse" class="icon icon-wagtail-inverse text-replace">Menu</div>
+    <div id="nav-toggle" data-afteropen="Collapse" class="icon text-replace">Menu</div>
     <div class="nav-wrapper">
         <div class="inner">
             <a href="{% url 'wagtailadmin_home' %}" class="logo"><img src="{{ STATIC_URL }}wagtailadmin/images/wagtail-logo.svg" alt="Wagtail" width="80px" /></a>