From dc6b06e585367e6808c7ed47fbbce0292f1b086a Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Wed, 11 Feb 2015 10:31:40 +0000
Subject: [PATCH] tweaks to make menu toggle work cleaner

---
 .../scss/layouts/page-editor.scss             | 77 +++++++++++--------
 .../wagtailadmin/block_forms/stream_menu.html |  1 +
 2 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
index 10ced7afe..c812a8c40 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
@@ -312,6 +312,34 @@
         opacity:1;
         z-index:5;
 
+        .toggle{
+            @include transition(all 0.2s ease);
+            @include border-radius(50px);
+            position:absolute;
+            top:-0.5em;
+            left:0;
+            right:0;
+            margin:0 auto;
+            cursor:pointer;
+            font-size:1.7em;
+            width:1em;
+            height:1em;
+            display:block;
+            z-index:5;
+            color:$color-grey-1;
+            background-color:white;
+        
+            &:before{
+                @include transition(all 0.2s ease);
+                @include transform(rotate(-45deg));
+                position:absolute;
+                font-family:wagtail;
+                content:"B";
+                line-height:1em;
+                text-align:center;
+            }
+        }
+
         .stream-menu-inner{
             @include transition(max-height 0.2s ease);
             max-width:50em;
@@ -324,12 +352,18 @@
             @include transition(all 0.2s ease);
             @include clearfix;
             opacity:1;
-            padding:1em;
+            padding:1em 1em 0 1em;
             overflow:hidden;
         }
         li{
             @include column(2);
             padding-bottom:$grid-gutter-width;
+            padding-left:0;
+            padding-right:0;
+
+            &:nth-child(6n+7){
+                clear:left;
+            }
         }
 
         button{
@@ -343,9 +377,8 @@
             padding:0 0 0.5em 0;
 
             span{
-                text-overflow:ellipsis;
-                text-transform:none;
-                white-space: nowrap;
+                text-transform:capitalize;
+                white-space: pre-wrap;
                 width:100%;
                 display:block;
                 overflow:hidden;
@@ -369,48 +402,32 @@
             }
         }
 
-        &:before{
-            @include transition(all 0.2s ease);
-            @include transform(rotate(-45deg));
-            @include border-radius(50px);
-            cursor:pointer;
-            font-family:wagtail;
-            content:"B";
-            width:1em;
-            height:1em;
-            display:block;
-            margin:-0.5em auto auto auto;
-            z-index:5;
-            color:$color-grey-1;
-            background-color:white;
-            font-size:1.7em;
-            line-height:1em;
-            text-align:center;
-        }
 
         &.stream-menu-closed{
             @include box-shadow(none);
             height:0px;
             border-top:1px solid lighten($color-grey-4, 3%);
 
+            .toggle{
+                color:$color-grey-3;
+                background-color:white;
+                &:before{
+                    @include transform(rotate(0deg));
+                }
+            } 
+
             .stream-menu-inner{
                 max-height:1em;
             }
             ul{
                 opacity:0;
                 padding:10em;
-            }
-
-            &:before{
-                @include transform(rotate(0deg));
-                color:$color-grey-3;
-                background-color:white;
-            } 
+            }           
 
             &:hover{
                 border-top-color:$color-teal;
 
-                &:before{
+                .toggle{
                     color:$color-teal;
                 }
             }   
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_menu.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_menu.html
index 46af65fa5..8cfb9c083 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_menu.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_menu.html
@@ -1,4 +1,5 @@
 <div class="stream-menu {% if state == 'closed' %}stream-menu-closed{% endif %}">
+    <div class="toggle"></div>
     <div class="stream-menu-inner">
         <ul>
             {% for child_block in child_blocks %}