Update UI layout for desktop.

vraa · Jul 7, 2015 · d68d206 · d68d206
1 parent 0032b7e
commit d68d206
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/src/js/components/application.js b/src/js/components/application.js
@@ -116,14 +116,16 @@ var Application = React.createClass({
 
             <div className='route-planner'>
                 <Header/>
-                <RouteTabs
-                onAdd={this.onRouteAdd}
-                onSwitch={this.onRouteSwitch}
-                routes={this.state.routes}
-                active={this.state.activeRoute}
-                />
-                <RoutePlan mapService={mapService} route={route} routeAction={this.onAction} />
                 <Map mapService={mapService} route={route}/>
+                <div className='panel'>
+                    <RouteTabs
+                    onAdd={this.onRouteAdd}
+                    onSwitch={this.onRouteSwitch}
+                    routes={this.state.routes}
+                    active={this.state.activeRoute}
+                    />
+                    <RoutePlan mapService={mapService} route={route} routeAction={this.onAction} />
+                </div>
             </div>
             );
     }

diff --git a/src/js/components/map.js b/src/js/components/map.js
@@ -18,7 +18,8 @@ var Map = React.createClass({
         LatLng = google.maps.LatLng;
         this.renderMap({
             zoom: 7,
-            center: DEFAULT_LOCATION
+            center: DEFAULT_LOCATION,
+            disableDefaultUI:true
         });
         placesService = new google.maps.places.PlacesService(this.map);
 

diff --git a/src/scss/_app.scss b/src/scss/_app.scss
@@ -303,4 +303,22 @@ header{
     font-size: 2rem;
   }
 
+}
+
+@media (min-width: 600px) {
+  .panel{
+    max-width: 400px;
+    width: 400px;
+    position: absolute;
+    top: 50px;
+    left: 0;
+  }
+  .route-map{
+    top: 0;
+    left: 0;
+    display: block;
+  }
+  .route-plan{
+    opacity: .9;
+  }
 }