Code for golf course video tab navigation

diff --git a/css/app.css b/css/app.css
index f0994fa..ffb2eb0 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -7198,6 +7198,40 @@ main.search-results #head-img {
   #content-bulk footer img {
     box-shadow: none; }
 
+ul#golfCourseVideoTabs {
+  border-bottom: 1px solid lightgrey;
+  float: left;
+  padding-bottom: 2px; }
+  ul#golfCourseVideoTabs li.video-tab {
+    list-style: none;
+    float: left;
+    margin: 0 3px; }
+    ul#golfCourseVideoTabs li.video-tab.active a.video-tab-link {
+      color: black;
+      border-color: lightgrey;
+      background-color: #f8f8f8; }
+  ul#golfCourseVideoTabs a.video-tab-link {
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    border-width: 1px 1px 0 1px;
+    border-style: solid;
+    border-color: white;
+    padding: 5px 10px;
+    transition: all 0.2s linear;
+    -moz-transition: all 0.2s linear;
+    -webkit-transition: all 0.2s linear;
+    -o-transition: all 0.2s linear; }
+    ul#golfCourseVideoTabs a.video-tab-link:hover {
+      border-color: lightgrey;
+      background-color: #f8f8f8; }
+      ul#golfCourseVideoTabs a.video-tab-link:hover a.video-tab-link {
+        background-color: #f8f8f8; }
+
+.responsiveTabs-content .responsiveTabs-pane.tab-pane {
+  display: none; }
+.responsiveTabs-content .responsiveTabs-pane.tab-pane.active {
+  display: block; }
+
 #slideshow {
   position: relative;
   margin-top: -80px;

diff --git a/js/app.js b/js/app.js
index 8dd6037..1f8fa84 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -27,11 +27,10 @@ $(document).ready(function () {
     // cache everything once
     var page = $("body");
 
-    var offcanvas_menu_items    = page.find(".left-off-canvas-menu").children("ul.left-off-canvas-list").children('li');
+    var offcanvas_menu_items = page.find(".left-off-canvas-menu").children("ul.left-off-canvas-list").children('li');
 
     // disable the links for top nav items that have subpages
     $('.top-bar-section > div > ul > li').each( function () {
-        console.log("test");
         if ( $(this).hasClass("menu-item-has-children") ){
             $(this).children("a").on('click', function(e){
                 e.preventDefault();
@@ -47,4 +46,18 @@ $(document).ready(function () {
             });
         }
     });
+
+    $('a.video-tab-link').click('click', function(e) {
+        e.preventDefault();
+        if ( $(this).parent().not('.active') ) {
+            $('li.video-tab.active').removeClass('active');
+            $(this).parent().addClass('active');
+        }
+        if ( $($(this).attr('href')).not('.active') ) {
+            console.log($(this).attr('href'));
+            $('.responsiveTabs-pane.active').removeClass('active');
+            $($(this).attr('href')).addClass('active');
+        }
+
+    });
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 3819dee..c159f16 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -18,11 +18,10 @@ $(document).ready(function () {
     // cache everything once
     var page = $("body");
 
-    var offcanvas_menu_items    = page.find(".left-off-canvas-menu").children("ul.left-off-canvas-list").children('li');
+    var offcanvas_menu_items = page.find(".left-off-canvas-menu").children("ul.left-off-canvas-list").children('li');
 
     // disable the links for top nav items that have subpages
     $('.top-bar-section > div > ul > li').each( function () {
-        console.log("test");
         if ( $(this).hasClass("menu-item-has-children") ){
             $(this).children("a").on('click', function(e){
                 e.preventDefault();
@@ -38,4 +37,18 @@ $(document).ready(function () {
             });
         }
     });
+
+    $('a.video-tab-link').click('click', function(e) {
+        e.preventDefault();
+        if ( $(this).parent().not('.active') ) {
+            $('li.video-tab.active').removeClass('active');
+            $(this).parent().addClass('active');
+        }
+        if ( $($(this).attr('href')).not('.active') ) {
+            console.log($(this).attr('href'));
+            $('.responsiveTabs-pane.active').removeClass('active');
+            $($(this).attr('href')).addClass('active');
+        }
+
+    });
 });

diff --git a/scss/_main.scss b/scss/_main.scss
index 6833362..5926b93 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -276,3 +276,53 @@ main.search-results {
         }
     }
 }
+ul#golfCourseVideoTabs {
+    border-bottom: 1px solid lightgrey;
+    float: left;
+    padding-bottom: 2px;
+    li.video-tab {
+        list-style: none;
+        float: left;
+        margin: 0 3px;
+        &.active {
+            a.video-tab-link {
+                color: black;
+                border-color: lightgrey;
+                background-color: #f8f8f8;
+            }
+        }
+    }
+
+    a.video-tab-link {
+        border-top-right-radius: 5px;
+        border-top-left-radius: 5px;
+        border-width: 1px 1px 0 1px;
+        border-style: solid;
+        border-color: white;
+        padding: 5px 10px;
+        transition: all .2s linear;
+        -moz-transition: all .2s linear;
+        -webkit-transition: all .2s linear;
+        -o-transition: all .2s linear;
+        &:hover {
+            border-color: lightgrey;
+            background-color: #f8f8f8;
+            a.video-tab-link {
+                background-color: #f8f8f8;
+            }
+        }
+
+    }
+
+}
+
+.responsiveTabs-content {
+
+    .responsiveTabs-pane.tab-pane {
+        display: none;
+    }
+    .responsiveTabs-pane.tab-pane.active {
+        display: block;
+    }
+
+}
\ No newline at end of file