From de4d0f6f7b98ea778d0839703d1592436ef343c8 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 13 Apr 2016 19:50:30 +0200
Subject: [PATCH] Overhauled tab menu active marking

---
 .../files/js/WoltLab/WCF/Ui/TabMenu/Simple.js | 30 ++----------
 wcfsetup/install/files/style/ui/tabMenu.scss  | 48 +++++++++++++------
 2 files changed, 37 insertions(+), 41 deletions(-)

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js
index a61bad5ce2..0359e94ef6 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js
@@ -53,8 +53,8 @@ define(['Dictionary', 'EventHandler', 'Dom/Traverse', 'Dom/Util'], function(Dict
 				return false;
 			}
 			
-			var container, containers = DomTraverse.childrenByTag(this._container, 'DIV'), name;
-			for (var i = 0, length = containers.length; i < length; i++) {
+			var container, containers = DomTraverse.childrenByTag(this._container, 'DIV'), name, i, length;
+			for (i = 0, length = containers.length; i < length; i++) {
 				container = containers[i];
 				name = elData(container, 'name');
 				
@@ -67,7 +67,7 @@ define(['Dictionary', 'EventHandler', 'Dom/Traverse', 'Dom/Util'], function(Dict
 			}
 			
 			var containerId = this._container.id, tab;
-			for (var i = 0, length = tabs.length; i < length; i++) {
+			for (i = 0, length = tabs.length; i < length; i++) {
 				tab = tabs[i];
 				name = this._getTabName(tab);
 				
@@ -107,9 +107,6 @@ define(['Dictionary', 'EventHandler', 'Dom/Traverse', 'Dom/Util'], function(Dict
 				});
 			}
 			
-			// create pointer element
-			nav.appendChild(elCreate('span'));
-			
 			return true;
 		},
 		
@@ -231,27 +228,6 @@ define(['Dictionary', 'EventHandler', 'Dom/Traverse', 'Dom/Util'], function(Dict
 				newContent.classList.remove('hidden');
 			}
 			
-			var menu = tab.parentNode.parentNode;
-			
-			// set pointer position
-			var span = DomTraverse.childByTag(menu, 'SPAN');
-			
-			// make sure that the tab is (temporarily) visible so that offsetLeft has the proper value
-			var toggleHidden = false;
-			if (menu.classList.contains('menu') && menu.parentNode.classList.contains('hidden')) {
-				toggleHidden = true;
-				menu.parentNode.classList.remove('hidden');
-			}
-			
-			if (span !== null) {
-				span.style.setProperty('transform', 'translateX(' + tab.offsetLeft + 'px)', '');
-				span.style.setProperty('width', tab.clientWidth + 'px', '');
-			}
-			
-			if (toggleHidden) {
-				menu.parentNode.classList.add('hidden');
-			}
-			
 			if (!disableEvent) {
 				EventHandler.fire('com.woltlab.wcf.simpleTabMenu_' + this._container.id, 'select', {
 					active: tab,
diff --git a/wcfsetup/install/files/style/ui/tabMenu.scss b/wcfsetup/install/files/style/ui/tabMenu.scss
index ff489348a0..2deb4dc587 100644
--- a/wcfsetup/install/files/style/ui/tabMenu.scss
+++ b/wcfsetup/install/files/style/ui/tabMenu.scss
@@ -16,22 +16,32 @@
 			@include inlineList;
 			
 			> li {
+				position: relative;
+				
 				&:not(:last-child) {
 					margin-right: 20px;
 				}
 				
+				&::before {
+					border-top: 1px solid $wcfContentLink;
+					bottom: -1px;
+					content: "";
+					left: 50%;
+					position: absolute;
+					width: 0;
+				}
+				
+				&.active::before {
+					left: 0;
+					transition: left .12s linear, width .12s linear;
+					width: 100%;
+				}
+				
 				&.active > a {
 					cursor: default;
 				}
 			}
 		}
-		
-		> span {
-			border-top: 1px solid $wcfContentLink;
-			bottom: 0;
-			position: absolute;
-			transition: transform .12s linear, width .12s linear;
-		}
 	}
 	
 	@include small-screen-only {
@@ -81,6 +91,23 @@
 		@include inlineList;
 		
 		> li {
+			position: relative;
+			
+			&::before {
+				border-top: 1px solid $wcfContentLink;
+				bottom: -1px;
+				content: "";
+				left: 50%;
+				position: absolute;
+				width: 0;
+			}
+			
+			&.active::before {
+				left: 0;
+				transition: left .12s linear, width .12s linear;
+				width: 100%;
+			}
+			
 			&:not(:last-child) {
 				margin-right: 20px;
 			}
@@ -91,13 +118,6 @@
 		}
 	}
 	
-	> span {
-		border-top: 1px solid $wcfContentLink;
-		bottom: -5px;
-		position: absolute;
-		transition: transform .12s linear, width .12s linear;
-	}
-	
 	& + .tabMenuContent {
 		margin-top: 20px;
 	}
-- 
2.20.1