fix bug 917488 - Update global redesign - progress

mdn · Sep 18, 2013 · 8132b2f · 8132b2f
1 parent 0a14d02
commit 8132b2f
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 54 deletions.
diff --git a/media/redesign/js/main.js b/media/redesign/js/main.js
@@ -24,21 +24,29 @@ document.documentElement.className += ' js';
   !isOldIE && (function() {
     var $nav = $('#main-nav');
     var $navItems = $nav.find('ul > li:not(:last-child)');
-    var $input = $nav.find('.search-wrap input');
+    var $searchWrap = $nav.find('.search-wrap');
+    var $input = $searchWrap.find('input');
     var placeholder = $input.attr('placeholder');
 
     var timeout;
     var createExpander = function(delay, isAdd) {
-      return function() {
+      return function(e) {
+        e && e.preventDefault();
         timeout && clearTimeout(timeout);
         timeout = setTimeout(function() {
           if(isAdd) {
-            $nav.addClass('expand');
-            $input.attr('placeholder', '');
+            $navItems.fadeOut(100, function() {
+              $navItems.css('display', 'none');
+              $searchWrap.addClass('expanded');
+              $nav.addClass('expand');
+            });
           }
           else {
             $nav.removeClass('expand');
-            $input.attr('placeholder', placeholder);
+            timeout = setTimeout(function() {
+              $searchWrap.removeClass('expanded');
+              $navItems.fadeIn(400);
+            } , 500)
           }
         }, delay);
       }
@@ -50,8 +58,12 @@ document.documentElement.className += ' js';
       on('keypress change', function() {
         $input[($input.val() != '' ? 'add' : 'remove') + 'Class']('has-value');
       });
-  })();
 
+    $nav.find('.search-trigger').on('focus click mouseenter', function() {
+      setTimeout(function() { $input.css('display', '').get(0).focus(); }, 100);
+      createExpander(200, true);
+    });
+  })();
 
   /*
     Togglers within articles (i.e.)

diff --git a/media/redesign/stylus/home.styl b/media/redesign/stylus/home.styl
@@ -1,4 +1,4 @@
 #home
 
   .main-nav-search
-    visibility hidden
+    display none
diff --git a/media/redesign/stylus/structure.styl b/media/redesign/stylus/structure.styl
@@ -22,17 +22,32 @@
     margin-top 20px
     margin-bottom grid-spacing
 
+    @media media-query-mobile
+      width 100%
+      clear both
+
     > li
       padding-left 47px
       position relative
       opacity 1
       max-width 1000px
       display inline-block
-      vendorize(transition-property, all)
+      vendorize(transition-property, width)
       vendorize(transition-duration, animation-duration)
       vendorize(transition-delay, animation-duration)
 
-      > a
+      @media media-query-tablet
+        &:first-child, &:last-child
+          padding-left 0
+
+        padding-left 28px
+
+      @media media-query-mobile
+        display block
+        padding-left 0
+        padding 5px 0
+
+      > a, .search-trigger
         compat-important(color, menu-link-color)
         compat-important(text-transform, uppercase)
         compat-important(text-decoration, none)
@@ -72,6 +87,7 @@
       width 0
       max-width 0
       overflow hidden
+      padding 0
       vendorize(transition-delay, 0)
 
   @media media-query-tablet
@@ -142,17 +158,24 @@ a.persona-button
         z-index -1
 
 .search-wrap
-  background #fff
+  background transparent
   padding 4px 8px
   border-radius 3px
 
+  &.expanded
+    background #fff
+
+  @media media-query-mobile
+        background #fff
+
   input
     background transparent
     border 0
     color menu-link-color
     text-transform uppercase
     font-weight bold
-    width 180px
+    width 0
+    overflow hidden
     compat-only(padding, 0)
     vendorize(transition-property, width)
     vendorize(transition-duration, animation-duration)
@@ -167,11 +190,6 @@ a.persona-button
     &.has-value
       text-transform none
 
-  @media media-query-tablet
-
-    input
-      width 100px
-
 /* main content area */
 .wrap
   compat-only(max-width, none)
@@ -230,7 +248,6 @@ footer
     &.expand
       ul
         > li:not(:last-child)
-          opacity 1
           width auto
           max-width none
           vendorize(transition-property, none)

diff --git a/templates/base.html b/templates/base.html
@@ -132,13 +132,13 @@
 
     <a href="{{ url('home') }}" class="logo">{{ _('Mozilla Developer Network') }}</a>
 
-    <nav id="main-nav"><ul><li><a href="">{{ _('Projects') }}</a>
+    <nav id="main-nav"><ul><li><a href="">{{ _('Zones') }}</a>
 
         <div class="submenu">
           <div class="submenu-column">
             <div class="title">{{ _('Hot Right Now') }}</div>
             <ul>
-              <li><a href="">Build the web for beginners again</a></li>
+              <li><a href="/en-US/docs/Web/Apps/Apps_zone">App Center</a></li>
               <li><a href="">Build the web for beginners again</a></li>
               <li><a href="">Build the web for beginners again</a></li>
               <li><a href="">Build the web for beginners again</a></li>
@@ -153,53 +153,37 @@
             </ul>
           </div>
         </div>
-      </li><li><a href="">{{ _('Tools') }}</a>
+      </li><li><a href="">{{ _('Web Platform') }}</a>
 
         <div class="submenu">
           <div class="submenu-column">
-            <div class="title">{{ _('Hot Right Now') }}</div>
+            <div class="title">{{ _('Technologies') }}</div>
             <ul>
-              <li><a href="">Build the web for beginners again</a></li>
-              <li><a href="">Build the web for beginners again</a></li>
-              <li><a href="">Build the web for beginners again</a></li>
-              <li><a href="">Build the web for beginners again</a></li>
+              <li><a href="/en-US/docs/Web/HTML?menu">HTML</a></li>
+              <li><a href="/en-US/docs/Web/CSS?menu">CSS</a></li>
+              <li><a href="/en-US/docs/Web/JavaScript?menu">JavaScript</a></li>
+              <li><a href="/en-US/docs/Web/Guide/Graphics?menu">Graphics</a></li>
+              <li><a href="/en-US/docs/Web/API?menu">APIs / DOM</a></li>
+              <li><a href="/en-US/docs/Web/Apps?menu">Apps</a></li>
+              <li><a href="/en-US/docs/tools?menu">Dev Tools</a></li>
+              <li><a href="/en-US/docs/Web/MathML?menu">MathML</a></li>
             </ul>
           </div><div class="submenu-column">
-            <div class="title">{{ _('Hot Right Now') }}</div>
+            <div class="title">{{ _('References & Guide') }}</div>
             <ul>
-              <li><a href="">Build the web for beginners again</a></li>
-              <li><a href="">Build the web for beginners again</a></li>
-              <li><a href="">Build the web for beginners again</a></li>
-              <li><a href="">Build the web for beginners again</a></li>
-            </ul>
-          </div>
-        </div>
-      </li><li>
-        <a href="{{ url('learn') }}">{{ _('Learn') }}</a>
-
-        <div class="submenu">
-          <div class="submenu-column">
-            <div class="title">{{ _('Hot Right Now') }}</div>
-            <ul>
-              <li><a href="">Build the web for beginners again</a></li>
-              <li><a href="">Build the web for beginners again</a></li>
-              <li><a href="">Build the web for beginners again</a></li>
-              <li><a href="">Build the web for beginners again</a></li>
-            </ul>
-          </div><div class="submenu-column">
-            <div class="title">{{ _('Hot Right Now') }}</div>
-            <ul>
-              <li><a href="">Build the web for beginners again</a></li>
-              <li><a href="">Build the web for beginners again</a></li>
-              <li><a href="">Build the web for beginners again</a></li>
-              <li><a href="">Build the web for beginners again</a></li>
+              <li><a href="/en-US/docs/Web/Tutorials?menu">Tutorials</a></li>
+              <li><a href="/en-US/docs/Web/Reference?menu">References</a></li>
+              <li><a href="/en-US/docs/Web/Guide?menu">Developer Guides</a></li>
+              <li><a href="/en-US/docs/Accessibility?menu">Accessibility</a></li>
+              <li><a href="/en-US/demos/?menu">Demos</a></li>
+              <li><a href="/en-US/docs?menu">...more docs</a></li>
             </ul>
           </div>
         </div>
-      </li><li><a href="{{ url('demos') }}">{{ _('Demos') }}</a></li>{% if not is_sphinx %}<li class="main-nav-search"><form action="{{ url('search') }}">
+      </li><li><a href="{{ url('learn') }}">{{ _('Tools') }}</a></li><li><a href="{{ url('demos') }}">{{ _('Demos') }}</a></li><li><a href="">{{ _('Developer Program') }}</a></li>{% if not is_sphinx %}<li class="main-nav-search"><form action="{{ url('search') }}">
         <div class="search-wrap">
           <input type="search" name="q" placeholder="{{ _('Search') }}" value="{{ search_query }}" />
-          <i class="icon-search"></i>
+          <a href="javascript:;" class="search-trigger"><i class="icon-search"></i></a>
           <button type="submit">{{ _('Search') }}</button>
         </div>
       </form></li>{% endif %}</ul></nav>