diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 906b1bee9..8ca48acfb 100644 --- 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 index 27026d3a5..43df63bba 100644 --- 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 index 1ac085776..718403bc8 100644 --- 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 index 31da7723f..63678ef7e 100644 --- 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" diff --git a/app/assets/stylesheets/home.css.scss b/app/assets/stylesheets/home.css.scss index b5c9902ef..831bd7875 100644 --- a/app/assets/stylesheets/home.css.scss +++ b/app/assets/stylesheets/home.css.scss @@ -1,6 +1,7 @@ // Because
{{alert.msg}} diff --git a/app/views/home/_featured_crop.html.erb b/app/views/home/_featured_crop.html.erb new file mode 100644 index 000000000..89f1e76f6 --- /dev/null +++ b/app/views/home/_featured_crop.html.erb @@ -0,0 +1,15 @@ +
+
+ <%= link_to crop do %> +
+
+
+
+
+

<%= crop.name %>

+
+
+
+ <% end %> +
+
\ No newline at end of file diff --git a/app/views/home/_featured_crops_grid.html.erb b/app/views/home/_featured_crops_grid.html.erb new file mode 100644 index 000000000..07824aa00 --- /dev/null +++ b/app/views/home/_featured_crops_grid.html.erb @@ -0,0 +1,7 @@ +
+
+ <% @featured_crops.each_with_index do |crop, index| %> + + <%= render partial:'featured_crop', object:crop, as:'crop', locals: {index:index} %> + <% end %> +
diff --git a/app/views/pages/home.html.erb b/app/views/home/show.html.erb similarity index 78% rename from app/views/pages/home.html.erb rename to app/views/home/show.html.erb index ac63484ba..a75cf956e 100644 --- a/app/views/pages/home.html.erb +++ b/app/views/home/show.html.erb @@ -11,19 +11,19 @@
-

<%=t '.hero_header' %>

-
    +

    <%=t 'home.hero_header' %>

    +
    • 1
      - <%= t '.step_1' %> + <%= t 'home.step_1' %>
    • 2
      - <%= t '.step_2' %> + <%= t 'home.step_2' %>
    • 3
      - <%= t '.step_3' %> + <%= t 'home.step_3' %>
    <%= form_for :cropsearch, url: crop_search_via_post_path, method: 'post' do |f| %> @@ -32,12 +32,12 @@
    - <%= text_field_tag :q, nil, {class: 'search-input', name: 'cropsearch[q]', placeholder: t('.placeholder'), + <%= text_field_tag :q, nil, {class: 'search-input', name: 'cropsearch[q]', placeholder: t('home.placeholder'), maxlength: '120', autocomplete: 'off', 'ng-model'=>'query', 'ng-change'=> 'search()', 'typeahead'=>'crop.name for crop in crops', 'typeahead-wait-ms'=>'555', ' typeahead-min-length'=>'3'} %>
    - <%= f.submit t('.search'), data: { disable_with: "Searching..." }, class: 'search-button button postfix' %> + <%= f.submit t('home.search'), data: { disable_with: "Searching..." }, class: 'search-button button postfix' %>
    @@ -45,10 +45,16 @@
<% end %>
+ +

<%= t('home.explore_community_favorites') %>

+ +
+
+ <%= render partial: 'featured_crops_grid', object:@featured_crops, locals:{rows:3, cols:3} %> +
-
  • <%= link_to('Mailing List', page_path('mailing-list'), :class=>'hero-link' ) %> @@ -67,7 +73,6 @@ <%= link_to('Code of Conduct',page_path('code_of_conduct'), :class=>'hero-link' ) %>
-
<% content_for(:end_js) do %> <%= javascript_include_tag "home" %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 64e9b6f28..3ab8491d0 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -62,11 +62,11 @@
- <%= f.text_field :q, id: :q, maxlength:"120", class: 'search', placeholder: t('pages.home.placeholder') %> + <%= f.text_field :q, id: :q, maxlength:"120", class: 'search', placeholder: t('home.placeholder') %>
- <%= f.submit t('pages.home.search'), data: { disable_with: "Searching..." }, class: 'small button postfix' %> + <%= f.submit t('home.search'), data: { disable_with: "Searching..." }, class: 'small button postfix' %>
@@ -77,7 +77,7 @@