Initial commit
This commit is contained in:
3
web/.babelrc
Normal file
3
web/.babelrc
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["es2015", "react"]
|
||||
}
|
||||
22
web/components/Filters.js
Normal file
22
web/components/Filters.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
|
||||
export default class Filters extends React.Component {
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div className="filters">
|
||||
<div className="filter-row">
|
||||
one filter
|
||||
</div>
|
||||
<div className="filter-row">
|
||||
two filter
|
||||
</div>
|
||||
<div className="filter-row">
|
||||
two filter
|
||||
</div>
|
||||
<div className="filter-row">
|
||||
two filter
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
0
web/components/ListingDetails.js
Normal file
0
web/components/ListingDetails.js
Normal file
22
web/components/Listings.js
Normal file
22
web/components/Listings.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
|
||||
export default class Listings extends React.Component {
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div className="listings">
|
||||
<div className="listings-row">
|
||||
one filter
|
||||
</div>
|
||||
<div className="listings-row">
|
||||
two filter
|
||||
</div>
|
||||
<div className="listings-row">
|
||||
two filter
|
||||
</div>
|
||||
<div className="listings-row">
|
||||
two filter
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
81
web/components/Main.js
Normal file
81
web/components/Main.js
Normal file
@@ -0,0 +1,81 @@
|
||||
import React from 'react';
|
||||
import Filters from './Filters';
|
||||
import Listings from './Listings';
|
||||
|
||||
class Main extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const uluru = {lat: -25.363, lng: 131.044};
|
||||
const map = new google.maps.Map(this.refs.map, {
|
||||
zoom: 4,
|
||||
center: uluru,
|
||||
streetViewControl: false,
|
||||
mapTypeControl: false
|
||||
});
|
||||
const marker = new google.maps.Marker({
|
||||
position: uluru,
|
||||
map: map
|
||||
});
|
||||
|
||||
var control = document.createElement('div');
|
||||
control.classList.add('filters-btn-toggle');
|
||||
control.innerHTML = '<button>Filters</button>';
|
||||
control.style = "top: 200px;"
|
||||
|
||||
control.addEventListener('click', (e) => {
|
||||
this.setState({
|
||||
mapClicked: true
|
||||
});
|
||||
});
|
||||
control.index = 1;
|
||||
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
|
||||
}
|
||||
|
||||
onCloseClick(e) {
|
||||
this.setState({
|
||||
mapClicked: false
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const leftStyle = {};
|
||||
const rightStyle = {};
|
||||
|
||||
let leftClass = 'left-base';
|
||||
let rightClass ='right-base';
|
||||
|
||||
if (this.state.mapClicked) {
|
||||
leftClass = 'left-hidden';
|
||||
rightClass = 'right-shown';
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
Kivi {this.state.mapClicked ? 'YEs': 'No'}
|
||||
</div>
|
||||
|
||||
<div id="right" style={rightStyle} className={rightClass}>
|
||||
<div className="right-content">
|
||||
<div className="filters-close-button">
|
||||
<button onClick={this.onCloseClick.bind(this)}>Close me!</button>
|
||||
</div>
|
||||
<Filters />
|
||||
<Listings />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="left" style={leftStyle} className={leftClass}>
|
||||
<div id="map" ref="map">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Main;
|
||||
21444
web/dist/app.bundle.js
vendored
Normal file
21444
web/dist/app.bundle.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
14
web/dist/index.html
vendored
Normal file
14
web/dist/index.html
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
</div>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBghY4-1wa7jETxDbyDdcGL731ZtOxpkA">
|
||||
</script>
|
||||
<script type="text/javascript" src="app.bundle.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
122
web/dist/main.css
vendored
Normal file
122
web/dist/main.css
vendored
Normal file
@@ -0,0 +1,122 @@
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
*, :after, :before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#header {
|
||||
background-color: hsla(0,0%,100%,.95);
|
||||
box-shadow: 0 2px 4px 0 rgba(73,73,73,.1);
|
||||
height: 60px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10000;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
.filter-row {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
}
|
||||
|
||||
.listings-row {
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #e6e6e6;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#left {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.right-content {
|
||||
padding: 10px 10px 0;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#right {
|
||||
box-sizing: border-box;
|
||||
width: 572px;
|
||||
padding-top: 60px;
|
||||
float: right;
|
||||
height: 100%;
|
||||
border: 1px solid #e6e6e6;
|
||||
background: rgba(252,252,253,.9);
|
||||
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin: 0;
|
||||
padding: 10px 25px 0;
|
||||
border: 1px solid #e6e6e6;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.filters-btn-toggle {
|
||||
margin-top: 90px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filters-close-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left-hidden-shown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.right-hidden-shown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width : 768px) {
|
||||
#right {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filters-btn-toggle {
|
||||
margin-top: 90px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.filters-close-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.left-hidden{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right-shown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.right-base {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left-base {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
8
web/index.js
Normal file
8
web/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Main from './components/Main';
|
||||
|
||||
const state = {
|
||||
};
|
||||
ReactDOM.render(<Main />, document.getElementById('root'));
|
||||
|
||||
24
web/package.json
Normal file
24
web/package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "web",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --content-base ./dist --hot --inline --host 0.0.0.0",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"babel-core": "^6.18.2",
|
||||
"babel-loader": "^6.2.7",
|
||||
"babel-preset-es2015": "^6.18.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"react": "^15.3.2",
|
||||
"react-dom": "^15.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^1.13.3",
|
||||
"webpack-dev-server": "^1.16.2"
|
||||
}
|
||||
}
|
||||
16
web/webpack.config.js
Normal file
16
web/webpack.config.js
Normal file
@@ -0,0 +1,16 @@
|
||||
module.exports = {
|
||||
entry: ["./index.js"],
|
||||
output: {
|
||||
path: __dirname + "/dist",
|
||||
filename: "app.bundle.js"
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /.js?$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
1529
web/yarn.lock
Normal file
1529
web/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user