From 22590bf87f639eb0bb6c0f2ae9fb517fa092cd33 Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Thu, 8 Jun 2017 16:33:08 -0400
Subject: [PATCH] removing sticky styles from the mobile and tablet view

fixing the js and styles so that there is enough padding on the main page content in mobile
and tablet view
---
 css/app.css            | 47 +++++++++++++++++++++++++-----------------
 header.php             |  2 +-
 js/app.js              | 15 ++++++++++----
 js/custom/pageSetup.js | 15 ++++++++++----
 scss/_main.scss        |  8 +++++++
 scss/_slideshow.scss   |  1 +
 6 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/css/app.css b/css/app.css
index 7701305..2423dc8 100644
--- a/css/app.css
+++ b/css/app.css
@@ -6636,27 +6636,36 @@ main {
   height: 300px; }
 
 @media only screen and (max-width: 40em) {
-  #slideshow {
-    height: 270px; } }
-#slideshow li {
-  list-style: none; }
-  @media only screen and (min-width:40.063em) and (max-width:64em) {
-    #slideshow li {
-      height: 386px; } }
+  .page-inside, .page-front {
+    padding-top: 150px; } }
+@media only screen and (min-width:40.063em) and (max-width:64em) {
+  .page-inside, .page-front {
+    padding-top: 100px; } }
+
+#slideshow {
+  margin-top: 10px; }
   @media only screen and (max-width: 40em) {
-    #slideshow li {
+    #slideshow {
       height: 270px; } }
-  #slideshow li img {
-    max-height: 386px; }
-#slideshow #caption {
-  background: rgba(0, 0, 0, 0.75);
-  color: #FFFFFF;
-  margin-top: -51px; }
-  #slideshow #caption p {
-    padding: 10px 5px;
-    font-size: 12px;
-    margin: 0;
-    text-align: right; }
+  #slideshow li {
+    list-style: none; }
+    @media only screen and (min-width:40.063em) and (max-width:64em) {
+      #slideshow li {
+        height: 386px; } }
+    @media only screen and (max-width: 40em) {
+      #slideshow li {
+        height: 270px; } }
+    #slideshow li img {
+      max-height: 386px; }
+  #slideshow #caption {
+    background: rgba(0, 0, 0, 0.75);
+    color: #FFFFFF;
+    margin-top: -51px; }
+    #slideshow #caption p {
+      padding: 10px 5px;
+      font-size: 12px;
+      margin: 0;
+      text-align: right; }
 
 /* NextGen Gallery */
 .ngg-gallery-thumbnail, .ngg-gallery-thumbnail-box {
diff --git a/header.php b/header.php
index 763350d..e522e19 100644
--- a/header.php
+++ b/header.php
@@ -17,7 +17,7 @@
       <div class="off-canvas-wrap" data-offcanvas>
         <div class="inner-wrap">
             <div id="page-wrapper">
-                    <header class="sticky">
+                    <header class="sticky fixed">
                         <div class="row collapse">
                             <div id="logo" class="small-12 small-text-center large-text-left large-6 columns">
                                 <a href="<?php bloginfo('url');?>"><img alt="Petoskey.com" src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/petoskey-dot-com-logo.png"></a>
diff --git a/js/app.js b/js/app.js
index e1084a9..327714b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -53,6 +53,7 @@ $(document).ready(function () {
 
     var slideshow = $("#slideshow");
     var body = $("body");
+    var page = body.find('#page-wrapper main');
     var sticky = $(".sticky");
     var width;
     var page_front = $(".page-front");
@@ -60,8 +61,12 @@ $(document).ready(function () {
     
     if($(window).width() > 1023){
         sticky.addClass("fixed");
-        $(page_front).css("padding-top", "53px");
+       page.css("padding-top", "53px");
 //        $(slideshow).css("margin-top", "20px");
+    } else  if($(window).width() < 1023 && $(window).width() > 640){
+         page.css("padding-top", "100px");
+    } else {
+         page.css("padding-top", "150px");
     }
     
     $(window).resize( function () {
@@ -73,7 +78,7 @@ $(document).ready(function () {
         } else if(width > 639 && width < 1025){
 //            $(page_front).css("padding-top", "155px");
         } else if(width > 1024){
-            $(page_front).css("padding-top", "53px");
+            page.css("padding-top", "53px");
 //            $(slideshow).css("margin-top", "20px");
         }
     });
@@ -84,8 +89,10 @@ $(document).ready(function () {
 
 //        if(width > 319 && width < 641 ){
 //            $(page_front).css("padding-top", "200px");
-//        } else if(width > 639 && width < 1025){
-//            $(page_front).css("padding-top", "155px");
+        if(width < 1024){
+            sticky.removeClass("fixed");
+            page.css("padding-top", "0px");
+        }
 //        } else if(width > 1024){
 //            $(page_front).css("padding-top", "65px");
 //            $(slideshow).css("margin-top", "20px");
diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 9c1fc26..d830b27 100644
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -44,6 +44,7 @@ $(document).ready(function () {
 
     var slideshow = $("#slideshow");
     var body = $("body");
+    var page = body.find('#page-wrapper main');
     var sticky = $(".sticky");
     var width;
     var page_front = $(".page-front");
@@ -51,8 +52,12 @@ $(document).ready(function () {
     
     if($(window).width() > 1023){
         sticky.addClass("fixed");
-        $(page_front).css("padding-top", "53px");
+       page.css("padding-top", "53px");
 //        $(slideshow).css("margin-top", "20px");
+    } else  if($(window).width() < 1023 && $(window).width() > 640){
+         page.css("padding-top", "100px");
+    } else {
+         page.css("padding-top", "150px");
     }
     
     $(window).resize( function () {
@@ -64,7 +69,7 @@ $(document).ready(function () {
         } else if(width > 639 && width < 1025){
 //            $(page_front).css("padding-top", "155px");
         } else if(width > 1024){
-            $(page_front).css("padding-top", "53px");
+            page.css("padding-top", "53px");
 //            $(slideshow).css("margin-top", "20px");
         }
     });
@@ -75,8 +80,10 @@ $(document).ready(function () {
 
 //        if(width > 319 && width < 641 ){
 //            $(page_front).css("padding-top", "200px");
-//        } else if(width > 639 && width < 1025){
-//            $(page_front).css("padding-top", "155px");
+        if(width < 1024){
+            sticky.removeClass("fixed");
+            page.css("padding-top", "0px");
+        }
 //        } else if(width > 1024){
 //            $(page_front).css("padding-top", "65px");
 //            $(slideshow).css("margin-top", "20px");
diff --git a/scss/_main.scss b/scss/_main.scss
index 64cf03f..62f7775 100644
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -189,3 +189,11 @@ main {
     top: 150px;
     height: 300px;
 }
+.page-inside, .page-front{
+    @media#{$small-only}{
+        padding-top: 150px;
+    }
+    @media#{$medium-only}{
+        padding-top: 100px;
+    }
+}
\ No newline at end of file
diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss
index c445b54..c85949d 100644
--- a/scss/_slideshow.scss
+++ b/scss/_slideshow.scss
@@ -1,4 +1,5 @@
 #slideshow {
+    margin-top: 10px;
     @media #{$small-only}{
         height: 270px;
     }
-- 
2.17.1