fix sections tray

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js

@@ -10,8 +10,12 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
         templateUrl: 'views/components/application/umb-sections.html',
         link: function (scope, element, attr, ctrl) {
 
+			var sectionItemsWidth = [];
+			var evts = [];
+			var maxSections = 7;
+
             //setup scope vars
-			scope.maxSections = 7;
+			scope.maxSections = maxSections;
 			scope.overflowingSections = 0;
             scope.sections = [];
             scope.currentSection = appState.getSectionState("currentSection");
@@ -23,6 +27,14 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
 			    sectionService.getSectionsForUser()
 					.then(function (result) {
 						scope.sections = result;
+						// store the width of each section so we can hide/show them based on browser width 
+						// we store them because the sections get removed from the dom and then we 
+						// can't tell when to show them gain
+						$timeout(function(){
+							$("#applications .sections li").each(function(index) {
+								sectionItemsWidth.push($(this).outerWidth());
+							});
+						});
 						calculateWidth();
 					});
 			}
@@ -30,20 +42,28 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
 			function calculateWidth(){
 				$timeout(function(){
 					//total width minus room for avatar, search, and help icon
-					var width = $(window).width()-200;
+					var windowWidth = $(window).width()-200;
+					var sectionsWidth = 0;
 					scope.totalSections = scope.sections.length;
-					scope.maxSections = Math.floor(width / 70);
+					scope.maxSections = maxSections;
+					scope.overflowingSections = 0;
 					scope.needTray = false;
+					
+					// detect how many sections we can show on the screen
+					for (var i = 0; i < sectionItemsWidth.length; i++) {
+						var sectionItemWidth = sectionItemsWidth[i];
+						sectionsWidth += sectionItemWidth;
 
-					if(scope.totalSections > scope.maxSections){
-						scope.needTray = true;
-						scope.overflowingSections = scope.maxSections - scope.totalSections;
+						if(sectionsWidth > windowWidth) {
+							scope.needTray = true;
+							scope.maxSections = i - 1;
+							scope.overflowingSections = scope.maxSections - scope.totalSections;
+							break;
+						}
 					}
 				});
 			}
 
-			var evts = [];
-
             //Listen for global state changes
             evts.push(eventsService.on("appState.globalState.changed", function(e, args) {
                 if (args.key === "showTray") {

src/Umbraco.Web.UI.Client/src/less/application/grid.less

@@ -176,7 +176,7 @@ body.umb-drawer-is-visible #mainwrapper{
 }
 
 //empty section modification
-.emptySection #contentwrapper, .emptySection #umb-notifications-wrapper {left: 80px;}
+.emptySection #umb-notifications-wrapper {left: 80px;}
 .emptySection #speechbubble {left: 0;}
 .emptySection #navigation {display: none}
 
@@ -187,59 +187,3 @@ body.umb-drawer-is-visible #mainwrapper{
 .login-only #speechbubble ul {
     padding-left:20px
 }
-
-@media (max-width: 767px) {
-
-    // make leftcolumn smaller on tablets
-    #leftcolumn {
-        width: 61px;
-    }
-    #applications ul.sections {
-        width: 61px;
-    }
-    ul.sections.sections-tray {
-        width: 61px;
-    }
-    #applications-tray {
-        left: 60px;
-    }
-    #navigation {
-        left: 60px;
-    }
-    #contentwrapper, #contentcolumn, #umb-notifications-wrapper {
-        left: 30px;
-    }
-    #umbracoMainPageBody .umb-modal-left.fade.in {
-        margin-left: 61px;
-    }
-}
-
-@media (max-width: 500px) {
-
-    // make leftcolumn smaller on mobiles
-    #leftcolumn {
-        width: 41px;
-    }
-    #applications ul.sections {
-        width: 41px;
-    }
-    #applications ul.sections-tray {
-        width: 41px;
-    }
-    ul.sections.sections-tray {
-        width: 41px;
-    }
-    #applications-tray {
-        left: 40px;
-    }
-    #navigation {
-        left: 40px;
-    }
-    #contentwrapper, #contentcolumn, #umb-notifications-wrapper {
-        left: 20px;
-    }
-    #umbracoMainPageBody .umb-modal-left.fade.in {
-        margin-left: 41px;
-        width: 85%!important;
-    }
-}

src/Umbraco.Web.UI.Client/src/less/sections.less

@@ -72,7 +72,7 @@ ul.sections>li.expand i {
 
 ul.sections-tray {
 	position: absolute;
-	top: 60px;
+	top: @appHeaderHeight;
 	left: 0;
 	margin: 0;
     list-style: none;
@@ -85,9 +85,31 @@ ul.sections-tray>li>a {
 	padding: 8px 24px;
 	color: @white;
 	text-decoration: none;
-    display: block;
+	display: block;
+	position: relative;
 }
 
-ul.sections-tray>li>a:hover {
-	background: @purple-l1;
-}
+ul.sections-tray>li>a::after {
+	content: "";
+	width: 4px;
+	height: 100%;
+	background-color: @turquoise;
+	position: absolute;
+	border-radius: 0 3px 3px 0;
+	opacity: 0;
+	transition: all .2s linear;
+	top: 0;
+	left: 0;
+}
+
+ul.sections-tray>li.current>a::after {
+	opacity: 1;
+}
+
+ul.sections-tray>li>a .section__name {
+	opacity: 0.6;
+}
+
+ul.sections-tray>li>a:hover	.section__name {
+	opacity: 1;
+}