feat(examples): try examples instead of themes

algolia · Nov 2, 2015 · bedffce · bedffce
1 parent 1b78e68
commit bedffce
Show file tree

Hide file tree

Showing 52 changed files with 1,282 additions and 14 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 dist/
-example/bundle.js
+docs/
+dev/bundle.js
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules/
 dist/
-example/bundle.js*
+dev/bundle.js*
+examples/*/*.css
 npm-debug.log
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -1,7 +1,7 @@
 options:
   formatter: stylish
 files:
-  include: 'themes/**/*.s+(a|c)ss'
+  include: '+(examples|themes)/**/*.s+(a|c)ss'
 rules:
   # Extends
   extends-before-mixins: 1
@@ -24,7 +24,7 @@ rules:
   no-duplicate-properties: 1
   no-empty-rulesets: 1
   no-extends: 0
-  no-ids: 1
+  no-ids: 0
   no-important: 1
   no-invalid-hex: 1
   no-mergeable-selectors: 1
@@ -38,7 +38,7 @@ rules:
 
   # Nesting
   force-attribute-nesting: 1
-  force-element-nesting: 1
+  force-element-nesting: 0
   force-pseudo-nesting: 1
 
   # Name Formats
@@ -59,7 +59,7 @@ rules:
       style: uppercase
   indentation: 1
   leading-zero: 1
-  nesting-depth: 1
+  nesting-depth: 0
   property-sort-order: 0
   quotes: 0
   shorthand-values: 1

diff --git a/example/app.js → dev/app.js b/example/app.js → dev/app.js
diff --git a/example/debug.css → dev/debug.css b/example/debug.css → dev/debug.css
diff --git a/example/default.css → dev/default.css b/example/default.css → dev/default.css
diff --git a/example/index.html → dev/index.html b/example/index.html → dev/index.html
diff --git a/example/style.css → dev/style.css b/example/style.css → dev/style.css
diff --git a/example/templates/item.html → dev/templates/item.html b/example/templates/item.html → dev/templates/item.html
diff --git a/example/templates/no-results.html → dev/templates/no-results.html b/example/templates/no-results.html → dev/templates/no-results.html
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -7,10 +7,12 @@ github_username: algolia
 
 # Navigation
 navigation:
- - text: Widgets
-   url: /widgets/
- - text: Themes
-   url: /themes/
+ - text: Documentation
+   url: /documentation/
+ - text: Examples
+   url: /examples/
+ # - text: Themes
+ #   url: /themes/
  - text: About
    url: /about/
 # Build settings

diff --git a/docs/css/_helper.sass b/docs/css/_helper.sass
@@ -311,3 +311,6 @@ sub
 
 [ng\:cloak], [ng-cloak], .ng-cloak
   display: none !important
+
+.text-white
+  color: #FFFFFF
diff --git a/docs/examples.haml b/docs/examples.haml
@@ -0,0 +1,33 @@
+---
+layout: default
+title: Examples
+permalink: /examples/
+---
+
+.hero
+  %h1.text-center Examples
+
+.spacer40
+.container
+  .row
+    .col-sm-8.col-sm-push-2
+      %p.lead <strong>Instantsearch.js</strong> allows you to customize the appearance of your widgets very easily.
+      %p.lead Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo blanditiis ad, quidem, illum praesentium quae, ipsa sint similique quas mollitia voluptatum cumque excepturi amet dolorem dicta minus voluptate vel impedit.
+
+  .spacer40
+  %h2.text-center Check out our examples!
+  .row.text-center
+    .col-sm-4
+      %h3 Youtube
+      %img.m-b.img-responsive.img-thumbnail{src: "{{ "/examples/youtube/capture.png" | prepend: site.baseurl }}"}
+      %a.btn.btn-default.primary-btn{href: '{{ "/examples/youtube/" | prepend: site.baseurl }}', target: '_blank'} Live Preview
+
+    .col-sm-4
+      %h3 Amazon
+      %img.m-b.img-responsive.img-thumbnail{src:"http://placehold.it/600x400"}
+      %a.btn.btn-default.primary-btn{href: '{{ "/examples/amazon/" | prepend: site.baseurl }}', target: '_blank'} Live Preview
+
+    .col-sm-4
+      %h3 Airbnb
+      %img.m-b.img-responsive.img-thumbnail{src: "{{ "/examples/airbnb/capture.png" | prepend: site.baseurl }}"}
+      %a.btn.btn-default.primary-btn{href: '{{ "/examples/airbnb/" | prepend: site.baseurl }}', target: '_blank'} Live Preview
diff --git a/docs/examples/airbnb/capture.png b/docs/examples/airbnb/capture.png
diff --git a/docs/examples/airbnb/index.html b/docs/examples/airbnb/index.html
@@ -0,0 +1,62 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Airbnb-like search by Algolia</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
+  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css' />
+  <link rel="stylesheet" type="text/css" href="style.css" />
+  <!--[if lte IE 9]>
+  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+  <header>
+    <span class="logo">A</span>
+    <i class="fa fa-search"></i>
+    <input type="text" class="form-control" id="q" />
+  </header>
+  <section class="row">
+    <div class="col-sm-7">
+      <nav>
+        <div class="row">
+          <div class="col-sm-3">Dates</div>
+          <div class="col-sm-3"><div class="date">10/30/3015</div></div>
+          <div class="col-sm-3"><div class="date">11/30/3015</div></div>
+          <div class="col-sm-3">
+            <div class="guests">
+              <select>
+                <option value="1">1 Guest</option>
+                <option value="2">2 Guests</option>
+                <option value="3">3 Guests</option>
+                <option value="4">4 Guests</option>
+                <option value="5">5 Guests</option>
+                <option value="6">6 Guests</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-3">Room Type</div>
+          <div class="col-sm-9">
+            <div id="room_types"></div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-3">Price Range</div>
+          <div class="col-sm-9">
+            <div id="price"></div>
+          </div>
+        </div>
+      </nav>
+      <div id="stats"></div>
+      <div id="hits"></div>
+      <div id="pagination"></div>
+    </div>
+    <div class="col-sm-5" id="map">
+    </div>
+  </section>
+  <script src="https://cdn.jsdelivr.net/instantsearch.js/0/instantsearch.min.js"></script>
+  <script src="search.js"></script>
+</body>
+</html>
diff --git a/docs/examples/airbnb/scss/_base.scss b/docs/examples/airbnb/scss/_base.scss
@@ -0,0 +1,31 @@
+@mixin component($component) {
+  .ais-#{$component} {
+    @content
+  }
+}
+
+@mixin modifier($modifier) {
+  &--#{$modifier} {
+    @content
+  }
+}
+
+@mixin element($element) {
+  &__#{$element} {
+    @content
+  }
+}
+
+@mixin bem($component, $modifier, $element: "") {
+  @include component($component) {
+    @include modifier($modifier) {
+      @if $element != "" {
+        @include element($element) {
+          @content;
+        }
+      } @else {
+        @content;
+      }
+    }
+  }
+}
diff --git a/docs/examples/airbnb/scss/_default.scss b/docs/examples/airbnb/scss/_default.scss
@@ -0,0 +1,12 @@
+@import "base";
+@import "search-box";
+@import "stats";
+@import "index-selector";
+@import "hits";
+@import "pagination";
+@import "refinement-list";
+@import "menu";
+@import "toggle";
+@import "hierarchical-menu";
+@import "range-slider";
+@import "price-ranges";
diff --git a/docs/examples/airbnb/scss/_hierarchical-menu.scss b/docs/examples/airbnb/scss/_hierarchical-menu.scss
@@ -0,0 +1,19 @@
+@import "base";
+@import "variables";
+
+@include component(hierarchical-menu) {
+  @include modifier(header);
+  @include modifier(body);
+  @include modifier(list) {
+    @include element(lvl0);
+    @include element(lvl1);
+  }
+
+  @include modifier(item) {
+    @include element(active);
+  }
+
+  @include modifier(link);
+  @include modifier(count);
+  @include modifier(footer);
+}
diff --git a/docs/examples/airbnb/scss/_hits.scss b/docs/examples/airbnb/scss/_hits.scss
@@ -0,0 +1,7 @@
+@import "base";
+@import "variables";
+
+@include component(hits) {
+  @include element(empty);
+  @include modifier(item);
+}
diff --git a/docs/examples/airbnb/scss/_index-selector.scss b/docs/examples/airbnb/scss/_index-selector.scss
@@ -0,0 +1,6 @@
+@import "base";
+@import "variables";
+
+@include component(index-selector) {
+  @include modifier(item);
+}
diff --git a/docs/examples/airbnb/scss/_menu.scss b/docs/examples/airbnb/scss/_menu.scss
@@ -0,0 +1,14 @@
+@import "base";
+@import "variables";
+
+@include component(menu) {
+  @include modifier(header);
+  @include modifier(body);
+  @include modifier(list);
+  @include modifier(item) {
+    @include element(active);
+  }
+  @include modifier(link);
+  @include modifier(count);
+  @include modifier(footer);
+}
diff --git a/docs/examples/airbnb/scss/_pagination.scss b/docs/examples/airbnb/scss/_pagination.scss
@@ -0,0 +1,17 @@
+@import "base";
+@import "variables";
+
+@include component(pagination) {
+  @include modifier(item) {
+    @include element(disabled) {
+      visibility: hidden;
+    }
+  }
+  @include modifier(item-first);
+  @include modifier(item-previous);
+  @include modifier(item-page) {
+    @include element(active);
+  }
+  @include modifier(item-next);
+  @include modifier(item-last);
+}
diff --git a/docs/examples/airbnb/scss/_price-ranges.scss b/docs/examples/airbnb/scss/_price-ranges.scss
@@ -0,0 +1,14 @@
+@import "base";
+@import "variables";
+
+@include component(price-ranges) {
+  @include modifier(header);
+  @include modifier(body);
+  @include modifier(footer);
+  @include modifier(form);
+  @include modifier(range) {
+    @include element(active);
+  }
+  @include modifier(input-group);
+  @include modifier(button);
+}
diff --git a/docs/examples/airbnb/scss/_range-slider.scss b/docs/examples/airbnb/scss/_range-slider.scss
@@ -0,0 +1,101 @@
+@import "base";
+@import "variables";
+
+@include component(range-slider) {
+  @include modifier(target) {
+    position: relative;
+    direction: ltr;
+    background: $gray-light;
+    height: 4px;
+    &, * {
+      box-sizing: border-box;
+    }
+  }
+
+  @include modifier(base) {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+  }
+
+  @include modifier(origin) {
+    position: absolute;
+    right: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+  }
+
+  @include modifier(state-tap) {
+    @include component(range-slider) {
+      @include modifier(origin) {
+        transition: left .3s, top .3s;
+      }
+    }
+  }
+
+  @include modifier(state-drag) {
+    * {
+      cursor: inherit;
+    }
+  }
+
+  // Painting and performance;
+  // Browsers can paint handles in their own layer.
+  //
+  @include modifier(base) {
+    transform: translate3d(0, 0, 0);
+  }
+
+  @include modifier(connect) {
+    background: $blue-light;
+    transition: background 450ms;
+  }
+
+  @include modifier(background) {
+    background: $gray-light;
+  }
+
+  @include modifier(handle) {
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    background: white;
+    position: relative;
+    z-index: 1;
+    cursor: pointer;
+  }
+
+  @include modifier(handle-lower) {
+    bottom: 7px;
+  }
+
+  @include modifier(handle-upper) {
+    bottom: 7px;
+  }
+
+  @include modifier(tooltip) {
+    position: absolute;
+    top: -20px;
+  }
+
+  @include modifier(active) {
+    @include component(range-slider) {
+      @include modifier(tooltip) {
+        background: $blue-light;
+        color: $white;
+        border-color: $blue-dark;
+      }
+    }
+  }
+
+  @include modifier(handle-upper) {
+    @include component(range-slider) {
+      @include modifier(tooltip) {
+        right: 0;
+      }
+    }
+  }
+}