Merge pull request #71 from algolia/feat/simple-example

feat(example-simple): bootstrap a simple example using UMD build
algolia · Apr 3, 2017 · f8f7b7c · f8f7b7c
2 parents fd640ec + bb68c7c
commit f8f7b7c
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 0 deletions.
diff --git a/packages/examples/quick-start/index.html b/packages/examples/quick-start/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Welcome to Vue</title>
+  <script src="https://unpkg.com/vue/dist/vue.js"></script>
+  <script src="./node_modules/vue-instantsearch/dist/vue-instantsearch.js"></script>
+  <link href="styles.css" media="all" rel="stylesheet" />
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+</head>
+<body>
+  <div id="app">
+    <ais-store app-id="latency" api-key="6be0576ff61c053d5f9a3225e2a90f76" index-name="ikea">
+      <ais-input placeholder="Search for a product..."></ais-input>
+      <ais-results>
+        <template scope="{ result }">
+          <div class="search-result">
+            <img class="result__image img-responsive" :src="result.image">
+
+            <div class="result__info">
+              <h2 class="result__name" v-html="result._highlightResult.name.value"></h2>
+              <div class="result__type" v-html="result._highlightResult.type.value"></div>
+              <div class="result__rating">
+                <template v-for="n in 5">
+                  <span v-if="n <= result.rating" class="result__star"></span>
+                  <span v-else class="result__star--empty"></span>
+                </template>
+              </div>
+              <div class="result__price">${{result.price}}</div>
+            </div>
+          </div>
+        </template>
+      </ais-results>
+    </ais-store>
+  </div>
+
+  <script>
+    new Vue({
+      el: '#app',
+      data: {}
+    })
+  </script>
+</body>
+</html>
diff --git a/packages/examples/quick-start/package.json b/packages/examples/quick-start/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "example-simple",
+  "description": "Simple example of using Algolia instantsearch with Vue.js in the browser.",
+  "version": "0.0.0",
+  "author": "Raymond Rutjes <raymond.rutjes@gmail.com>",
+  "private": true,
+  "dependencies": {
+    "vue-instantsearch": "*"
+  }
+}
diff --git a/packages/examples/quick-start/styles.css b/packages/examples/quick-start/styles.css
@@ -0,0 +1,107 @@
+#app {
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #2c3e50;
+    width: 1400px;
+    margin: auto;
+}
+
+.ais-input {
+    width: 100%;
+    outline: none;
+    font-size: 15px;
+    padding: 7px;
+    box-sizing: border-box;
+    border: 2px solid lightgrey;
+    border-radius: 2px;
+    margin: 20px 0;
+    margin-right: 5%;
+}
+
+.ais-powered-by {
+    float: right;
+    margin-right: 10px;
+
+}
+
+.ais-powered-by svg {
+    vertical-align: bottom;
+}
+
+.search-result {
+    padding: 10px 20px 20px;
+    width: 25%;
+    border: solid 1px #EEE;
+    box-shadow: 0 0 3px #f6f6f6;
+
+    position: relative;
+    border-radius: 3px;
+    min-width: 220px;
+    background: #FFF;
+
+    display: inline;
+    float: left;
+    transition: all .5s;
+}
+
+.result__info {
+    position: absolute;
+    width: 100%;
+    padding: 0px 20px 20px;
+    bottom: 0;
+    left: 0;
+}
+
+.result__image {
+    margin-bottom: 100px;
+}
+
+.result__name {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.result__name em, .result__type em {
+    font-style: normal;
+    background: rgba(143, 187, 237, .1);
+    box-shadow: inset 0 -1px 0 0 rgba(69, 142, 225, .8);
+}
+
+.result__type em {
+    background: rgba(143, 187, 237, .1);
+    border-radius: 0;
+    box-shadow: inset 0 -1px 0 0 rgba(69, 142, 225, .8);
+}
+
+.result__price {
+    font-size: 25px;
+    font-weight: bold;
+    position: absolute;
+    right: 20px;
+    bottom: 16px;
+}
+
+.result__type {
+    color: #a2a2a2;
+    font-size: 12px;
+}
+
+.result__rating {
+    margin-top: 10px;
+}
+
+.result__star {
+    width: 1em;
+    height: 1em;
+}
+
+.result__star:before {
+    content: '\2605';
+    color: #FBAE00;
+}
+
+.result__star--empty:before {
+    content: '\2606';
+    color: #FBAE00;
+}