Initial commit

This commit is contained in:
Edin Dazdarevic
2016-11-07 11:17:48 +01:00
commit 8f613f1f73
32 changed files with 24649 additions and 0 deletions

3
web/.babelrc Normal file
View File

@@ -0,0 +1,3 @@
{
"presets": ["es2015", "react"]
}

22
web/components/Filters.js Normal file
View 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>)
}
}

View File

View 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
View 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

File diff suppressed because it is too large Load Diff

14
web/dist/index.html vendored Normal file
View 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
View 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
View 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
View 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
View 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

File diff suppressed because it is too large Load Diff