add basic styles to home page [WIP]

relates #22
InFact-coop · Nov 23, 2017 · 851f6c9 · 851f6c9
1 parent 855c03f
commit 851f6c9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/src/App.js b/src/App.js
@@ -46,12 +46,19 @@ class App extends Component {
 
   render() {
     console.log(this.state.buildings)
-    return <div>
-        <Map 
-        {...this.state} 
-        handleBuildingDetails={this.buildingDetails} / >
-        <BuildingDetails building={this.state.building} />
-      </div>;
+    return (
+      <div>
+        <div className="fl w-50 pa2">
+          <Map
+            {...this.state}
+            handleBuildingDetails={this.buildingDetails} / >
+        </div>
+        <div className="fl w-50 pa2">
+            {/* logic here to display either list view or detailed view*/}
+          <BuildingDetails building={this.state.building} />
+        </div>
+      </div>
+    );
   }
 }
 

diff --git a/src/BuildingDetails.js b/src/BuildingDetails.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 
 const BuildingDetails = ({ building }) => {
-  const { 
+  const {
     street_number,
     street_name,
     postcode,

diff --git a/src/Map.js b/src/Map.js
@@ -15,11 +15,11 @@ class Map extends Component {
   render() {
     const { buildings, handleBuildingDetails, mapCenter, mapZoom } = this.props;
     return (
-      <Mapbox 
-      style="mapbox://styles/sohilpandya/cja87dmin0ct62sl4jxyo4tzp" 
-      center={ mapCenter } 
-      zoom={ mapZoom } 
-      containerStyle={{ height: "100vh", width: "50vw" }}
+      <Mapbox
+      style="mapbox://styles/sohilpandya/cja87dmin0ct62sl4jxyo4tzp"
+      center={ mapCenter }
+      zoom={ mapZoom }
+      containerStyle={{ height: "100vh", width: "100%" }}
       movingMethod={'flyTo'}>
         <MapLayer
           { ...this.props }