Merge branch 'dev'

app/actuators/ResultCard.js

@@ -187,7 +187,7 @@ export default class ResultCard extends Component {
 
 		if (resultElement && resultElement.length && scrollElement && scrollElement.length) {
 			scrollElement.css({
-				"height": "auto", 
+				"height": "auto",
 				"padding-bottom": 0
 			});
 			setTimeout(checkHeight, 1000);
@@ -642,7 +642,7 @@ export default class ResultCard extends Component {
 		}
 
 		return (
-			<div ref={(div) => { this.resultListContainer = div }} className="rbc rbc-resultcard">
+			<div className="rbc rbc-resultcard">
 				<div ref={(div) => { this.listParentElement = div }} className={`rbc-resultcard-container card thumbnail ${cx}`} style={this.props.componentStyle}>
 					{title}
 					{sortOptions}
@@ -659,7 +659,7 @@ export default class ResultCard extends Component {
 				</div>
 				{this.props.noResults && this.state.visibleNoResults ? (<NoResults defaultText={this.props.noResults} />) : null}
 				{this.props.initialLoader && this.state.queryStart && this.state.showInitialLoader ? (<InitialLoader defaultText={this.props.initialLoader} />) : null}
-				<PoweredBy container={this.resultListContainer} />
+				<PoweredBy container="rbc-resultcard-container" />
 			</div>
 		);
 	}

app/actuators/ResultList.js

@@ -187,7 +187,7 @@ export default class ResultList extends Component {
 
 		if (resultElement && resultElement.length && scrollElement && scrollElement.length) {
 			scrollElement.css({
-				"height": "auto", 
+				"height": "auto",
 				"padding-bottom": 0
 			});
 			setTimeout(checkHeight, 1000);
@@ -662,7 +662,7 @@ export default class ResultList extends Component {
 				</div>
 				{this.props.noResults && this.state.visibleNoResults ? (<NoResults defaultText={this.props.noResults} />) : null}
 				{this.props.initialLoader && this.state.queryStart && this.state.showInitialLoader ? (<InitialLoader defaultText={this.props.initialLoader} />) : null}
-				<PoweredBy container={this.resultListContainer} />
+				<PoweredBy container="rbc-resultlist-container" />
 			</div>
 		);
 	}

examples/airbeds/airbnb.scss

@@ -6,14 +6,6 @@
 	}
 }
 
-/// Block Modifier
-/// @param {String} $modifier - Modifier's name
-@mixin modifier($modifier) {
-	&--#{$modifier} {
-		@content;
-	}
-}
-
 .row {
 	margin-bottom: 0;
 }

examples/airbeds/app.js

@@ -15,14 +15,6 @@ import {
 require("./airbnb.scss");
 
 class Main extends Component {
-	constructor(props) {
-		super(props);
-		this.onData = this.onData.bind(this);
-		this.onPopoverTrigger = this.onPopoverTrigger.bind(this);
-		this.roomQuery = this.roomQuery.bind(this);
-		this.dateQuery = this.dateQuery.bind(this);
-	}
-
 	dateQuery(value) {
 		let query = null;
 		if (value) {
@@ -47,29 +39,27 @@ class Main extends Component {
 	}
 
 	roomQuery(record) {
-		if(record) {
-			let query = null;
+		let query = null;
 
-			function generateMatchQuery() {
-				return record.map(singleRecord => ({
-					match: {
-						room_type: singleRecord.value
-					}
-				}));
-			}
+		function generateMatchQuery() {
+			return record.map(singleRecord => ({
+				match: {
+					room_type: singleRecord.value
+				}
+			}));
+		}
 
-			if (record && record.length) {
-				query = {
-					bool: {
-						should: generateMatchQuery(),
-						minimum_should_match: 1,
-						boost: 1.0
-					}
-				};
-				return query;
-			}
+		if (record && record.length) {
+			query = {
+				bool: {
+					should: generateMatchQuery(),
+					minimum_should_match: 1,
+					boost: 1.0
+				}
+			};
 			return query;
 		}
+		return query;
 	}
 
 	onData(res) {
@@ -130,7 +120,7 @@ class Main extends Component {
 								<div className="col s6">
 									<DateRange
 										componentId="DateRangeSensor"
-										appbaseField="date_from"
+										appbaseField={["date_from", "date_to"]}
 										title="When"
 										numberOfMonths={1}
 										customQuery={this.dateQuery}
@@ -171,8 +161,8 @@ class Main extends Component {
 									appbaseField={this.props.mapping.price}
 									title="Price Range"
 									defaultSelected={{
-										"start": 10,
-										"end": 50
+										start: 10,
+										end: 50
 									}}
 									stepValue={10}
 									range={{

examples/airbeds/index.html

@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Airbeds in Seattle</title>
 
 	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">

examples/ecommerce/index.html

@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Ecommerce Store</title>
 
 	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">

examples/news/index.html

@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Hacker News</title>
 
 	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">

examples/productsearch/index.html

@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ProductSearch</title>
 
 	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">

examples/simplebeds/airbnb.scss

@@ -0,0 +1,186 @@
+/// Block Element
+/// @param {String} $element - Element's name
+@mixin element($element) {
+	&__#{$element} {
+		@content;
+	}
+}
+
+body {
+	-webkit-font-smoothing: antialiased;
+	text-rendering: optimizeLegibility;
+	-moz-osx-font-smoothing: grayscale;
+	-moz-font-feature-settings: "liga" on;
+
+	.row {
+		margin-bottom: 0;
+	}
+
+	.rbc {
+		margin-bottom: 12px;
+
+		.rbc-title {
+			font-size: 14px;
+			line-height: 28px;
+			text-transform: uppercase;
+		}
+	}
+}
+
+nav {
+	width: 100%;
+	height: 50px;
+	margin-bottom: 0;
+	background-color: #FF5A5F;
+	position: fixed;
+	z-index: 2;
+	box-shadow: none;
+	border: 0;
+	display: flex;
+	justify-content: center;
+
+	.brand {
+		width: 200px;
+		height: 50px;
+		line-height: 50px;
+		text-align: center;
+		display: block;
+		color: #fff;
+		font-size: 14px;
+		letter-spacing: 0.1em;
+		font-weight: 700;
+	}
+}
+
+.sensor-wrapper {
+	background-color: #fff;
+	width: 300px;
+	position: fixed;
+	top: 50px;
+	left: 0;
+	height: calc(100% - 50px);
+	padding: 15px;
+	z-index: 100;
+
+	.rbc {
+		border: 0;
+		box-shadow: none;
+	}
+}
+
+.result-wrapper {
+	width: calc(100% - 300px);
+	right: 0;
+	top: 50px;
+	position: absolute;
+}
+
+.rbc.rbc-pagination {
+	text-align: center;
+	border: 0;
+	box-shadow: none;
+	background-color: transparent;
+}
+
+.rbc-red .rbc.rbc-resultstats {
+	padding: 0 20px;
+	text-align: right;
+	background-color: transparent;
+	margin-top: 12px;
+	margin-bottom: -10px;
+}
+
+.rbc.rbc-resultcard .rbc-resultcard-container {
+	background-color: #fafafa;
+	height: auto;
+	max-height: none;
+	box-shadow: none;
+
+	.rbc-resultcard-scroll-container{
+		height: auto !important;
+		justify-content: space-between;
+		margin-top: 20px;
+	}
+
+	.rbc-resultcard-item {
+		width: calc(33.33% - 12px);
+		max-width: 340px;
+		margin: 0 6px;
+		border: 0;
+		position: relative;
+
+		@media all and (max-width: 768px) {
+			width: calc(50% - 12px);
+		}
+
+		@media all and (max-width: 480px) {
+			width: 100%;
+			margin: 0 auto;
+		}
+
+		.host {
+			border: 2px solid #fefefe;
+			border-radius: 50%;
+			overflow: hidden;
+			width: 60px;
+			height: 60px;
+			position: absolute;
+			bottom: 50px;
+			right: 20px;
+			background-color: #fefefe;
+			background-size: cover;
+			background-position: center center;
+		}
+
+		.price {
+			display: inline-block;
+			position: absolute;
+			left: 0;
+			top: 150px;
+			height: 48px;
+			color: #fff;
+			padding: 11px 20px;
+			font-size: 20px;
+			background-color: #424242;
+		}
+
+		.rbc-resultcard-item__image {
+			background-size: cover;
+		}
+
+		.rbc-resultcard-item__title {
+			padding-left: 0;
+		}
+
+		.rbc-resultcard-item__desc {
+			padding: 0;
+
+			p {
+				margin: 2px 0;
+			}
+		}
+	}
+}
+
+@media all and (max-width: 768px) {
+	.rbc-base {
+		overflow: hidden;
+	}
+
+	.sensor-wrapper {
+		position: static;
+		width: 100%;
+		margin-top: 50px;
+		background-color: #fff;
+		padding: 10px 15px;
+	}
+
+	.result-wrapper {
+		width: 100%;
+		position: static;
+	}
+
+	.rbc.rbc-numberbox {
+		display: none;
+	}
+}