Skip to content

Commit bedffce

Browse files
redoxredox
committed
feat(examples): try examples instead of themes
1 parent 1b78e68 commit bedffce

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+1282
-14
lines changed

‎.eslintignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
dist/
2-
example/bundle.js
2+
docs/
3+
dev/bundle.js

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
node_modules/
22
dist/
3-
example/bundle.js*
3+
dev/bundle.js*
4+
examples/*/*.css
45
npm-debug.log

‎.sass-lint.yml

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
options:
22
formatter: stylish
33
files:
4-
include: 'themes/**/*.s+(a|c)ss'
4+
include: '+(examples|themes)/**/*.s+(a|c)ss'
55
rules:
66
# Extends
77
extends-before-mixins: 1
@@ -24,7 +24,7 @@ rules:
2424
no-duplicate-properties: 1
2525
no-empty-rulesets: 1
2626
no-extends: 0
27-
no-ids: 1
27+
no-ids: 0
2828
no-important: 1
2929
no-invalid-hex: 1
3030
no-mergeable-selectors: 1
@@ -38,7 +38,7 @@ rules:
3838

3939
# Nesting
4040
force-attribute-nesting: 1
41-
force-element-nesting: 1
41+
force-element-nesting: 0
4242
force-pseudo-nesting: 1
4343

4444
# Name Formats
@@ -59,7 +59,7 @@ rules:
5959
style: uppercase
6060
indentation: 1
6161
leading-zero: 1
62-
nesting-depth: 1
62+
nesting-depth: 0
6363
property-sort-order: 0
6464
quotes: 0
6565
shorthand-values: 1

‎example/app.js ‎dev/app.js

File renamed without changes.

‎example/debug.css ‎dev/debug.css

File renamed without changes.

‎example/default.css ‎dev/default.css

File renamed without changes.

‎example/index.html ‎dev/index.html

File renamed without changes.

‎example/style.css ‎dev/style.css

File renamed without changes.

‎example/templates/item.html ‎dev/templates/item.html

File renamed without changes.

‎example/templates/no-results.html ‎dev/templates/no-results.html

File renamed without changes.

‎docs/_config.yml

+6-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ github_username: algolia
77

88
# Navigation
99
navigation:
10-
- text: Widgets
11-
url: /widgets/
12-
- text: Themes
13-
url: /themes/
10+
- text: Documentation
11+
url: /documentation/
12+
- text: Examples
13+
url: /examples/
14+
# - text: Themes
15+
# url: /themes/
1416
- text: About
1517
url: /about/
1618
# Build settings

‎docs/css/_helper.sass

+3
Original file line numberDiff line numberDiff line change
@@ -311,3 +311,6 @@ sub
311311

312312
[ng\:cloak], [ng-cloak], .ng-cloak
313313
display: none !important
314+
315+
.text-white
316+
color: #FFFFFF

‎docs/examples.haml

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
layout: default
3+
title: Examples
4+
permalink: /examples/
5+
---
6+
7+
.hero
8+
%h1.text-center Examples
9+
10+
.spacer40
11+
.container
12+
.row
13+
.col-sm-8.col-sm-push-2
14+
%p.lead <strong>Instantsearch.js</strong> allows you to customize the appearance of your widgets very easily.
15+
%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.
16+
17+
.spacer40
18+
%h2.text-center Check out our examples!
19+
.row.text-center
20+
.col-sm-4
21+
%h3 Youtube
22+
%img.m-b.img-responsive.img-thumbnail{src: "{{ "/examples/youtube/capture.png" | prepend: site.baseurl }}"}
23+
%a.btn.btn-default.primary-btn{href: '{{ "/examples/youtube/" | prepend: site.baseurl }}', target: '_blank'} Live Preview
24+
25+
.col-sm-4
26+
%h3 Amazon
27+
%img.m-b.img-responsive.img-thumbnail{src:"http://placehold.it/600x400"}
28+
%a.btn.btn-default.primary-btn{href: '{{ "/examples/amazon/" | prepend: site.baseurl }}', target: '_blank'} Live Preview
29+
30+
.col-sm-4
31+
%h3 Airbnb
32+
%img.m-b.img-responsive.img-thumbnail{src: "{{ "/examples/airbnb/capture.png" | prepend: site.baseurl }}"}
33+
%a.btn.btn-default.primary-btn{href: '{{ "/examples/airbnb/" | prepend: site.baseurl }}', target: '_blank'} Live Preview

‎docs/examples/airbnb/capture.png

200 KB
Loading

‎docs/examples/airbnb/index.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<html>
2+
<head>
3+
<meta charset="UTF-8">
4+
<title>Airbnb-like search by Algolia</title>
5+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css" />
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
7+
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css' />
8+
<link rel="stylesheet" type="text/css" href="style.css" />
9+
<!--[if lte IE 9]>
10+
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
11+
<![endif]-->
12+
</head>
13+
<body>
14+
<header>
15+
<span class="logo">A</span>
16+
<i class="fa fa-search"></i>
17+
<input type="text" class="form-control" id="q" />
18+
</header>
19+
<section class="row">
20+
<div class="col-sm-7">
21+
<nav>
22+
<div class="row">
23+
<div class="col-sm-3">Dates</div>
24+
<div class="col-sm-3"><div class="date">10/30/3015</div></div>
25+
<div class="col-sm-3"><div class="date">11/30/3015</div></div>
26+
<div class="col-sm-3">
27+
<div class="guests">
28+
<select>
29+
<option value="1">1 Guest</option>
30+
<option value="2">2 Guests</option>
31+
<option value="3">3 Guests</option>
32+
<option value="4">4 Guests</option>
33+
<option value="5">5 Guests</option>
34+
<option value="6">6 Guests</option>
35+
</select>
36+
</div>
37+
</div>
38+
</div>
39+
<div class="row">
40+
<div class="col-sm-3">Room Type</div>
41+
<div class="col-sm-9">
42+
<div id="room_types"></div>
43+
</div>
44+
</div>
45+
<div class="row">
46+
<div class="col-sm-3">Price Range</div>
47+
<div class="col-sm-9">
48+
<div id="price"></div>
49+
</div>
50+
</div>
51+
</nav>
52+
<div id="stats"></div>
53+
<div id="hits"></div>
54+
<div id="pagination"></div>
55+
</div>
56+
<div class="col-sm-5" id="map">
57+
</div>
58+
</section>
59+
<script src="https://cdn.jsdelivr.net/instantsearch.js/0/instantsearch.min.js"></script>
60+
<script src="search.js"></script>
61+
</body>
62+
</html>

‎docs/examples/airbnb/scss/_base.scss

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@mixin component($component) {
2+
.ais-#{$component} {
3+
@content
4+
}
5+
}
6+
7+
@mixin modifier($modifier) {
8+
&--#{$modifier} {
9+
@content
10+
}
11+
}
12+
13+
@mixin element($element) {
14+
&__#{$element} {
15+
@content
16+
}
17+
}
18+
19+
@mixin bem($component, $modifier, $element: "") {
20+
@include component($component) {
21+
@include modifier($modifier) {
22+
@if $element != "" {
23+
@include element($element) {
24+
@content;
25+
}
26+
} @else {
27+
@content;
28+
}
29+
}
30+
}
31+
}

‎docs/examples/airbnb/scss/_default.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@import "base";
2+
@import "search-box";
3+
@import "stats";
4+
@import "index-selector";
5+
@import "hits";
6+
@import "pagination";
7+
@import "refinement-list";
8+
@import "menu";
9+
@import "toggle";
10+
@import "hierarchical-menu";
11+
@import "range-slider";
12+
@import "price-ranges";

‎docs/examples/airbnb/scss/_hierarchical-menu.scss

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@import "base";
2+
@import "variables";
3+
4+
@include component(hierarchical-menu) {
5+
@include modifier(header);
6+
@include modifier(body);
7+
@include modifier(list) {
8+
@include element(lvl0);
9+
@include element(lvl1);
10+
}
11+
12+
@include modifier(item) {
13+
@include element(active);
14+
}
15+
16+
@include modifier(link);
17+
@include modifier(count);
18+
@include modifier(footer);
19+
}

‎docs/examples/airbnb/scss/_hits.scss

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import "base";
2+
@import "variables";
3+
4+
@include component(hits) {
5+
@include element(empty);
6+
@include modifier(item);
7+
}

‎docs/examples/airbnb/scss/_index-selector.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import "base";
2+
@import "variables";
3+
4+
@include component(index-selector) {
5+
@include modifier(item);
6+
}

‎docs/examples/airbnb/scss/_menu.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import "base";
2+
@import "variables";
3+
4+
@include component(menu) {
5+
@include modifier(header);
6+
@include modifier(body);
7+
@include modifier(list);
8+
@include modifier(item) {
9+
@include element(active);
10+
}
11+
@include modifier(link);
12+
@include modifier(count);
13+
@include modifier(footer);
14+
}

‎docs/examples/airbnb/scss/_pagination.scss

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import "base";
2+
@import "variables";
3+
4+
@include component(pagination) {
5+
@include modifier(item) {
6+
@include element(disabled) {
7+
visibility: hidden;
8+
}
9+
}
10+
@include modifier(item-first);
11+
@include modifier(item-previous);
12+
@include modifier(item-page) {
13+
@include element(active);
14+
}
15+
@include modifier(item-next);
16+
@include modifier(item-last);
17+
}

‎docs/examples/airbnb/scss/_price-ranges.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import "base";
2+
@import "variables";
3+
4+
@include component(price-ranges) {
5+
@include modifier(header);
6+
@include modifier(body);
7+
@include modifier(footer);
8+
@include modifier(form);
9+
@include modifier(range) {
10+
@include element(active);
11+
}
12+
@include modifier(input-group);
13+
@include modifier(button);
14+
}

‎docs/examples/airbnb/scss/_range-slider.scss

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
@import "base";
2+
@import "variables";
3+
4+
@include component(range-slider) {
5+
@include modifier(target) {
6+
position: relative;
7+
direction: ltr;
8+
background: $gray-light;
9+
height: 4px;
10+
&, * {
11+
box-sizing: border-box;
12+
}
13+
}
14+
15+
@include modifier(base) {
16+
width: 100%;
17+
height: 100%;
18+
position: relative;
19+
z-index: 1;
20+
}
21+
22+
@include modifier(origin) {
23+
position: absolute;
24+
right: 0;
25+
top: 0;
26+
left: 0;
27+
bottom: 0;
28+
}
29+
30+
@include modifier(state-tap) {
31+
@include component(range-slider) {
32+
@include modifier(origin) {
33+
transition: left .3s, top .3s;
34+
}
35+
}
36+
}
37+
38+
@include modifier(state-drag) {
39+
* {
40+
cursor: inherit;
41+
}
42+
}
43+
44+
// Painting and performance;
45+
// Browsers can paint handles in their own layer.
46+
//
47+
@include modifier(base) {
48+
transform: translate3d(0, 0, 0);
49+
}
50+
51+
@include modifier(connect) {
52+
background: $blue-light;
53+
transition: background 450ms;
54+
}
55+
56+
@include modifier(background) {
57+
background: $gray-light;
58+
}
59+
60+
@include modifier(handle) {
61+
border: 1px solid #ccc;
62+
border-radius: 50%;
63+
width: 20px;
64+
height: 20px;
65+
background: white;
66+
position: relative;
67+
z-index: 1;
68+
cursor: pointer;
69+
}
70+
71+
@include modifier(handle-lower) {
72+
bottom: 7px;
73+
}
74+
75+
@include modifier(handle-upper) {
76+
bottom: 7px;
77+
}
78+
79+
@include modifier(tooltip) {
80+
position: absolute;
81+
top: -20px;
82+
}
83+
84+
@include modifier(active) {
85+
@include component(range-slider) {
86+
@include modifier(tooltip) {
87+
background: $blue-light;
88+
color: $white;
89+
border-color: $blue-dark;
90+
}
91+
}
92+
}
93+
94+
@include modifier(handle-upper) {
95+
@include component(range-slider) {
96+
@include modifier(tooltip) {
97+
right: 0;
98+
}
99+
}
100+
}
101+
}

0 commit comments

Comments
 (0)