Add FAQ page.

11 years ago · e381e16b0f
parent c6443d57e8
commit e381e16b0f
9 changed files with 302 additions and 16 deletions
--- a/README.md
+++ b/README.md
@ -11,7 +11,6 @@ This is a large improvement to shuffle. Most notably, the ability for [masonry](
 This project uses [Jekyll](http://jekyllrb.com/), so head over to [their quickstart guide](http://jekyllrb.com/docs/quickstart/) to get set up. Then open `_config.yml` and change the `url:` variable to your localhost.

 ## Improvements still to make
-* FAQ page
 * Use Deferred objects for callbacks
 * Horizontal layout

--- a/_config.yml
+++ b/_config.yml
@ -7,8 +7,8 @@ exclude:     ['./_scss/*.*']

 permalink: /:title

-_url: http://glen.local:4000
-__url: http://localhost:4000
+# url: http://glen.local:4000
+# url: http://localhost:4000
 url: http://vestride.github.io/Shuffle

 defaultTitle: 'Shuffle.js'
--- a/_includes/nav.html
+++ b/_includes/nav.html
@ -15,6 +15,9 @@
        <div class="span3">
          <a class="btn btn--primary" href="https://twitter.com/Vestride">By @Vestride</a>
        </div>
+        <div class="span3">
+          <a class="btn btn--primary" href="{{ site.url }}/faq">FAQ</a>
+        </div>
      </div>

      <h3 class="site-nav__title">Demos</h3>
--- a/_posts/2013-07-16-faq.html
+++ b/_posts/2013-07-16-faq.html
@ -0,0 +1,64 @@
+---
+layout: default
+title: Shuffle.js FAQ
+description: Frequently asked questions about Shuffle.js
+image: /hero.png
+extraJS: [ "faq.js" ]
+---
+<section class="container-fluid">
+  <div class="row-fluid">
+    <h2>FAQs</h2>
+  </div>
+</section>
+
+
+<section class="container-fluid search-section">
+  <div class="row-fluid">
+    <div class="span6">
+      <input type="search" placeholder="Search..." class="faq-search" id="search" />
+    </div>
+  </div>
+</section>
+
+
+<section class="container-fluid">
+  <div class="row-fluid">
+
+    <div class="question js-question">
+      <div class="question__inner">
+        <h3 class="question__text">Why Does Shuffle leave empty spaces?</h3>
+        <p class="question__answer">The algorithm used to place items does not keep track of empty space nor try to fill them. If you require this functionality, I suggest <a target="_blank" href="http://packery.metafizzy.co/">packery</a>.</p>
+      </div>
+    </div>
+
+    <div class="question js-question">
+      <div class="question__inner">
+        <h3 class="question__text">Why are images overlapping?</h3>
+        <p class="question__answer">If the size of your items are dependent on images, they can overlap if shuffle is initialized before all the images have loaded. Check out <a href="{{ site.url }}/{% post_url demos/2013-05-03-images %}">this demo</a> to see how to fix it.</p>
+      </div>
+    </div>
+
+    {% comment %}
+    <div class="question js-question">
+      <div class="question__inner">
+        <h3 class="question__text">Hi</h3>
+        <p class="question__answer">Check yo' self</p>
+      </div>
+    </div>
+    {% endcomment %}
+
+    <div class="question question--unanswered">
+      <div class="question__inner">
+        <h3 class="question__text">Didn't find an answer?</h3>
+        <p class="question__answer">Try looking at the javascript files for the demos or searching the issues <a href="https://github.com/Vestride/Shuffle/issues">on GitHub</a>.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+
+<section class="container-fluid">
+  <div class="row-fluid">
+  </div>
+</section>
+
--- a/_scss/_main.scss
+++ b/_scss/_main.scss
@ -157,6 +157,84 @@ nav > a {
 }


+// FAQ
+
+.search-section {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+input.faq-search {
+  width: 100%;
+  -webkit-appearance: none;
+          appearance: none;
+  border: 2px solid $gray40;
+  border-radius: 4px;
+  padding: 0.5em;
+  font-size: 1.125em;
+  color: $gray40;
+  transition: .15s;
+
+  @include placeholder() {
+    color: $gray40;
+    transition: .15s;
+  }
+
+  &:hover {
+    outline: 0;
+    color: $gray30;
+    border-color: $gray30;
+
+    @include placeholder() {
+      color: $gray30;
+    }
+  }
+
+  &:focus {
+    outline: 0;
+    color: $nephritis;
+    border-color: $nephritis;
+
+    @include placeholder() {
+      color: $nephritis;
+    }
+  }
+}
+
+
+.question {
+  margin: 2em 0;
+  overflow: hidden;
+
+  // For transition
+  transition: .2s ease-out;
+
+  &.collapsed {
+    height: 0 !important; // Needs to override inline style
+    margin: 0;
+    border-width: 0;
+  }
+
+  &.collapsed + .question  {
+    margin-top: 0;
+  }
+}
+
+.question--unanswered {
+  padding-top: 1.25em;
+  border-top: 2px solid $emerald;
+}
+
+.question__text {
+  margin-top: 0;
+}
+
+.question__answer {
+  margin-bottom: 0;
+}
+
+
+


@media ( max-width: 47.9375em ) {
--- a/_scss/_normalize.scss
+++ b/_scss/_normalize.scss
@ -341,15 +341,10 @@ input[type="radio"] {

 /**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
- *    (include `-moz` to future-proof).
 */

 input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box; /* 2 */
-    box-sizing: content-box;
 }

 /**
--- a/_scss/_variables.scss
+++ b/_scss/_variables.scss
@ -35,8 +35,8 @@ $asbestos: #7F8C8D;

 $black: #000;
 $gray10: $midnightBlue;
-$gray30: #5D6D77;
 $gray20: $wetAsphalt;
+$gray30: #5D6D77;
 $gray40: $concrete;
 $gray50: $asbestos;
 $white: #FFF;
@ -58,4 +58,14 @@ $white: #FFF;
  & {
    *zoom: 1;
  }
-}
+}
+
+@mixin placeholder() {
+  &::-webkit-input-placeholder {
+    @content;
+  }
+  &::-moz-input-placeholder {
+    @content;
+  }
+}
+
--- a/css/style.css
+++ b/css/style.css
@ -306,16 +306,10 @@ input[type="radio"] {

 /**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
- *    (include `-moz` to future-proof).
 */
 input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box;
-  /* 2 */
-  box-sizing: content-box;
 }

 /**
@ -2022,6 +2016,80 @@ nav > a {
  margin-top: 10px;
 }

+.search-section {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+input.faq-search {
+  width: 100%;
+  -webkit-appearance: none;
+  appearance: none;
+  border: 2px solid #95a5a6;
+  border-radius: 4px;
+  padding: 0.5em;
+  font-size: 1.125em;
+  color: #95a5a6;
+  transition: .15s;
+}
+input.faq-search::-webkit-input-placeholder {
+  color: #95a5a6;
+  transition: .15s;
+}
+input.faq-search::-moz-input-placeholder {
+  color: #95a5a6;
+  transition: .15s;
+}
+input.faq-search:hover {
+  outline: 0;
+  color: #5d6d77;
+  border-color: #5d6d77;
+}
+input.faq-search:hover::-webkit-input-placeholder {
+  color: #5d6d77;
+}
+input.faq-search:hover::-moz-input-placeholder {
+  color: #5d6d77;
+}
+input.faq-search:focus {
+  outline: 0;
+  color: #27ae60;
+  border-color: #27ae60;
+}
+input.faq-search:focus::-webkit-input-placeholder {
+  color: #27ae60;
+}
+input.faq-search:focus::-moz-input-placeholder {
+  color: #27ae60;
+}
+
+.question {
+  margin: 2em 0;
+  overflow: hidden;
+  transition: .2s ease-out;
+}
+.question.collapsed {
+  height: 0 !important;
+  margin: 0;
+  border-width: 0;
+}
+.question.collapsed + .question {
+  margin-top: 0;
+}
+
+.question--unanswered {
+  padding-top: 1.25em;
+  border-top: 2px solid #2ecc71;
+}
+
+.question__text {
+  margin-top: 0;
+}
+
+.question__answer {
+  margin-bottom: 0;
+}
+
@media (max-width: 47.9375em) {
  .figure-wrap:nth-child(odd) {
    margin-left: 0;
--- a/js/faq.js
+++ b/js/faq.js
@ -0,0 +1,69 @@
+
+// Requires jQuery and jQuery.debounce
+
+(function( $ ) {
+
+  var collapsedClass = 'collapsed',
+      $searchInput = $('#search'),
+      $questions = $('.js-question'),
+      $questionInners = $questions.find('.question__inner'),
+      $questionTexts = $questions.find('.question__text'),
+
+  keyup = function() {
+    // Value they've entered
+    var val = this.value.toLowerCase();
+
+    // Filter elements based on if their string exists in the product model
+    $questions.each(function( i, el ) {
+      var $el = $( el ),
+          text = $.trim( $questionTexts.eq( i ).text() ).toLowerCase(),
+          passes = text.indexOf( val ) !== -1;
+
+      if ( passes ) {
+        if ( $el.hasClass( collapsedClass ) ) {
+          $el.removeClass( collapsedClass );
+        }
+      } else {
+        if ( !$el.hasClass( collapsedClass ) ) {
+          $el.addClass( collapsedClass );
+        }
+      }
+
+    });
+  },
+
+  debouncedKeyup = $.debounce( 100, keyup ),
+
+  // Height cannot be transitioned from auto to zero, so it must be set.
+  setHeights = function() {
+    var heights = [];
+
+    // Remove current hegith
+    $questions.css( 'height', '' );
+
+    // Get new heights
+    // Inner div needed because setting a height on the elements
+    // self doesn't get the correct new height :\
+    $questionInners.each(function() {
+      heights.push( $( this ).css( 'height' ) );
+    });
+
+    // Set new heights
+    $questions.each(function( i ) {
+      $( this ).css( 'height', heights[ i ] );
+    });
+  },
+
+  onWindowResize = function() {
+    setHeights();
+  };
+
+  if ( !$searchInput.length ) {
+    return;
+  }
+
+  $searchInput.on( 'keyup change', debouncedKeyup );
+  $( window ).on( 'resize', $.debounce( 250, onWindowResize ) );
+  onWindowResize();
+
+}( jQuery ));