Overhauled tab menu active marking

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 a61bad5ce2418139a5edf3d1c7533f2c68942131..0359e94ef676c739da79f10b011583b57bd3cf28 100644 (file)
--- 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 ff489348a05b78290c4a2422228749528f78b951..2deb4dc587fdf7f26b83a8a97a9713ad6c4785e3 100644 (file)
--- 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;
        }