From b23ea69b3e86c16e06b021d82ac8d50ffd42c46c Mon Sep 17 00:00:00 2001
From: Shannon <sdeminick@gmail.com>
Date: Wed, 8 Jul 2015 11:48:17 +0200
Subject: [PATCH] Fixes: U4-6636 Left navbar (section-bar) is unnecessary wide
 on mobile devices

Conflicts:
	src/Umbraco.Web.UI.Client/src/less/grid.less
---
 src/Umbraco.Web.UI.Client/src/less/grid.less | 70 ++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/less/grid.less b/src/Umbraco.Web.UI.Client/src/less/grid.less
index 22ea5d9836..7cd8167cd6 100644
--- a/src/Umbraco.Web.UI.Client/src/less/grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/grid.less
@@ -176,3 +176,73 @@ body {
 .emptySection #contentwrapper {left: 80px;}
 .emptySection #speechbubble {left: 0;}
 .emptySection #navigation {display: none}
+
+}
+
+
+
+@media (max-width: 767px) {
+    
+    // make leftcolumn smaller on tablets
+    #leftcolumn {
+      width: 60px;
+    }
+    #applications ul.sections {
+        width: 60px;
+    }
+    ul.sections.sections-tray {
+        width: 60px;
+    }
+    #applications-tray {
+        left: 60px;
+    }
+    #navigation {
+        left: 60px;
+    }
+    #contentwrapper, #contentcolumn {
+        left: 30px;
+    }
+    #umbracoMainPageBody .umb-modal-left.fade.in {
+      margin-left: 60px;
+    }
+}
+
+
+
+@media (max-width: 500px) {
+    
+    // make leftcolumn smaller on mobiles
+    #leftcolumn {
+      width: 40px;
+    }
+    #applications ul.sections {
+        width: 40px;
+    }
+    ul.sections li [class^="icon-"]:before {
+        font-size: 25px!important;
+    }
+    #applications ul.sections li.avatar a img  {
+        width: 25px;
+    }
+    ul.sections a span {
+        display:none !important;
+    }
+    #applications ul.sections-tray {
+        width: 40px;
+    }
+    ul.sections.sections-tray {
+        width: 40px;
+    }
+    #applications-tray {
+        left: 40px;
+    }
+    #navigation {
+        left: 40px;
+    }
+    #contentwrapper, #contentcolumn {
+        left: 20px;
+    }
+    #umbracoMainPageBody .umb-modal-left.fade.in {
+        margin-left: 40px;
+        width: 85%!important;
+    }
\ No newline at end of file