From 858249681181fb4f0879297b1774e9caace1f9fc Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Sat, 10 Sep 2016 16:11:43 +0200
Subject: [PATCH] Remove layout CSS styling

---
 src/layout.scss   | 11 -----------
 src/map.jsx       | 14 +++++++-------
 src/theme.js      |  2 +-
 src/toolbar.jsx   |  9 ++++-----
 src/workspace.jsx |  8 +++-----
 5 files changed, 15 insertions(+), 29 deletions(-)
 delete mode 100644 src/layout.scss

diff --git a/src/layout.scss b/src/layout.scss
deleted file mode 100644
index 9ad1617..0000000
--- a/src/layout.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.map {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-	height: 100%;
-    width: 100%;
-
-    & > div {
-	    height: 100%;
-    }
-}
diff --git a/src/map.jsx b/src/map.jsx
index 9dbb878..126e59f 100644
--- a/src/map.jsx
+++ b/src/map.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import MapboxGl from 'mapbox-gl';
-//import diffStyles from 'mapbox-gl-style-spec/lib/diff'
+import diffStyles from 'mapbox-gl-style-spec/lib/diff'
 import { fullHeight } from './theme.js'
 import Immutable from 'immutable'
 
@@ -50,11 +50,11 @@ export class Map extends React.Component {
 	}
 
 	render() {
-			return <div style={{
-				...fullHeight,
-				width: "100%",
-			}}>
-				<div ref={x => this.container = x}></div>
-			</div>
+			return <div
+				ref={x => this.container = x}
+				style={{
+					...fullHeight,
+					width: "100%",
+				}}></div>
 	}
 }
diff --git a/src/theme.js b/src/theme.js
index d013e38..1a6658b 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -32,7 +32,7 @@ const themeColors = {
 	error: baseColors.red
 }
 
-const colors = {
+export const colors = {
 	...baseColors,
 	...themeColors
 }
diff --git a/src/toolbar.jsx b/src/toolbar.jsx
index 81f9912..fb0e9e2 100644
--- a/src/toolbar.jsx
+++ b/src/toolbar.jsx
@@ -10,6 +10,7 @@ import MdSettings from 'react-icons/lib/md/settings'
 import MdLayers from 'react-icons/lib/md/layers'
 import MdSave from 'react-icons/lib/md/save'
 
+import { fullHeight } from './theme.js'
 import theme from './theme.js';
 
 export class Toolbar extends React.Component {
@@ -68,12 +69,10 @@ export class Toolbar extends React.Component {
 
 	render() {
 		return <Container style={{
+			...fullHeight,
 			zIndex: 100,
-			position: "fixed",
-			height: "100%",
-			left: "0",
-			top: "0",
-			bottom: "0",
+			left: 0,
+			top: 0,
 			backgroundColor: theme.colors.black }
 		}>
 			<Block>
diff --git a/src/workspace.jsx b/src/workspace.jsx
index 1f9904e..487c713 100644
--- a/src/workspace.jsx
+++ b/src/workspace.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { LayerList } from './layers/list.jsx'
 import { SettingsEditor } from './settings.jsx'
-import theme from './theme.js'
+import { colors, fullHeight } from './theme.js'
 
 /** The workspace drawer contains the editor components depending on the edit
  * context chosen in the toolbar. It holds the state of the layers.*/
@@ -35,14 +35,12 @@ export class WorkspaceDrawer extends React.Component {
 		}
 
 		return <div style={{
+			...fullHeight,
 			zIndex: 100,
-			position: "fixed",
 			left: 60,
 			width: 300,
-			top: 0,
-			bottom: 0,
 			overflow: "hidden",
-			backgroundColor: theme.colors.gray}
+			backgroundColor: colors.gray}
 		}>
 			{workspaceContent}
 		</div>