Merge pull request #285 from warpling/video-homepage

Add "Community Favorite Crops" to home page
openfarmcc · Nov 5, 2014 · c28e5f4 · c28e5f4
2 parents 53bbf8b + 0b6c6ac
commit c28e5f4
Show file tree

Hide file tree

Showing 16 changed files with 365 additions and 159 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -57,3 +57,20 @@ var getIDFromURL = function(key) {
   var result = new RegExp(key + "/([0-9a-zA-Z\-]*)", "i").exec(window.location.pathname);
   return result && unescape(result[1]) || "";
 };
+
+// Smooth anchor scrolling via Chris Coyier
+// http://css-tricks.com/snippets/jquery/smooth-scrolling/
+$(function() {
+  $('a[href*=#]:not([href=#])').click(function() {
+    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+      var target = $(this.hash);
+      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+      if (target.length) {
+        $('html,body').animate({
+          scrollTop: target.offset().top
+        }, 800);
+        return false;
+      }
+    }
+  });
+});
diff --git a/app/assets/javascripts/home.js b/app/assets/javascripts/home.js
@@ -5,3 +5,34 @@ document.createElement('video');
 $(window).unload(function() {
   $.rails.enableFormElements($($.rails.formSubmitSelector));
 });
+
+// Cool title effect for "community favorites"
+$(window).load(function() {
+  // get the  height of the hero
+  var pageHeight = $($('.hero')[0]).height();
+  // get the height including margins of the featured crops title
+  var titleHeight = $($('.explore-community-favorites')[0]).outerHeight(true);
+
+  // On resize, recalculate the above values
+  $(window).resize(function() {
+    pageHeight = $($('.hero')[0]).height();
+    titleHeight = $($('.explore-community-favorites')[0]).outerHeight(true);
+  });
+
+  $(window).scroll(function() {
+    updateTitleBackground($(window).scrollTop(), pageHeight, titleHeight);
+  });
+});
+
+// Darken the title background when the user scrolls to the featured crops header
+function updateTitleBackground(scrollPos, pageHeight, titleHeight) {
+  var exploreCommunityFavoritesTitle = $($('.explore-community-favorites')[0]);
+  // The extra 1px lets smooth scrolling still trigger the change
+  if (scrollPos >= (pageHeight - titleHeight - 1)) {
+    exploreCommunityFavoritesTitle.addClass('full-black');
+  }
+  else {
+    exploreCommunityFavoritesTitle.removeClass('full-black');
+  }
+}
+
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -50,9 +50,18 @@
   clear: both;
 }
 
+.full-cover {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 // Apply this to a row that will vertically center a column
 .row.row-table {
   display: table;
+  table-layout: fixed;
   width: 100%; // Tables will only be as big as they need to without this
 }
 
@@ -64,6 +73,7 @@
 .columns.column-middle {
   display: table-cell;
   vertical-align: middle;
+  float: none;
 }
 
 @import 'font-awesome';

diff --git a/app/assets/stylesheets/guides.css.scss b/app/assets/stylesheets/guides.css.scss
@@ -13,70 +13,72 @@
 
 */
 
-.empty{
-  text-align: center;
-  padding-bottom: 1rem;
-  i{
-    font-size: 1.5rem;
+.guide {
+  .empty{
+    text-align: center;
+    padding-bottom: 1rem;
+    i{
+      font-size: 1.5rem;
+    }
   }
-}
-
-.show-guide-app{
-  position: relative;
-}
-
-.canopy{
-  height: 300px;
-  margin-bottom: 1rem;
-}
 
-.image-wrapper{
-  /*background-image: url(leaf-grey-canopy.png);*/
-  background-position: top;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-  height: 300px;
-  border-bottom: 1px solid rgb(51, 51, 51);
-  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
-}
+  .show-guide-app{
+    position: relative;
+  }
 
-.image-wrapper img{
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -9999px;
-  bottom: -9999px;
-  margin: auto 0;
-  width: 100%;
-}
+  .canopy{
+    height: 300px;
+    margin-bottom: 1rem;
+  }
 
-.title{
-  h2{
-    font-weight: 100;
-    color: $secondary-color;
-    /*font-family: "Helvetica Neue";*/
-    span{
-      color: $of-green;
-      font-weight: 300;
-    }
+  .image-wrapper{
+    /*background-image: url(leaf-grey-canopy.png);*/
+    background-position: top;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    height: 300px;
+    border-bottom: 1px solid rgb(51, 51, 51);
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
   }
-  .edit-link{
+
+  .image-wrapper img{
     position: absolute;
-    top: 1rem;
+    left: 0;
     right: 0;
+    top: -9999px;
+    bottom: -9999px;
+    margin: auto 0;
+    width: 100%;
   }
-}
 
-.actual-requirements{
-  ul{
-    list-style: none;
+  .title{
+    h2{
+      font-weight: 100;
+      color: $secondary-color;
+      /*font-family: "Helvetica Neue";*/
+      span{
+        color: $of-green;
+        font-weight: 300;
+      }
+    }
+    .edit-link{
+      position: absolute;
+      top: 1rem;
+      right: 0;
+    }
   }
-  li{
 
+  .actual-requirements{
+    ul{
+      list-style: none;
+    }
+    li{
+
+    }
   }
 }
 
@@ -86,87 +88,91 @@
 
 */
 
-.box{
-  margin: 2rem 0;
-  padding-top: 1rem;
-}
+.new-guide {
+  .box{
+    margin: 2rem inherit;
+    padding-top: 1rem;
+  }
 
-.create-guide-steps{
-  max-width: 640px;
-  margin-top: 2rem;
-  text-align: center;
-  font-size: .8rem;
-  color: #C69F60;
+  .create-guide-steps{
+    max-width: 640px;
+    margin-top: 2rem;
+    text-align: center;
+    font-size: .8rem;
+    color: #C69F60;
 
-  .step{
-    opacity: .6;
-  }
+    .step{
+      opacity: .6;
+    }
 
-  .active{ 
-    opacity: 1;
+    .active{ 
+      opacity: 1;
+    }
+
+    span{
+      border-radius: 2rem;
+      font-size: .6rem;
+      width: 1.2rem;
+      text-align: center;
+      height: 1.2rem;
+      padding-top: .2rem;
+      vertical-align: middle;
+      display: inline-block;
+      // TODO: Use Compass to DRY
+      background-image: -o-linear-gradient(-89deg, #FFFFFF 0%, #EFF1F4 100%);
+      background-image: -moz-linear-gradient(-89deg, #FFFFFF 0%, #EFF1F4 100%);
+      background-image: -ms-linear-gradient(-89deg, #FFFFFF 0%, #EFF1F4 100%);
+      background-image: linear-gradient(-179deg, #FFFFFF 0%, #EFF1F4 100%);
+      /* Sketch doesnt export pattern fills at this point */
+      border: 1px solid rgba(0,0,0,0.10);
+      -moz-box-shadow:    0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 1px 0px 1px #FFFFFF;
+      box-shadow:         0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 1px 0px 1px #FFFFFF;
+    }
   }
 
-  span{
-    border-radius: 2rem;
-    font-size: .6rem;
-    width: 1.2rem;
-    text-align: center;
-    height: 1.2rem;
-    padding-top: .2rem;
-    vertical-align: middle;
+  form.new-guide{
     display: inline-block;
-    background-image: -o-linear-gradient(-89deg, #FFFFFF 0%, #EFF1F4 100%);
-    background-image: -moz-linear-gradient(-89deg, #FFFFFF 0%, #EFF1F4 100%);
-    background-image: -ms-linear-gradient(-89deg, #FFFFFF 0%, #EFF1F4 100%);
-    background-image: linear-gradient(-179deg, #FFFFFF 0%, #EFF1F4 100%);
-    /* Sketch doesnt export pattern fills at this point */
-    border: 1px solid rgba(0,0,0,0.10);
-    -moz-box-shadow:    0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 1px 0px 1px #FFFFFF;
-    box-shadow:         0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 1px 0px 1px #FFFFFF;
-  }
-}
+    width: 100%;
+    margin: 2rem 0;
 
-form.new-guide{
-  display: inline-block;
-  width: 100%;
-  margin: 2rem 0;
+    .button-wrapper{
+      margin-top: 2rem;
+    }
 
-  .button-wrapper{
-    margin-top: 2rem;
-  }
+    .block{
+      height: 2rem;
+      display: block;
+    }
 
-  .block{
-    height: 2rem;
-    display: block;
+    p{
+      font-size: .9rem;
+      color: #171717;
+      line-height: 1.5rem;
+      margin-bottom: .5rem;
+    }
+    input.button.small.secondary.left{
+      margin-left: .5rem;
+    }
   }
+  .crop-image{
+    background: #fff;
+    width: 100%;
+    height: 124px;
+    border-radius: 2px;
+    border: 0px solid #979797;
+    -moz-box-shadow:    inset 0px 1px 3px 0px rgba(0,0,0,0.20);
+    box-shadow:         inset 0px 1px 3px 0px rgba(0,0,0,0.20);
+    display: inline-block;
+    margin-bottom: 1rem;
 
-  p{
-    font-size: .9rem;
-    color: #171717;
-    line-height: 1.5rem;
-    margin-bottom: .5rem;
-  }
-  input.button.small.secondary.left{
-    margin-left: .5rem;
-  }
-}
-.crop-image{
-  background: #fff;
-  width: 100%;
-  height: 124px;
-  border-radius: 2px;
-  border: 0px solid #979797;
-  -moz-box-shadow:    inset 0px 1px 3px 0px rgba(0,0,0,0.20);
-  box-shadow:         inset 0px 1px 3px 0px rgba(0,0,0,0.20);
-  display: inline-block;
-  margin-bottom: 1rem;
-
-  img.no-image{
-    transform: translate(-50%, -50%);
-    position: relative;
-    top: 50%;
-    left: 50%;
+    img.no-image{
+      transform: translate(-50%, -50%);
+      position: relative;
+      top: 50%;
+      left: 50%;
+    }
   }
 }
 
+
 @import "guides/_edit_guides.css.scss"