Updated README.md with applications info

Updated applications page

source/javascripts/applications/categories_scroller.js

+$((function () {
+  // Selects any text that contains a has and captures the characters after the hash
+  var HASH_REGEX = /^.*?#(.*)/;
+
+  var ApplicationCategoriesScroller = {
+    init: function init($container, categoryDelegationSelector) {
+      this.$body = $('body');
+      this.navHeight = $('nav.navbar').outerHeight() || 0;
+      this.$container = $container;
+      this.categoryDelegationSelector = categoryDelegationSelector;
+
+      this.bindEvent();
+    },
+
+    bindEvent: function bindEvent() {
+      $(window).on('load.scrollToCategory', this.scrollToCategory.bind(this));
+      this.$container.on(
+        'click.scrollToCategory',
+        this.categoryDelegationSelector,
+        this.scrollToCategory.bind(this)
+      );
+    },
+
+    scrollToCategory: function scrollToCategory(e) {
+      var id = e.type === 'click' ? e.currentTarget.href.replace(HASH_REGEX, '#$1') : location.hash;
+
+      if (!id) return;
+
+      var $anchor = $('.category-applications' + id);
+
+      this.$body.animate({ scrollTop: $anchor.offset().top - this.navHeight - 150 });
+    },
+  };
+
+  ApplicationCategoriesScroller.init($('.app-categories'), '.app-category > a');
+}).call(this));

source/javascripts/applications.js → source/javascripts/applications/search_bar.js

@@ -18,7 +18,7 @@
   var scrollToElement = function() {
     var container = $('html, body');
-        scrollTo = $('h4:icontains("'+this.searchContainer.val()+'")');
+        scrollTo = $('.js-application-title:icontains("'+this.searchContainer.val()+'")');
     container.animate({
         scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop() - 180
     });
@@ -39,7 +39,7 @@
       $(this).next('.row').each(function () {
         $(this).show();
       });
-      $(this).next('.row').find('h4').each(function() {
+      $(this).next('.row').find('.js-application-title').each(function() {
         $(this).closest('.col-md-4').show();
       });
       $(this).prev('hr').show();
@@ -50,7 +50,7 @@
     var regex = new RegExp(searchQuery, 'gi');
     var allAppsHidden = true;
     this.appListDOM.each(function () {
-      var appsInCategory = $(this).next('.row').find('h4');
+      var appsInCategory = $(this).next('.row').find('.js-application-title');
       var appCategoryRows = $(this).next('.row');
       var categorySeparator = $(this).prev('hr');
       var hideCategoryTitle = true;
@@ -85,7 +85,7 @@
       return '<li>'+application+'</li>'
     }).join('');
     this.suggestions.html(html);
-    this.suggestionsListElements = $('.suggestions li');
+    this.suggestionsListElements = $('.js-suggestions li');
     this.suggestionsListElements.on('click touchstart', function(e) {
       e.stopPropagation();
       var target = $(e.target);
@@ -161,15 +161,15 @@
   this.ApplicationSearchBar = (function() {
     function ApplicationSearchBar(){
-      this.searchContainer = $('.search-apps');
-      this.suggestions = $('.suggestions');
-      this.suggestionsListElements = $('.suggestions li');
+      this.searchContainer = $('.js-search-apps');
+      this.suggestions = $('.js-suggestions');
+      this.suggestionsListElements = $('.js-suggestions li');
       this.searchIcon = $('.search');
       this.resetIcon = $('.reset');
       this.resetIcon.hide();
-      this.appListDOM = $('.app-list').find('h2');
+      this.appListDOM = $('.js-app-list').find('.js-category-title');
       var applicationTitles = [];
-      $('.app-list').find('h4').each(function() {
+      $('.js-app-list').find('.js-application-title').each(function() {
         applicationTitles.push($(this).text().trim());
       });
       this.applicationTitles = filterDuplicatesArray(applicationTitles);

source/javascripts/scroll_to_top.js

+$((function () {
+  var ScrollToTop = {
+    init: function init($container) {
+      this.$container = $container;
+
+      this.$htmlBody = $('html, body');
+      this.$fixedNavbar = $('.navbar-fixed-top');
+
+      this.affixContainer();
+
+      this.bindEvent();
+    },
+
+    affixContainer: function affixContainer() {
+      var offsetTop = $('.affix-threshold').offset().top;
+      if (this.$fixedNavbar) offsetTop -= this.$fixedNavbar.height();
+
+      this.$container.affix({ offset: { top: offsetTop } });
+    },
+
+    bindEvent: function bindEvent() {
+      this.$container.on(
+        'click.scrollToTop',
+        this.$htmlBody.animate.bind(this.$htmlBody, { scrollTop: 0 })
+      );
+    },
+  };
+
+  ScrollToTop.init($('.js-scroll-to-top'));
+}).call(this));

source/stylesheets/_variables.scss

@@ -150,9 +150,7 @@ $reseller-hero-bg-color: #35393d;
 $reseller-hero-content-color: #969696;
 $reseller-category-active-background-color: rgba(255, 255, 255, .4);
-
-
-$applications-highlight-color: #ffc600;
+$applications-search-box-shadow-color: rgba($color-dark, .5);
 $features-gradient-end: rgba(148, 149, 150, 1);
 $features-gradient-begin: rgba(0, 0, 0, .91);

source/stylesheets/applications.css.scss

 @import "variables";
-p {
-  font-size: 17px;
-  font-weight: 200;
-}
-
-h2 {
-  text-align: center;
-  margin-top: 16px;
-  padding: 14px;
-  color: $applications-title-color;
-  border-bottom: solid 4px $color-secondary-alt;
-}
-
-hr {
-  margin: 20px 0;
-}
-
 .application-container {
-  position: relative;
   width: 100%;
-  height: 125px;
-  overflow: hidden;
-  background: $color-primary;
-  background-size: cover;
-}
-
-.application-overlay {
-  background: rgba($color-primary, .62);
-  height: 500px;
-}
-
-.application-content {
-  padding-top: 25px;
+  padding: 67px;
+  background: linear-gradient(to right,
+    $features-gallery-background-gradient-end 0%,
+    $features-gallery-background-gradient-middle 40%,
+    $features-gallery-background-gradient-begin 100%);
   text-align: center;
-  color: $color-white;
-  width: 50%;
-  margin-left: 25%;
-}
-.container-text {
-  padding: 2%;
-}
-
-.row {
-  padding-top: 15px;
-}
-.app {
-  margin-bottom: 15px;
-  box-shadow: 0 3px 4px $applications-app-shadow-color;
-  padding: 10px;
-  min-height: 175px;
-  background-color: $color-white;
+  h1 {
+    color: $color-white;
+    font-weight: 100;
+    padding-bottom: 30px;
+  }
+  p {
+    color: $color-gray-light;
+    font-size: 22px;
+    font-weight: lighter;
+  }
 }
 .search-container {
   width: 100%;
   position: relative;
-  z-index: 1;
-}
-.search-apps {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid $border-color;
-  border-radius: 4px;
-  position: relative;
-  z-index: 2;
+  background-color: $color-gray-extra-light;
+  border-top: 1px solid $color-gray-light;
+  border-bottom: 1px solid $color-gray-light;
+  .container {
+    position: relative;
+    display: flex;
+  }
+
+  input {
+    width: 100%;
+    height: 56px;
+    background-color: transparent;
+    border: 0;
+    font-weight: 100;
+    font-size: 22px;
+    flex-grow: 1;
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  .search-apps-container-icon {
+    color: $search-border-color;
+    cursor: pointer;
+    align-self: center;
+  }
 }
+
 // scss-lint:disable all
 .selected-suggestion {
   background: $dropdown-hover-color !important;
@@ -80,10 +66,13 @@ hr {
   position: absolute;
   left: 0;
   right: 0;
-  z-index: 3;
+  z-index: 1;
+  box-shadow: $applications-search-box-shadow-color 0 2px 4px;
+  background: $color-white;
   li {
-    background: $color-white;
+    color: $color-gray;
+    font-size: 18px;
     list-style: none;
     margin: 0;
     padding: 12px;
@@ -95,17 +84,146 @@ hr {
       cursor: pointer;
     }
   }
+
+  .container {
+    display: block;
+  }
 }
 .hl {
-  background: $applications-highlight-color;
+  background: $color-secondary-alt;
 }
-.search-apps-container-icon {
-  position: absolute;
-  z-index: 2;
-  right: 12px;
-  bottom: 15px;
-  color: $search-border-color;
-  cursor: default;
+.categories-header,
+.category-title {
+  color: $color-primary;
+  text-align: center;
+}
+
+.categories-header {
+  padding: 50px 0 0;
+  font-size: 16px;
+  text-transform: uppercase;
+  width: 90px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.category-title {
+  font-size: 30px;
+  padding: 50px;
+}
+
+.app-categories {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.app-category {
+  padding: 35px;
+  margin-left: 38px;
+
+  svg,
+  .category-name {
+    display: inline-block;
+  }
+
+  svg {
+    fill: $color-red;
+  }
+
+  .category-name {
+    width: 61px;
+    padding-left: 15px;
+    height: auto;
+    vertical-align: middle;
+    color: $blog-color-text;
+  }
+
+  > a {
+    display: flex;
+    align-items: center;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  @media (max-width: 992px) {
+    margin-left: 0;
+
+    svg,
+    .category-name {
+      display: block;
+    }
+
+    svg {
+      margin-left: 6px;
+    }
+
+    .category-name {
+      padding: 0;
+      width: 88px;
+      text-align: center;
+    }
+  }
+}
+
+hr {
+  border-color: $color-gray-extra-light;
+}
+
+.category-applications {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  &::after {
+    content: "";
+    width: 300px;
+  }
+}
+
+.application {
+  width: 300px;
+  text-align: center;
+  padding: 30px;
+
+  .app-title {
+    font-size: 22px;
+  }
+
+  .app-content {
+    font-size: 16px;
+    font-weight: 300;
+    color: $color-gray;
+
+    a {
+      color: $color-primary-alt;
+      text-decoration: underline;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .link {
+    font-size: 20px;
+    color: $color-secondary;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 auto;
+  }
 }

source/stylesheets/components/_scroll_to_top.scss

+.scroll-to-top {
+  background-color: $color-gray-medium;
+  color: $color-gray-light;
+  cursor: pointer;
+  font-size: 22px;
+  border-radius: 3px;
+  padding: 0 7px 3px;
+
+  &.affix {
+    bottom: 50px;
+    right: 3%;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $color-gray-light;
+    color: $color-gray;
+  }
+}

source/stylesheets/styles.css.scss

@@ -14,6 +14,7 @@
 @import "components/breadcrumbs";
 @import "components/forms";
 @import "components/dropdowns";
+@import "components/scroll_to_top";
 @import "pages/blog";
 @import "pages/core-team";