Fix tab menus

api/resources/csses/ace_api.css

@@ -181,50 +181,6 @@ ul.menu {
   Members and the tabs that represent them
 */
 
-.members {
-/*    width: 800px;  */
-    /*width: 700px;*/
-/*    margin: 0 10px;*/
-    
-  height: 42px;
-  left: 0;
-/*  position: fixed;*/
-  top: 0;
-/*  transition-duration: 300ms, 300ms;
-  transition-property: box-shadow, height;
-  transition-timing-function: ease-out, ease-out;
-  -moz-transition-duration: 300ms, 300ms;
-  -moz-transition-property: -moz-box-shadow, height;
-  -moz-transition-timing-function: ease-out, ease-out;
-  -o-transition-duration: 300ms, 300ms;
-  -o-transition-property: -o-box-shadow, height;
-  -o-transition-timing-function: ease-out, ease-out;
-  -webkit-transition-duration: 300ms, 300ms;
-  -webkit-transition-property: -webkit-box-shadow, height;
-  -webkit-transition-timing-function: ease-out, ease-out;*/
-/*  width: 100%;*/
-  /*transition-duration: 300ms;
-  transition-property: box-shadow;
-  transition-timing-function: ease-out;
-  -moz-transition-duration: 300ms, 300ms;
-  -moz-transition-property: -moz-box-shadow, height;
-  -moz-transition-timing-function: ease-out, ease-out;
-  -o-transition-duration: 300ms;
-  -o-transition-property: -o-box-shadow;
-  -o-transition-timing-function: ease-out;*/
-  -webkit-transition-duration: 400ms, 0ms;
-  -webkit-transition-property: -webkit-box-shadow, background;
-  -webkit-transition-timing-function: ease-out, ease-out;
-  z-index: 100;
-  padding-bottom : 5px;
-  overflow: visible !important;
-  
-/*  background: #FFF;
-  width: 100%;
-  padding-bottom: 13px;
-  top: 40px;
-  position: fixed;*/
-}
 .srolled .members {
     width: 100%;
 /*    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.35);
@@ -320,6 +276,10 @@ ul.menu {
 
 }
 
+ul.tabs li:first-child ul{
+    left: -63px;
+}
+
 .tabs a.menu:after, .tabs .dropdown-toggle:after {
     margin-top: 22px;
 }
@@ -375,14 +335,10 @@ li.dropdown {
     margin-left: 6px;
 }
 
-.members .tabs ul li {
-    font-weight: bold;
-}
-
 .memberLink a {
     margin-left: 0 !important;
 }
-.menu-dropdown, .dropdown-menu {
+.menu-dropdown {
     min-width : 105px;
     max-height: 350px;
     overflow: auto;
@@ -395,9 +351,6 @@ li.dropdown {
     background-color: #ffffff;
     color: #000000;
 }
-.dropdown-menu {
-    border-top: none;
-}
 
 .tabs a.menu:after, .tabs .dropdown-toggle:after {
     margin-top: 13px;
@@ -445,9 +398,8 @@ li.dropdown {
 }
 .tabs .menu-dropdown, .tabs .dropdown-menu {
     border-radius: 0 0 6px 6px;
-    top: 32px;
+    left: 10px;
-    right: 0px;
+    width: 160px;
-    width: 150px;
 }
 .srolled .tabs .menu-dropdown, .srolled .tabs .dropdown-menu {
     top: 32px;
@@ -508,13 +460,16 @@ header.filler {
     color: #404040;
 }
 
+#sidebarContainer {
+    padding-top: 20px;
+}
+
 #mainContent {
     margin-left: 30px;
 }
 
 #documentation {
-    padding-top: 15px;
+    padding-top: 35px;
-    padding-left: 15px;
     padding-bottom: 10px;
 }
 

api/resources/javascripts/ux.js

@@ -16,6 +16,8 @@ $(function () {
 
     function loadCallback(evt) {
         var form = document.getElementById("searchbox");
+
+        if (form) {
             var input = form.query;
             form.onsubmit = function (evt) {
                 var query = input.value;
@@ -28,6 +30,7 @@ $(function () {
                 return false;
             };
         }
+    }
 
     // init search
     $('#search')
@@ -68,59 +71,6 @@ function ux() {
     }
     else sx = 0;
 
-    $('.members').each(function (i) {
-        var $classContent = $(this).closest('.classContent');
-        
-        $(this).scrollspy({
-            min: $classContent.position().top + 5,
-            max: $classContent.position().top + $classContent.height() - 35,
-            onEnter: function (element, position) {
-                var $pagination = $(element);
-                var $paginationContent = $('.membersContent pos' + i);
-                var $tabs = $('.tabs pos' + i);
-
-                $paginationContent.css('left', -1 * sx);
-                $paginationContent.css('top', 0);
-
-                $pagination.addClass('shadow').stop().css({
-                    height: 31
-                }).closest('.classContent').addClass('srolled');
-
-                $tabs.addClass('tabsSansBorder');
-            },
-            onLeave: function (element, position) {
-                var $pagination = $(element);
-                var $paginationContent = $('.membersContent pos' + i);
-                var $tabs = $('.tabs pos' + i);
-
-                $paginationContent.stop().css({
-                    top: 11
-                }); 
-                $pagination.css({
-                    'position': 'absolute',
-                    'top': 193
-                });
-                $pagination.stop().removeClass('shadow').css({
-                    height: 42
-                });
-
-                $paginationContent.css('left', 0);
-               // setTimeout(function () {
-                    $paginationContent.css({
-                        'top': ''
-                    });
-                    $pagination.css({
-                        'position': '',
-                        'top': ''
-                    });
-                    $paginationContent.css('left', 0);
-                    $pagination.closest('.classContent').removeClass('srolled')
-                    $tabs.removeClass('tabsSansBorder');
-               // }, 300);
-            }
-        });
-    });
-    
     $('span.methodClicker, article.article, i.methodClicker').each(function () {
         var a = $(this);
         var constructorPos = a.attr("id").indexOf("new ");

doc/template/resources/csses/ace_api.css

@@ -181,50 +181,6 @@ ul.menu {
   Members and the tabs that represent them
 */
 
-.members {
-/*    width: 800px;  */
-    /*width: 700px;*/
-/*    margin: 0 10px;*/
-    
-  height: 42px;
-  left: 0;
-/*  position: fixed;*/
-  top: 0;
-/*  transition-duration: 300ms, 300ms;
-  transition-property: box-shadow, height;
-  transition-timing-function: ease-out, ease-out;
-  -moz-transition-duration: 300ms, 300ms;
-  -moz-transition-property: -moz-box-shadow, height;
-  -moz-transition-timing-function: ease-out, ease-out;
-  -o-transition-duration: 300ms, 300ms;
-  -o-transition-property: -o-box-shadow, height;
-  -o-transition-timing-function: ease-out, ease-out;
-  -webkit-transition-duration: 300ms, 300ms;
-  -webkit-transition-property: -webkit-box-shadow, height;
-  -webkit-transition-timing-function: ease-out, ease-out;*/
-/*  width: 100%;*/
-  /*transition-duration: 300ms;
-  transition-property: box-shadow;
-  transition-timing-function: ease-out;
-  -moz-transition-duration: 300ms, 300ms;
-  -moz-transition-property: -moz-box-shadow, height;
-  -moz-transition-timing-function: ease-out, ease-out;
-  -o-transition-duration: 300ms;
-  -o-transition-property: -o-box-shadow;
-  -o-transition-timing-function: ease-out;*/
-  -webkit-transition-duration: 400ms, 0ms;
-  -webkit-transition-property: -webkit-box-shadow, background;
-  -webkit-transition-timing-function: ease-out, ease-out;
-  z-index: 100;
-  padding-bottom : 5px;
-  overflow: visible !important;
-  
-/*  background: #FFF;
-  width: 100%;
-  padding-bottom: 13px;
-  top: 40px;
-  position: fixed;*/
-}
 .srolled .members {
     width: 100%;
 /*    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.35);
@@ -320,6 +276,10 @@ ul.menu {
 
 }
 
+ul.tabs li:first-child ul{
+    left: -63px;
+}
+
 .tabs a.menu:after, .tabs .dropdown-toggle:after {
     margin-top: 22px;
 }
@@ -375,14 +335,10 @@ li.dropdown {
     margin-left: 6px;
 }
 
-.members .tabs ul li {
-    font-weight: bold;
-}
-
 .memberLink a {
     margin-left: 0 !important;
 }
-.menu-dropdown, .dropdown-menu {
+.menu-dropdown {
     min-width : 105px;
     max-height: 350px;
     overflow: auto;
@@ -395,9 +351,6 @@ li.dropdown {
     background-color: #ffffff;
     color: #000000;
 }
-.dropdown-menu {
-    border-top: none;
-}
 
 .tabs a.menu:after, .tabs .dropdown-toggle:after {
     margin-top: 13px;
@@ -445,9 +398,8 @@ li.dropdown {
 }
 .tabs .menu-dropdown, .tabs .dropdown-menu {
     border-radius: 0 0 6px 6px;
-    top: 32px;
+    left: 10px;
-    right: 0px;
+    width: 160px;
-    width: 150px;
 }
 .srolled .tabs .menu-dropdown, .srolled .tabs .dropdown-menu {
     top: 32px;
@@ -508,13 +460,16 @@ header.filler {
     color: #404040;
 }
 
+#sidebarContainer {
+    padding-top: 20px;
+}
+
 #mainContent {
     margin-left: 30px;
 }
 
 #documentation {
-    padding-top: 15px;
+    padding-top: 35px;
-    padding-left: 15px;
     padding-bottom: 10px;
 }
 

doc/template/resources/javascripts/ux.js

@@ -16,6 +16,8 @@ $(function () {
 
     function loadCallback(evt) {
         var form = document.getElementById("searchbox");
+
+        if (form) {
             var input = form.query;
             form.onsubmit = function (evt) {
                 var query = input.value;
@@ -28,6 +30,7 @@ $(function () {
                 return false;
             };
         }
+    }
 
     // init search
     $('#search')
@@ -68,59 +71,6 @@ function ux() {
     }
     else sx = 0;
 
-    $('.members').each(function (i) {
-        var $classContent = $(this).closest('.classContent');
-        
-        $(this).scrollspy({
-            min: $classContent.position().top + 5,
-            max: $classContent.position().top + $classContent.height() - 35,
-            onEnter: function (element, position) {
-                var $pagination = $(element);
-                var $paginationContent = $('.membersContent pos' + i);
-                var $tabs = $('.tabs pos' + i);
-
-                $paginationContent.css('left', -1 * sx);
-                $paginationContent.css('top', 0);
-
-                $pagination.addClass('shadow').stop().css({
-                    height: 31
-                }).closest('.classContent').addClass('srolled');
-
-                $tabs.addClass('tabsSansBorder');
-            },
-            onLeave: function (element, position) {
-                var $pagination = $(element);
-                var $paginationContent = $('.membersContent pos' + i);
-                var $tabs = $('.tabs pos' + i);
-
-                $paginationContent.stop().css({
-                    top: 11
-                }); 
-                $pagination.css({
-                    'position': 'absolute',
-                    'top': 193
-                });
-                $pagination.stop().removeClass('shadow').css({
-                    height: 42
-                });
-
-                $paginationContent.css('left', 0);
-               // setTimeout(function () {
-                    $paginationContent.css({
-                        'top': ''
-                    });
-                    $pagination.css({
-                        'position': '',
-                        'top': ''
-                    });
-                    $paginationContent.css('left', 0);
-                    $pagination.closest('.classContent').removeClass('srolled')
-                    $tabs.removeClass('tabsSansBorder');
-               // }, 300);
-            }
-        });
-    });
-    
     $('span.methodClicker, article.article, i.methodClicker').each(function () {
         var a = $(this);
         var constructorPos = a.attr("id").indexOf("new ");

index.html

@@ -14,7 +14,7 @@
     </head>
     <body>
         <a href="http://github.com/ajaxorg/ace">
-        <img style="z-index: 50000; position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" />
+        <img style="z-index: 50000; position: absolute; top: 0; right: 0; border: 0; width: 125px; height: 125px" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" />
         </a>
         <div id="wrapper">
             <div class="content">