updating glmThemeV6
authorIan Weller <ian@gaslightmedia.com>
Fri, 19 Aug 2016 15:36:53 +0000 (11:36 -0400)
committerIan Weller <ian@gaslightmedia.com>
Fri, 19 Aug 2016 15:36:53 +0000 (11:36 -0400)
I took some code I have place in the Camp Petosega Rebuild with Foundation
6 and placed them into the glmTheme. The files with the most general
changes in the Petosega Rebuild have been altered in the glmThemeV6.
Things should go a bit smoother with the next project.

root/index.php
root/lib/menu-walker.php
root/lib/navigation.php
root/scss/_left-off-canvas.scss
root/scss/app.scss

index 5b418fc..92fe074 100644 (file)
@@ -41,9 +41,9 @@
   </head>
 </editor-fold>
   <body>
-      <div class="off-canvas-wrap" data-offcanvas>
-        <div class="inner-wrap">
-            <div id="page-wrapper">
+      <div class="off-canvas-wrapper">
+        <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
+            <div class="off-canvas-content" data-off-canvas-content>
 
 <?php
 /*
 ?>
 <?php
 /*
- * 3. Top Bar
- * The main navigation for the site. Bar Navigantion
- */
-?>
-<editor-fold defaultstate="collapsed">
-                    <nav class="top-bar text-center show-for-large-up" data-topbar role="navigation">
-                        <section class="top-bar-section">
-                            <?php glm_theme_top_bar(); ?>
-                        </section>
-                    </nav>
-                    <nav class="tab-bar show-for-medium-down">
-                        <section class="left-small">
-                            <a class="left-off-canvas-toggle menu-icon" href="#"><span>Menu</span></a>
-                        </section>
-                    </nav>
-</editor-fold>
-<?php
-/*
- * 3. /Top Bar
- * End of main navigation. End of Bar Navigation
- */
-?>
-<?php
-/*
- * 4. Off Canvas
+ * 3. Off Canvas
  * Hidden Off Canvas Menu
  */
 ?>
 <editor-fold defaultstate="collapsed">
-                    <aside class="left-off-canvas-menu hide-for-large-up">
+                    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="large">
+                        <div class="title-bar-left">
+                            <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
+                            <span class="title-bar-title">Menu</span>
+                        </div>
+                        <div class="title-bar-right">
+                            <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
+                          </div>
+                    </div>
+                    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
                         <?php glm_theme_mobile_off_canvas(); ?>
                         <?php get_template_part('parts/search-form');?>
                         <?php if (function_exists('glm_get_clientinfo_option')) :?>
-                            <ul>
+                            <ul class="vertical">
                                 <li><?php echo glm_get_clientinfo_option('businessName');?></li>
                                 <?php if (glm_get_clientinfo_option('address')):?>
                                     <li><?php echo glm_get_clientinfo_option('address');?></li>
                                 <?php endif;?>
                             </ul>
                             <?php endif;?>
-                    </aside>
-                    <!--
-                    <aside class="right-off-canvas-menu">
-
-                    </aside>-->
+                    </div>
+                    
 <?php
 /*
- * 4. /Off Canvas 
+ * 3. /Off Canvas 
  * End of Off Canvas Menu
  */
 ?>
 </editor-fold>
+<?php
+/*
+ * 4. Top Bar
+ * The main navigation for the site. Bar Navigantion
+ */
+?>
+<editor-fold defaultstate="collapsed">
+                    <div id="main-menu" class="top-bar">
+                        <div class="top-bar-left">
+                            
+                            <?php glm_theme_top_bar(); ?>
+                        </div>
+                        
+                    </div>
+</editor-fold>
+<?php
+/*
+ * 4. /Top Bar
+ * End of main navigation. End of Bar Navigation
+ */
+?>
+
 <?php
 /*
  * 5. Main
  */
 ?>
 </editor-fold>
-            </div><!--/#page-wrapper-->
-        <a class="exit-off-canvas"></a>
+                
+            <div class="js-off-canvas-exit"></div>
+            </div><!--/.off-canvas-content-->     
         </div><!--End of inner-wrap-->
       </div><!--End of off-canvas-->
   <?php wp_footer();?>
index 64b5a96..541d5f8 100644 (file)
@@ -11,7 +11,7 @@ class Glm_Theme_Top_Bar_Walker extends Walker_Nav_Menu {
         }
         $element->has_children = ! empty( $children_elements[ $element->ID ] );
         $element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : '';
-        $element->classes[] = ( $element->has_children && 1 !== $max_depth ) ? 'has-dropdown' : '';
+        $element->classes[] = ( $element->has_children && 1 !== $max_depth ) ? '' : '';
         $element->classes[] = ( $element->post_parent == 0 && $mainLevelCounter < 6 ) ? '' : 'drop-left';
         parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
     }
@@ -24,7 +24,7 @@ class Glm_Theme_Top_Bar_Walker extends Walker_Nav_Menu {
         $item_style = '';
         if ($depth == 0 && has_post_thumbnail((int)$object->object_id)) {
             $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id((int)$object->object_id), 'large');
-            $item_style .= "<style>#menu-item-".$object->ID." > .dropdown:before { background-image: url('".$thumbnail[0]."');</style>";
+            $item_style .= "<style>#menu-item-".$object->ID." > li:before { background-image: url('".$thumbnail[0]."');</style>";
         }
         //$output .= ( 0 == $depth ) ? '<li class="divider"></li>' : '';
         $classes = empty( $object->classes ) ? array() : (array) $object->classes;
@@ -41,7 +41,7 @@ class Glm_Theme_Top_Bar_Walker extends Walker_Nav_Menu {
     }
 
     function start_lvl( &$output, $depth = 0, $args = array() ) {
-        $output .= "\n<ul class=\"sub-menu dropdown\">\n";
+        $output .= "\n<ul class=\"menu vertical\">\n";
     }
 }
 endif;
@@ -70,7 +70,7 @@ class Glm_Theme_Off_Canvas_Walker extends Walker_Nav_Menu {
     }
 
     function start_lvl( &$output, $depth = 0, $args = array() ) {
-        $output .= "\n<ul class=\"children\">\n";
+        $output .= "\n<ul class=\"children menu submenu vertical\">\n";
     }
 
     function end_lvl(&$output, $depth = 0, $args = array()){
index f5b5d91..f78f527 100644 (file)
@@ -8,21 +8,29 @@ register_nav_menus(array(
  * Top Bar
  */
 if ( ! function_exists( 'glm_theme_top_bar' ) ) {
-  function glm_theme_top_bar() {
-      wp_nav_menu(array(
-          'container' => false,                           // remove nav container
-          'container_class' => '',                        // class of container
-          'menu' => '',                                   // menu name
-          'menu_class' => '',                             // adding custom nav class
-          'theme_location' => 'top-bar',                  // where it's located in the theme
-          'before' => '',                                 // before each link <a>
-          'after' => '',                                  // after each link </a>
-          'link_before' => '',                            // before each link text
-          'link_after' => '',                             // after each link text
-          'depth' => 3,                                   // limit the depth of the nav
-          'fallback_cb' => false,                         // fallback function (see below)
-          'walker' => new Glm_Theme_Top_Bar_Walker()
+    function glm_theme_top_bar() {
+        echo '<ul class="dropdown menu" data-dropdown-menu>';
+        echo glm_theme_top_bar_nav( 'top-bar' );
+        echo '</ul>';
+    }
+    
+  function glm_theme_top_bar_nav($theme_location) {
+    $menu = wp_nav_menu(array(
+        'echo'            => false,             // don't echo
+        'container'       => false,             // remove nav container
+        'container_class' => '',                // class of container
+        'menu'            => '',                // menu name
+        'menu_class'      => '',                // adding custom nav class
+        'theme_location'  => $theme_location,   // where it's located in the theme
+        'before'          => '',                // before each link <a>
+        'after'           => '',                // after each link </a>
+        'link_before'     => '',                // before each link text
+        'link_after'      => '',                // after each link text
+        'depth' => 3,                           // limit the depth of the nav
+        'fallback_cb' => false,                 // fallback function (see below)
+        'walker' => new Glm_Theme_Top_Bar_Walker()
       ));
+      return preg_replace( array( '%^<ul[^>]*>%', '%</ul>$%' ), '', $menu );
   }
 }
 
@@ -31,10 +39,9 @@ if ( ! function_exists( 'glm_theme_top_bar' ) ) {
  */
 if ( ! function_exists( 'glm_theme_mobile_off_canvas' ) ) {
     function glm_theme_mobile_off_canvas() {
-        echo '<div class="left-off-canvas-list">';
-        echo '<ul><li class="page_item"><a href="' . get_bloginfo('url') . '">Home</a></li>';
+        echo '<ul class="vertical dropdown menu" data-dropdown-menu><li class="page_item"><a href="' . get_bloginfo('url') . '">Home</a></li>';
         echo glm_get_mobile_nav_menu( 'top-bar' );
-        echo '</ul></div>';
+        echo '</ul>';
     }
 }
 
index 0b34ddc..b630a7c 100644 (file)
@@ -1,25 +1,26 @@
 /* for the mobile menu */
-aside.left-off-canvas-menu {
+div.off-canvas {
+    height: 100%;
 //  background-color: rgba(0, 0, 0, 0.7);
 //  color: white;
 }
-aside.left-off-canvas-menu li.page_item {
+div.off-canvas li {
   display: block;
   overflow: hidden;
   position: relative;
   padding: 4px 8px;
 }
-aside.left-off-canvas-menu .off-canvas-list ul li a {
+div.off-canvas ul li a {
   line-height: 20px;
-  color: white;
-  border-bottom: 1px solid #b1b3b6;
+//  color: white;
+//  border-bottom: 1px solid #b1b3b6;
   background-repeat: no-repeat;
   background-position: 3px 50%;
 }
-aside.left-off-canvas-menu li.page_item_has_children a.toggle {
+div.off-canvas li.page_item_has_children a.toggle {
   position: absolute;
-  right: 10px;
-  top: 5px;
+  right: 0;
+  top: 15px;
     text-decoration: none;
     &:before {
         @include off-canvas-point(right, $white, 17px);
@@ -28,21 +29,27 @@ aside.left-off-canvas-menu li.page_item_has_children a.toggle {
         background: transparent;
     }
 }
-aside.left-off-canvas-menu li.page_item_has_children a.toggle.open {
+div.off-canvas li.page_item_has_children a.toggle.open {
     @include off-canvas-point(down, $white);
 }
-aside.left-off-canvas-menu ul.children {
+div.off-canvas ul.children {
   display: none;
 }
-aside.left-off-canvas-menu .off-canvas-list ul li > ul li > a {
+
+div.off-canvas ul li > ul li > a {
   padding-left: 10px;
   margin-left: 25px;
   line-height: 18px;
 }
-aside.left-off-canvas-menu ul.open {
-  display: block;
+div.off-canvas ul.open {
+    display: block;
+    &.is-dropdown-submenu {
+        left: 0;
+        top: 45px;
+        position: static;
+    }
 }
-.left-off-canvas-menu {
+div.off-canvas ul.menu {
         list-style: none;
         li {
             a {
index e89d0c7..5799bec 100644 (file)
@@ -4,23 +4,6 @@
 @import 'foundation';
 @import 'motion-ui';
 @import "mixins";
-@import "wordpress";
-@import "defaults";
-@import "body";
-@import "page.header";
-@import "topbar";
-@import "main";
-@import "slideshow";
-@import "plugins";
-@import "blog";
-@import "sidebar";
-@import "search";
-@import "page.footer";
-@import "copyright";
-@import "structure";
-@import "left-off-canvas";
-//@import "right-off-canvas";
-
 @include foundation-global-styles;
 @include foundation-grid;
 // @include foundation-flex-grid;
 //
 @include motion-ui-transitions;
 @include motion-ui-animations;
+@import "wordpress";
+@import "defaults";
+@import "body";
+@import "page.header";
+@import "topbar";
+@import "main";
+@import "slideshow";
+@import "plugins";
+@import "blog";
+@import "sidebar";
+@import "search";
+@import "page.footer";
+@import "copyright";
+@import "structure";
+@import "left-off-canvas";
+//@import "right-off-canvas";
+
+