Implement /firefox/android page redesign. Bug 1072953.

- Update fx nav. Bug 1073237. - Update /firefox/mobile/ redirect. Bug 1071318.
mozilla · Oct 22, 2014 · 2c96571 · 2c96571
1 parent a28cc87
commit 2c96571
Show file tree

Hide file tree

Showing 77 changed files with 1,986 additions and 327 deletions.
diff --git a/bedrock/firefox/templates/firefox/android/index.html b/bedrock/firefox/templates/firefox/android/index.html
diff --git a/bedrock/firefox/templates/firefox/base-resp.html b/bedrock/firefox/templates/firefox/base-resp.html
@@ -22,62 +22,7 @@
 {% endblock %}
 
 {% block site_header_nav %}
-<nav id="nav-main" role="navigation">
-  <span class="toggle" role="button" aria-controls="nav-main-menu" aria-expanded="false" tabindex="0">{{_('Menu')}}</span>
-  <ul id="nav-main-menu" class="has-submenus">
-    <li class="first" id="nav-main-features"><a href="{{ url('firefox.desktop.index') }}" tabindex="0" aria-owns="nav-main-features-submenu" aria-haspopup="true">{{_('Desktop')}}</a>
-      <ul aria-expanded="false" id="nav-main-features-submenu" class="submenu">
-        <li class="first"><a href="{{ url('firefox.desktop.index') }}" tabindex="-1">{{_('Features')}}</a></li>
-        <li><a href="{{ url('firefox.desktop.customize') }}" tabindex="-1">{{_('Customize')}}</a></li>
-        <li><a href="{{ url('firefox.desktop.fast') }}" tabindex="-1">{{_('Performance')}}</a></li>
-        <li><a href="https://developer.mozilla.org/docs/Tools" tabindex="-1">{{_('Technology')}}</a></li>
-        <li class="last"><a href="{{ url('firefox.desktop.trust') }}" tabindex="-1">{{_('Privacy &amp; Security')}}</a></li>
-      </ul>
-    </li>
-    <li id="nav-main-mobile"><a href="{{ url('firefox.android.index') }}" tabindex="0" aria-owns="nav-main-mobile-submenu" aria-haspopup="true">{{_('Mobile')}}</a>
-      <ul aria-expanded="false" id="nav-main-mobile-submenu" class="submenu">
-        <li class="first"><a href="{{ url('firefox.android.index') }}" tabindex="-1">{{_('Features')}}</a></li>
-        <li><a href="https://addons.mozilla.org/android/" tabindex="-1">{{_('Customize')}}</a></li>
-        <li class="last"><a href="{{ url('firefox.android.faq') }}" tabindex="-1">{{_('FAQ')}}</a></li>
-      </ul>
-    </li>
-    <li id="nav-main-releases" class=""><a href="{{ url('firefox.channel') }}" tabindex="0" aria-owns="nav-main-releases-submenu" aria-haspopup="true">{{_('Releases')}}</a>
-      <ul aria-expanded="false" id="nav-main-releases-submenu" class="submenu">
-        <li class="first"><a href="{{ url('firefox.channel') }}" tabindex="-1">{{_('Overview')}}</a></li>
-        <li><a href="{{ url('firefox.channel') }}#aurora" tabindex="-1">{{_('Firefox Aurora')}}</a></li>
-        <li><a href="{{ url('firefox.channel') }}#beta" tabindex="-1">{{_('Firefox Beta')}}</a></li>
-        <li><a href="{{ url('firefox') }}" tabindex="-1">{{_('Firefox')}}</a></li>
-        <li class="last"><a href="{{ url('firefox.organizations.organizations') }}" tabindex="-1">{{_('Firefox for Organizations')}}</a></li>
-      </ul>
-    </li>
-    <li id="nav-main-addons"><a href="https://addons.mozilla.org/" tabindex="0" aria-owns="nav-main-addons-submenu" aria-haspopup="true">{{_('Add-ons')}}</a>
-      <ul aria-expanded="false" id="nav-main-addons-submenu" class="submenu">
-        <li class="first"><a href="https://addons.mozilla.org/firefox/" tabindex="-1">{{_('Desktop Add-ons')}}</a></li>
-        <li><a href="https://addons.mozilla.org/android/" tabindex="-1">{{_('Mobile Add-ons')}}</a></li>
-        <li class="last"><a href="https://addons.mozilla.org/firefox/themes/" tabindex="-1">{{_('Themes')}}</a></li>
-      </ul>
-      </li>
-      <li id="nav-main-support"><a href="https://support.mozilla.org/" tabindex="0" aria-owns="nav-main-support-submenu" aria-haspopup="true">{{_('Support')}}</a>
-      <ul aria-expanded="false" id="nav-main-support-submenu" class="submenu">
-        <li class="first"><a href="https://support.mozilla.org/products/firefox" tabindex="-1">{{_('Desktop Support')}}</a></li>
-        <li class="last"><a href="https://support.mozilla.org/products/mobile" tabindex="-1">{{_('Mobile Support')}}</a></li>
-      </ul>
-    </li>
-    <li class="last" id="nav-main-about"><a href="/en-US/firefox/about/" tabindex="0" aria-owns="nav-main-about-submenu" aria-haspopup="true">{{_('About')}}</a>
-      <ul aria-expanded="false" id="nav-main-about-submenu" class="submenu">
-        <li class="first"><a href="https://blog.mozilla.org/" tabindex="-1">{{_('Blog')}}</a></li>
-        <li><a href="/en-US/firefox/about/" tabindex="-1">{{_('About Firefox')}}</a></li>
-        <li><a href="/join" tabindex="-1">{{_('Join Mozilla')}}</a></li>
-        <li><a href="/en-US/about/participate/" tabindex="-1">{{_('Participate')}}</a></li>
-        <li><a href="https://blog.mozilla.org/press/" tabindex="-1">{{_('Press Center')}}</a></li>
-        <li><a href="/en-US/firefox/brand/" tabindex="-1">{{_('Brand Toolkit')}}</a></li>
-        <li><a href="https://careers.mozilla.org" tabindex="-1">{{_('Careers')}}</a></li>
-        <li><a href="/en-US/about/partnerships.html" tabindex="-1">{{_('Partnerships')}}</a></li>
-        <li class="last"><a href="{{ url('mozorg.contact.spaces.spaces-landing') }}" tabindex="-1">{{_('Contact Us')}}</a></li>
-      </ul>
-    </li>
-  </ul>
-</nav>
+  {% include 'firefox/includes/top-menu.html' %}
 {% endblock %}
 
 {% block site_header_logo %}

diff --git a/bedrock/firefox/templates/firefox/base.html b/bedrock/firefox/templates/firefox/base.html
@@ -20,61 +20,7 @@
 {% endblock %}
 
 {% block site_header_nav %}
-<nav role="navigation" id="nav-main">
-  <ul class="has-submenus">
-    <li class="first" id="nav-main-features"><a href="{{ url('firefox.desktop.index') }}" tabindex="0" aria-owns="nav-main-features-submenu" aria-haspopup="true">{{ _('Desktop') }}</a>
-      <ul aria-expanded="false" id="nav-main-features-submenu">
-        <li class="first"><a href="{{ url('firefox.desktop.index') }}" tabindex="-1">{{ _('Features') }}</a></li>
-        <li><a href="{{ url('firefox.desktop.customize') }}" tabindex="-1">{{ _('Customize') }}</a></li>
-        <li><a href="{{ url('firefox.desktop.fast') }}" tabindex="-1">{{ _('Performance') }}</a></li>
-        <li><a href="https://developer.mozilla.org/docs/Tools" tabindex="-1">{{ _('Technology') }}</a></li>
-        <li class="last"><a href="{{ url('firefox.desktop.trust') }}" tabindex="-1">{{ _('Privacy &amp; Security') }}</a></li>
-      </ul>
-    </li>
-    <li id="nav-main-mobile"><a href="{{ url('firefox.android.index') }}" tabindex="0" aria-owns="nav-main-mobile-submenu" aria-haspopup="true">{{ _('Mobile') }}</a>
-      <ul aria-expanded="false" id="nav-main-mobile-submenu" class="submenu">
-        <li class="first"><a href="{{ url('firefox.android.index') }}" tabindex="-1">{{ _('Features') }}</a></li>
-        <li><a href="https://addons.mozilla.org/android/" tabindex="-1">{{ _('Customize') }}</a></li>
-        <li class="last"><a href="{{ url('firefox.android.faq') }}" tabindex="-1">{{ _('FAQ') }}</a></li>
-      </ul>
-    </li>
-    <li id="nav-main-releases" class=""><a href="{{ url('firefox.channel') }}" tabindex="0" aria-owns="nav-main-releases-submenu" aria-haspopup="true">{{ _('Releases') }}</a>
-      <ul aria-expanded="false" id="nav-main-releases-submenu">
-        <li class="first"><a href="{{ url('firefox.channel') }}" tabindex="-1">{{ _('Overview') }}</a></li>
-        <li><a href="{{ url('firefox.channel') }}#aurora" tabindex="-1">{{ _('Firefox Aurora') }}</a></li>
-        <li><a href="{{ url('firefox.channel') }}#beta" tabindex="-1">{{ _('Firefox Beta') }}</a></li>
-        <li><a href="{{ url('firefox') }}" tabindex="-1">{{ _('Firefox') }}</a></li>
-        <li class="last"><a href="{{ url('firefox.organizations.organizations') }}" tabindex="-1">{{ _('Firefox for Organizations') }}</a></li>
-      </ul>
-    </li>
-    <li id="nav-main-addons"><a href="https://addons.mozilla.org/" tabindex="0" aria-owns="nav-main-addons-submenu" aria-haspopup="true">{{ _('Add-ons') }}</a>
-      <ul aria-expanded="false" id="nav-main-addons-submenu">
-        <li class="first"><a href="https://addons.mozilla.org/firefox/" tabindex="-1">{{ _('Desktop Add-ons') }}</a></li>
-        <li><a href="https://addons.mozilla.org/android/" tabindex="-1">{{ _('Mobile Add-ons') }}</a></li>
-        <li class="last"><a href="https://addons.mozilla.org/firefox/themes/" tabindex="-1">{{ _('Themes') }}</a></li>
-      </ul>
-      </li>
-      <li id="nav-main-support"><a href="https://support.mozilla.org/" tabindex="0" aria-owns="nav-main-support-submenu" aria-haspopup="true">{{ _('Support') }}</a>
-      <ul aria-expanded="false" id="nav-main-support-submenu">
-        <li class="first"><a href="https://support.mozilla.org/products/firefox" tabindex="-1">{{ _('Desktop Support') }}</a></li>
-        <li class="last"><a href="https://support.mozilla.org/products/mobile" tabindex="-1">{{ _('Mobile Support') }}</a></li>
-      </ul>
-    </li>
-    <li class="last" id="nav-main-about"><a href="/en-US/firefox/about/" tabindex="0" aria-owns="nav-main-about-submenu" aria-haspopup="true">{{ _('About') }}</a>
-      <ul aria-expanded="false" id="nav-main-about-submenu">
-        <li class="first"><a href="https://blog.mozilla.org/" tabindex="-1">{{ _('Blog') }}</a></li>
-        <li><a href="/en-US/firefox/about/" tabindex="-1">{{ _('About Firefox') }}</a></li>
-        <li><a href="/join" tabindex="-1">{{ _('Join Mozilla') }}</a></li>
-        <li><a href="/en-US/about/participate/" tabindex="-1">{{ _('Participate') }}</a></li>
-        <li><a href="https://blog.mozilla.org/press/" tabindex="-1">{{ _('Press Center') }}</a></li>
-        <li><a href="/en-US/firefox/brand/" tabindex="-1">{{ _('Brand Toolkit') }}</a></li>
-        <li><a href="https://careers.mozilla.org" tabindex="-1">{{ _('Careers') }}</a></li>
-        <li><a href="/en-US/about/partnerships.html" tabindex="-1">{{ _('Partnerships') }}</a></li>
-        <li class="last"><a href="{{ url('mozorg.contact.spaces.spaces-landing') }}" tabindex="-1">{{ _('Contact Us') }}</a></li>
-      </ul>
-    </li>
-  </ul>
-</nav>
+  {% include 'firefox/includes/top-menu.html' %}
 {% endblock %}
 
 {% block site_header_logo %}

diff --git a/bedrock/firefox/templates/firefox/desktop/tips.html b/bedrock/firefox/templates/firefox/desktop/tips.html
@@ -20,6 +20,10 @@
   <header id="masthead">
     <div class="container">
       <a href="{{ url('mozorg.home') }}" id="tabzilla" data-infobar="{{ settings.TABZILLA_INFOBAR_OPTIONS }}">Mozilla</a>
+
+      {% block site_header_nav %}
+        {% include 'firefox/includes/top-menu.html' %}
+      {% endblock %}
     </div>
   </header>
 {% endblock %}

diff --git a/bedrock/firefox/templates/firefox/includes/top-menu.html b/bedrock/firefox/templates/firefox/includes/top-menu.html
@@ -0,0 +1,28 @@
+<nav id="nav-main" role="navigation">
+  <span id="nav-main-toggle" class="toggle" role="button" aria-controls="nav-main-menu" aria-expanded="false" tabindex="0">{{_('Menu')}}</span>
+  <ul id="nav-main-menu" class="has-submenus">
+    <li class="first" id="nav-main-features"><a href="#" role="button" tabindex="0" aria-owns="nav-main-features-submenu" aria-haspopup="true">{{_('Firefox')}}</a>
+      <ul aria-expanded="false" id="nav-main-features-submenu" class="submenu">
+        <li class="first"><a href="{{ url('firefox.desktop.index') }}" tabindex="-1">{{_('Desktop')}}</a></li>
+        <li><a href="{{ url('firefox.android.index') }}" tabindex="-1">{{_('Android')}}</a></li>
+        <li>
+          <hr>{# <hr> before first sub/minor link #}
+          <a class="sublink" href="{{ url('firefox.sync') }}" tabindex="-1">{{ _('Sync') }}</a>
+        </li>
+      </ul>
+    </li>
+    <li id="nav-main-addons"><a href="#" role="button" tabindex="0" aria-owns="nav-main-addons-submenu" aria-haspopup="true">{{_('Add-ons')}}</a>
+      <ul aria-expanded="false" id="nav-main-addons-submenu" class="submenu">
+        <li class="first"><a href="https://addons.mozilla.org/firefox/" tabindex="-1">{{_('Desktop Add-ons')}}</a></li>
+        <li><a href="https://addons.mozilla.org/android/" tabindex="-1">{{_('Android Add-ons')}}</a></li>
+        <li class="last"><a href="https://addons.mozilla.org/firefox/themes/" tabindex="-1">{{_('Themes')}}</a></li>
+      </ul>
+    </li>
+    <li id="nav-main-support"><a href="#" role="button" tabindex="0" aria-owns="nav-main-support-submenu" aria-haspopup="true">{{_('Support')}}</a>
+      <ul aria-expanded="false" id="nav-main-support-submenu" class="submenu">
+        <li class="first"><a href="https://support.mozilla.org/products/firefox" tabindex="-1">{{_('Desktop Support')}}</a></li>
+        <li class="last"><a href="https://support.mozilla.org/products/mobile" tabindex="-1">{{_('Android Support')}}</a></li>
+      </ul>
+    </li>
+  </ul>
+</nav>
diff --git a/bedrock/redirects/urls.py b/bedrock/redirects/urls.py
@@ -56,7 +56,7 @@ def tabzilla_css_redirect(r):
     redirect(r'^firefox/brand/downloads/$', 'styleguide.home'),
 
     # Bug 1071318
-    redirect(r'^firefox/mobile/$', 'firefox'),
+    redirect(r'^firefox/mobile/$', 'firefox.android.index'),
 
     # Bug 804810 Identity Guidelines -> Style Guide
     redirect(r'^foundation/identity-guidelines/index.html', 'styleguide.home'),

diff --git a/bedrock/settings/base.py b/bedrock/settings/base.py
@@ -179,6 +179,10 @@ def JINJA_CONFIG():
         'firefox_all': (
             'css/firefox/all.less',
         ),
+        'firefox_android': (
+            'css/base/mozilla-accordion.less',
+            'css/firefox/android.less',
+        ),
         'firefox_unsupported': (
             'css/firefox/unsupported.less',
         ),
@@ -217,10 +221,6 @@ def JINJA_CONFIG():
             'css/sandstone/sandstone-resp.less',
             'css/firefox/desktop/trust.less',
         ),
-        'mobile_features': (
-            'css/firefox/template-resp.less',
-            'css/firefox/mobile-features.less',
-        ),
         'firefox_sms': (
             'css/libs/socialshare/socialshare.less',
             'css/firefox/template-resp.less',
@@ -532,6 +532,16 @@ def JINJA_CONFIG():
             'js/base/mozilla-pager.js',
             'js/firefox/firefox-language-search.js',
         ),
+        'firefox_android': (
+            'js/base/mozilla-accordion.js',
+            'js/libs/jquery.waypoints.min.js',
+            'js/libs/jquery.cycle2.min.js',
+            'js/firefox/sync-animation.js',
+            'js/firefox/android.js',
+        ),
+        'firefox_android_ie9': (
+            'js/libs/matchMedia.addListener.js',
+        ),
         'firefox-resp': (
             'js/libs/jquery-1.11.0.min.js',
             'js/libs/spin.min.js',