Changeset 123

Timestamp:

11/19/2013 08:30:45 AM (11 years ago)

Author:

coffee2code

Message:

jobs.wordpress.net: Properly implement mobile menus. props mercime. see #84

• style.css:
  • Add mobile styles
  • Fix color and padding of main navigation menu-toggle element
  • Add icons to the two mobile menus
  • Fix padding for job category row without any entry
• sidebar.php: Add hooks to enable mobile menu set up of Position Type categories
• navigation.js: Replace navigation.js which handled one menu with jQuery to handle both mobile menus (Position Type and Main Navigation menus)
• functions.php: Move other enqueued stylesheets above the theme's main stylesheet and add jQuery dependency for revised navigation.js

Location:

sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp

Files:

• functions.php (modified) (2 diffs)
• js/navigation.js (modified) (1 diff)
• sidebar.php (modified) (1 diff)
• style.css (modified) (5 diffs)

sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/functions.php

@@ -104 +104 @@
  */
 function jobswp_scripts() {
+    wp_enqueue_style( '996-normalize', get_template_directory_uri() . '/css/996/normalize.css' );
+    wp_enqueue_style( '996-base',      get_template_directory_uri() . '/css/996/base.css' );
+    wp_enqueue_style( '996-grid',      get_template_directory_uri() . '/css/996/grid.css' );
+    wp_enqueue_style( '996-style',     get_template_directory_uri() . '/css/996/style.css' );
+    wp_enqueue_style( 'dashicons' );
+    wp_enqueue_style( 'open-sans' );
     wp_enqueue_style( 'jobswp-style', get_stylesheet_uri() );
 
-    wp_enqueue_script( 'jobswp-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
-
+    wp_enqueue_script( 'jobswp-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery'), '20131107', true );
     wp_enqueue_script( 'jobswp-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
 
@@ -117 +122 @@
         wp_enqueue_script( 'jobswp-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20120202' );
     }
-
-    wp_enqueue_style( '996-normalize', get_template_directory_uri() . '/css/996/normalize.css' );
-    wp_enqueue_style( '996-base',      get_template_directory_uri() . '/css/996/base.css' );
-    wp_enqueue_style( '996-grid',      get_template_directory_uri() . '/css/996/grid.css' );
-    wp_enqueue_style( '996-style',     get_template_directory_uri() . '/css/996/style.css' );
-    wp_enqueue_style( 'dashicons' );
-    wp_enqueue_style( 'open-sans' );
 
     /* Modernizr disbabled because it causes Safari to whitescreen */

sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/js/navigation.js

@@ -2 +2 @@
  * navigation.js
  *
- * Handles toggling the navigation menu for small screens.
+ * Handles toggling the two navigation menus for small screens.
+ *
  */
-( function() {
-    var container, button, menu;
+jQuery(document).ready(function(){
 
-    container = document.getElementById( 'site-navigation' );
-    if ( ! container )
-        return;
+    jQuery('.menu-toggle').click(function () {
+        jQuery('.menu').slideToggle(400, function () {
+            jQuery('.menu').toggleClass('mobile-pop').css('display', '');
+        });
+    });
 
-    button = container.getElementsByTagName( 'h1' )[0];
-    if ( 'undefined' === typeof button )
-        return;
+    jQuery('.menu-jobs-toggle').click(function () {
+        jQuery('.menu-jobs').slideToggle(400, function () {
+            jQuery('.menu-jobs').toggleClass('mobile-pop').css('display', '');
+        });
+    });
 
-    menu = container.getElementsByTagName( 'ul' )[0];
-
-    // Hide menu toggle button if menu is empty and return early.
-    if ( 'undefined' === typeof menu ) {
-        button.style.display = 'none';
-        return;
-    }
-
-    if ( -1 === menu.className.indexOf( 'nav-menu' ) )
-        menu.className += ' nav-menu';
-
-    button.onclick = function() {
-        if ( -1 !== container.className.indexOf( 'toggled' ) )
-            container.className = container.className.replace( ' toggled', '' );
-        else
-            container.className += ' toggled';
-    };
-} )();
+});

sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/sidebar.php

@@ -11 +11 @@
             <aside id="cats" class="widget">
                 <h3 class="widget-title"><?php _e( 'Position Types', 'jobswp' ); ?></h3>
-                <ul>
+                <a href="#" class="menu-jobs-toggle"></a>
+                <ul class="menu-jobs">
                     <li class="job-cat-item job-cat-item-all"><a href="/" title="<?php esc_attr_e( 'View all job openings', 'jobswp' ); ?>"><?php _e( 'All Openings', 'jobswp' ) ?></a></li>
                 <?php Jobs_Dot_WP::list_job_categories(); ?>

sites/trunk/jobs.wordpress.net/public_html/wp-content/themes/jobswp/style.css

@@ -456 +456 @@
     display: none;
 }
+.menu {
+    display: block;
+}
 
 @media screen and (max-width: 600px) {
@@ -759 +762 @@
     color: #21759b;
 }
+
+/* Small menu */
+.menu-jobs-toggle {
+    display: none;
+}
+.menu-jobs {
+    display: block;
+}
+
 .all-job-categories a:hover, .jobs-group a:hover, #secondary #cats li a:hover {
     color: #2EA2CC;
@@ -1246 +1258 @@
     .container .jobs-group .grid_4,
     .container .jobs-group .grid_7,
-    .post-job-job-info {
+    .post-job-job-info,
+    .container .no-job.grid_9 {
         width: 100%;
     }
@@ -1252 +1265 @@
     .container .jobs-group .grid_2,
     .container .jobs-group .grid_4,
-    .container .hentry .grid_3 {
+    .container .hentry .grid_3,
+    .container .no-job.grid_9 {
         padding-left: 20px;
         padding-right: 20px;
@@ -1301 +1315 @@
     }
 
+    #cats {
+        position: relative;
+    }
+    #cats h3 {
+        color: #2ea2cc;
+        margin: 0;
+        padding-bottom: 10px;
+    }
+    #cats h3:after {
+        content: '\f228';
+        font: 16px 'dashicons';
+        float: right;
+        vertical-align: top;
+    }
+    .menu-jobs {
+        display: none;
+        margin-top: 10px;
+    }
+    .menu-jobs.mobile-pop {
+        display: block;
+    }
+    .menu-jobs-toggle {
+        background: transparent;
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 50px;
+    }
     #wporg-footer {
         min-width: inherit;
     }
 }
+@media only screen and (max-width: 600px) {
+    .menu {
+        display: none;
+    }
+    .menu.mobile-pop {
+        display: block;
+    }
+    .menu-toggle {
+        color: #ddd;
+        display: block;
+        font-size: 18px;
+        padding-bottom: 20px;
+        text-align: center;
+    }
+    .menu-toggle:after {
+        content: '\f228';
+        font: 16px 'dashicons';
+        margin-left: 15px;
+        vertical-align: middle;
+    }
+}