Changeset 123

Timestamp:

11/19/2013 08:30:45 AM (13 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;
+        }
+}