From 1410b41e8ec9b5feaf189a8c1324cb7226085715 Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Wed, 9 Dec 2015 12:30:38 -0500
Subject: [PATCH] added about menu to mobile menu, added jquery to close menu

---
 css/app.css                | 54 +++++++++++++++++++++++++++--
 header.php                 |  4 +--
 js/app.js                  | 10 ++++++
 js/custom/pageSetup.js     | 10 ++++++
 lib/menu-walker.php        | 11 +++++-
 lib/navigation.php         |  2 +-
 scss/_left-off-canvas.scss |  3 ++
 scss/_page.header.scss     | 71 ++++++++++++++++++++++++++++++++++++--
 scss/_topbar.scss          |  5 ++-
 9 files changed, 159 insertions(+), 11 deletions(-)

diff --git a/css/app.css b/css/app.css
index fd393b4..27be305 100644
--- a/css/app.css
+++ b/css/app.css
@@ -6501,11 +6501,56 @@ header .searchform input[type="submit"]:hover {
   #properties .top-bar .top-bar-section ul#menu-properties li {
     box-shadow: none; }
   #properties .top-bar .top-bar-section ul#menu-properties li ul.dropdown li a {
-    width: 206px !important; } }
+    width: 155px !important; } }
 
 @media only screen and (max-width: 40em) {
   .headerLogo {
-    margin-top: 35px; } }
+    margin-top: 35px; }
+  #properties {
+    left: -58px; }
+  #properties .top-bar-section ul li a {
+    padding: 0px; }
+  #properties .top-bar .top-bar-section ul#menu-properties li a {
+    font-size: 11px !important;
+    letter-spacing: 1px !important; }
+  #properties .top-bar .top-bar-section ul#menu-properties li {
+    width: 130px !important; }
+  #properties .top-bar .top-bar-section ul#menu-properties li ul.dropdown li a {
+    float: left;
+    font-size: 11px !important; }
+  #properties .top-bar .top-bar-section ul#menu-properties li ul.dropdown li {
+    width: 178px !important;
+    float: left !important; }
+  #properties .top-bar .top-bar-section ul#menu-properties li ul.dropdown::after {
+    display: none; }
+  #about {
+    left: -15px;
+    bottom: 5px; }
+  #about .top-bar {
+    overflow: initial; }
+  #about .top-bar .top-bar-section ul#menu-about-staffords li a {
+    font-size: 11px !important;
+    letter-spacing: 1px !important; }
+  #about .top-bar .top-bar-section ul#menu-about-staffords li {
+    width: 161px !important;
+    padding: 0px 10px !important; }
+  #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown li a {
+    float: left;
+    font-size: 11px !important;
+    border-top: 1px solid #6C4F53 !important; }
+  #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown li {
+    width: 178px !important;
+    box-shadow: none;
+    padding: 0px 10px !important;
+    box-shadow: 0px 7px 5px 1px rgba(0, 0, 0, 0.75) !important; }
+  #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown li:first-child {
+    border-top: none !important; }
+  #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown {
+    top: 14px; }
+  #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown::after {
+    display: none; }
+  #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown {
+    right: 11px !important; } }
 
 .contain-to-grid {
   box-shadow: 0 5px 10px -1px #999999; }
@@ -6927,7 +6972,7 @@ header .searchform input[type="submit"]:hover {
         #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown {
           position: relative;
           left: auto !important;
-          right: 0 !important;
+          right: 0;
           min-width: 100px;
           background: #ede6d9;
           margin-top: -15px;
@@ -8560,6 +8605,9 @@ ul.property-list {
     font-size: 1.4375rem;
     letter-spacing: 1px; }
 
+.propertyLabel {
+  margin-left: 8px; }
+
 /* End Mobile Menu */
 /* for the mobile menu */
 #ui-datepicker-div {
diff --git a/header.php b/header.php
index f0e6386..b5d0a06 100644
--- a/header.php
+++ b/header.php
@@ -17,7 +17,7 @@
             <div id="page-wrapper">
                     <header id="header-all" class="show-for-small-up">
                         <div class="row collapse">
-                            <div id="properties" class="small-12 medium-6 large-4 columns">
+                            <div id="properties" class="small-6 medium-6 large-4 columns">
                                 <nav class="top-bar text-center" data-topbar role="navigation">
                                     <section class="top-bar-section">
                                         <?php property_top_bar(); ?>
@@ -25,7 +25,7 @@
                                 </nav>
                             </div>
                             
-                                <div id="about" class="small-12 medium-6 large-4 text-left columns show-for-large-up">
+                                <div id="about" class="small-6 medium-6 large-4 text-right columns show-for-small-up">
                                     <nav class="top-bar" data-topbar role="navigation">
                                         <section class="top-bar-section">
                                             <?php about_top_bar(); ?>
diff --git a/js/app.js b/js/app.js
index b3f304d..b15306b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -204,4 +204,14 @@ $(document).ready(function () {
     $("a:contains('Explore')").attr("href", "#");
     $("a:contains('Play')").attr("href", "#");
     $(".parent-link a:contains('Our Properties')").text("Stafford's Home");
+    $("#menu-item-1823").on("click", function () {
+        $(".parent-link").focus();
+        if($("#about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown").css("display") === "none"){
+            $("#about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown").css("display", "inherit");
+         }
+        $(".parent-link").blur(function (){
+            $("#about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown").css("display", "none");
+        });
+    });
+    
 });
diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index b643e24..61d5c13 100644
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -195,4 +195,14 @@ $(document).ready(function () {
     $("a:contains('Explore')").attr("href", "#");
     $("a:contains('Play')").attr("href", "#");
     $(".parent-link a:contains('Our Properties')").text("Stafford's Home");
+    $("#menu-item-1823").on("click", function () {
+        $(".parent-link").focus();
+        if($("#about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown").css("display") === "none"){
+            $("#about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown").css("display", "inherit");
+         }
+        $(".parent-link").blur(function (){
+            $("#about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown").css("display", "none");
+        });
+    });
+    
 });
diff --git a/lib/menu-walker.php b/lib/menu-walker.php
index 9b348be..1ca6c0b 100644
--- a/lib/menu-walker.php
+++ b/lib/menu-walker.php
@@ -76,6 +76,7 @@ if ( ! function_exists( 'bay_mobile_off_canvas' ) ) {
   function bay_mobile_off_canvas() {
       echo '<ul class="left-off-canvas-list">';
       echo '<li class="page_item"><a href="' . get_bloginfo('url') . '">Stafford\'s Home</a></li>';
+      echo '<h3 class="propertyLabel"> Bay View Inn</h3>';
       wp_nav_menu(array(
           'container' => false,                           // remove nav container
           'container_class' => '',                        // class of container
@@ -97,6 +98,7 @@ if ( ! function_exists( 'art_mobile_off_canvas' ) ) {
   function art_mobile_off_canvas() {
       echo '<ul class="left-off-canvas-list">';
       echo '<li class="page_item"><a href="' . get_bloginfo('url') . '">Stafford\'s Home</a></li>';
+      echo '<h3 class="propertyLabel"> Stafford\'s Art Gallery </h3>';
       wp_nav_menu(array(
           'container' => false,                           // remove nav container
           'container_class' => '',                        // class of container
@@ -118,6 +120,7 @@ if ( ! function_exists( 'river_mobile_off_canvas' ) ) {
   function river_mobile_off_canvas() {
       echo '<ul class="left-off-canvas-list">';
       echo '<li class="page_item"><a href="' . get_bloginfo('url') . '">Stafford\'s Home</a></li>';
+      echo '<h3 class="propertyLabel"> Crooked River Lodge </h3>';
       wp_nav_menu(array(
           'container' => false,                           // remove nav container
           'container_class' => '',                        // class of container
@@ -139,6 +142,7 @@ if ( ! function_exists( 'bridge_mobile_off_canvas' ) ) {
   function bridge_mobile_off_canvas() {
       echo '<ul class="left-off-canvas-list">';
       echo '<li class="page_item"><a href="' . get_bloginfo('url') . '">Stafford\'s Home</a></li>';
+      echo '<h3 class="propertyLabel"> Drawbridge Bistro </h3>';
       wp_nav_menu(array(
           'container' => false,                           // remove nav container
           'container_class' => '',                        // class of container
@@ -160,6 +164,7 @@ if ( ! function_exists( 'perry_mobile_off_canvas' ) ) {
   function perry_mobile_off_canvas() {
       echo '<ul class="left-off-canvas-list">';
       echo '<li class="page_item"><a href="' . get_bloginfo('url') . '">Stafford\'s Home</a></li>';
+      echo '<h3 class="propertyLabel"> Perry Hotel </h3>';
       wp_nav_menu(array(
           'container' => false,                           // remove nav container
           'container_class' => '',                        // class of container
@@ -181,6 +186,7 @@ if ( ! function_exists( 'pier_mobile_off_canvas' ) ) {
   function pier_mobile_off_canvas() {
       echo '<ul class="left-off-canvas-list">';
       echo '<li class="page_item"><a href="' . get_bloginfo('url') . '">Stafford\'s Home</a></li>';
+      echo '<h3 class="propertyLabel"> Pier Restaurant </h3>';
       wp_nav_menu(array(
           'container' => false,                           // remove nav container
           'container_class' => '',                        // class of container
@@ -202,6 +208,7 @@ if ( ! function_exists( 'boat_mobile_off_canvas' ) ) {
   function boat_mobile_off_canvas() {
       echo '<ul class="left-off-canvas-list">';
       echo '<li class="page_item"><a href="' . get_bloginfo('url') . '">Stafford\'s Home</a></li>';
+      echo '<h3 class="propertyLabel"> The Pointer Boat </h3>';
       wp_nav_menu(array(
           'container' => false,                           // remove nav container
           'container_class' => '',                        // class of container
@@ -223,6 +230,7 @@ if ( ! function_exists( 'vacation_mobile_off_canvas' ) ) {
   function vacation_mobile_off_canvas() {
       echo '<ul class="left-off-canvas-list">';
       echo '<li class="page_item"><a href="' . get_bloginfo('url') . '">Stafford\'s Home</a></li>';
+      echo '<h3 class="propertyLabel"> Vacation Rentals</h3>';
       wp_nav_menu(array(
           'container' => false,                           // remove nav container
           'container_class' => '',                        // class of container
@@ -243,6 +251,7 @@ if ( ! function_exists( 'weathervane_mobile_off_canvas' ) ) {
   function weathervane_mobile_off_canvas() {
       echo '<ul class="left-off-canvas-list">';
       echo '<li class="page_item"><a href="' . get_bloginfo('url') . '">Stafford\'s Home</a></li>';
+      echo '<h3 class="propertyLabel"> Weathervane Restaurant</h3>';
       wp_nav_menu(array(
           'container' => false,                           // remove nav container
           'container_class' => '',                        // class of container
@@ -282,7 +291,7 @@ if ( ! function_exists( 'about_mobile_off_canvas' ) ) {
 if ( ! function_exists( 'property_mobile_off_canvas' ) ) {
   function property_mobile_off_canvas() {
       echo '<ul class="left-off-canvas-list">';
-      echo '<li class="page_item"><a href="' . get_bloginfo('url') . '">Stafford\'s Home</a></li>';
+      //echo '<li class="page_item"><a href="' . get_bloginfo('url') . '">Stafford\'s Home</a></li>';
       wp_nav_menu(array(
           'container' => false,                           // remove nav container
           'container_class' => '',                        // class of container
diff --git a/lib/navigation.php b/lib/navigation.php
index feeb6ee..90dd92f 100644
--- a/lib/navigation.php
+++ b/lib/navigation.php
@@ -273,7 +273,7 @@ if ( ! function_exists( 'weathervane_top_bar' ) ) {
 }
 if ( ! function_exists( 'about_top_bar' ) ) {
   function about_top_bar() {
-      wp_nav_menu(array(
+     wp_nav_menu(array(
           'container' => false,                           // remove nav container
           'container_class' => '',                        // class of container
           'menu' => '',                                   // menu name
diff --git a/scss/_left-off-canvas.scss b/scss/_left-off-canvas.scss
index 0370de9..78725c6 100644
--- a/scss/_left-off-canvas.scss
+++ b/scss/_left-off-canvas.scss
@@ -181,4 +181,7 @@ ul.property-list {
         }
     }
 }
+.propertyLabel{
+    margin-left: 8px;
+}
 /* End Mobile Menu */
diff --git a/scss/_page.header.scss b/scss/_page.header.scss
index 6d0d24f..3dc66d5 100644
--- a/scss/_page.header.scss
+++ b/scss/_page.header.scss
@@ -291,15 +291,80 @@ header .searchform input[type="submit"]:hover{
         line-height: 2.25 !important;
     }
     #properties .top-bar .top-bar-section ul#menu-properties li {
-     box-shadow: none;   
+        box-shadow: none;   
     }
     #properties .top-bar .top-bar-section ul#menu-properties li ul.dropdown li a{
-        width: 206px !important;
+        width: 155px !important;
     }
 }
 @media #{$small-only}{
     .headerLogo
     {
-       margin-top: 35px; 
+        margin-top: 35px; 
+    }
+    // PROPERTIES MENU MOBILE MENU
+    #properties{
+        left: -58px;
+    }
+    #properties .top-bar-section ul li a{
+        padding: 0px;
+    }
+    #properties .top-bar .top-bar-section ul#menu-properties li a{
+        font-size: 11px !important;
+        letter-spacing: 1px !important;
+    }
+    #properties .top-bar .top-bar-section ul#menu-properties li{
+        width: 130px !important;
+    }
+    #properties .top-bar .top-bar-section ul#menu-properties li ul.dropdown li a{
+        float: left;
+        font-size: 11px !important;
+    }
+    #properties .top-bar .top-bar-section ul#menu-properties li ul.dropdown li{
+        width: 178px !important;
+        float: left !important;
+    }
+    #properties .top-bar .top-bar-section ul#menu-properties li ul.dropdown::after{
+        display: none;
+    }
+
+    // ABOUT MENU MOBILE MENU
+    #about{
+        left: -15px;
+        bottom: 5px;
+    }
+    #about .top-bar{
+        overflow: initial;
+    }
+    #about .top-bar .top-bar-section ul#menu-about-staffords li a{
+        font-size: 11px !important;
+        letter-spacing: 1px !important;
+    }
+    #about .top-bar .top-bar-section ul#menu-about-staffords li{
+        width: 161px !important;
+        padding: 0px 10px !important;
+    }
+    #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown li a{
+        float: left;
+        font-size: 11px !important;
+        border-top: 1px solid #6C4F53 !important;
+    }
+    #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown li{
+        width: 178px !important;
+        box-shadow: none;
+        padding: 0px 10px !important;
+        box-shadow: 0px 7px 5px 1px rgba(0, 0, 0, 0.75) !important;
+    }
+    #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown li:first-child{
+        border-top: none !important;
+    }
+    #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown{
+        top: 14px;
+    }
+    #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown::after{
+        display: none;
+    }
+    #about .top-bar .top-bar-section ul#menu-about-staffords li ul.dropdown {
+        right: 11px !important;
     }
 }
diff --git a/scss/_topbar.scss b/scss/_topbar.scss
index 3b08d12..2e0ba38 100644
--- a/scss/_topbar.scss
+++ b/scss/_topbar.scss
@@ -556,6 +556,9 @@
                     padding: 0px 25px !important;
                     width: 250px;
                     height: 40px;
+//                    @media #{$small-only}{
+//                        padding: 0px 10px;
+//                }
                     &:before {
                         content: none;
                     }
@@ -587,7 +590,7 @@
                     ul.dropdown {
                         position: relative;
                         left: auto !important;
-                        right: 0 !important;
+                        right: 0;
                         min-width: 100px;
                         background: $cream;
                         margin-top: -15px;
-- 
2.17.1