schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-11-10 05:57:46 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove layout CSS styling

Browse source
This commit is contained in:
lukasmartinelli 2016-09-10 16:11:43 +02:00
parent e4049fa5da
commit 8582496811
5 changed files with 15 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/layout.scss
View file

@ -1,11 +0,0 @@
.map {
position: fixed;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
& > div {
height: 100%;
}
}

14
src/map.jsx
View file

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import MapboxGl from 'mapbox-gl'; 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 { fullHeight } from './theme.js'
import Immutable from 'immutable' import Immutable from 'immutable'
@ -50,11 +50,11 @@ export class Map extends React.Component {
} }
render() { render() {
return <div style={{ return <div
...fullHeight, ref={x => this.container = x}
width: "100%", style={{
}}> ...fullHeight,
<div ref={x => this.container = x}></div> width: "100%",
</div> }}></div>
} }
} }

2
src/theme.js
View file

@ -32,7 +32,7 @@ const themeColors = {
error: baseColors.red error: baseColors.red
} }
const colors = { export const colors = {
...baseColors, ...baseColors,
...themeColors ...themeColors
} }

9
src/toolbar.jsx
View file

@ -10,6 +10,7 @@ import MdSettings from 'react-icons/lib/md/settings'
import MdLayers from 'react-icons/lib/md/layers' import MdLayers from 'react-icons/lib/md/layers'
import MdSave from 'react-icons/lib/md/save' import MdSave from 'react-icons/lib/md/save'
import { fullHeight } from './theme.js'
import theme from './theme.js'; import theme from './theme.js';
export class Toolbar extends React.Component { export class Toolbar extends React.Component {
@ -68,12 +69,10 @@ export class Toolbar extends React.Component {
render() { render() {
return <Container style={{ return <Container style={{
...fullHeight,
zIndex: 100, zIndex: 100,
position: "fixed", left: 0,
height: "100%", top: 0,
left: "0",
top: "0",
bottom: "0",
backgroundColor: theme.colors.black } backgroundColor: theme.colors.black }
}> }>
<Block> <Block>

8
src/workspace.jsx
View file

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import { LayerList } from './layers/list.jsx' import { LayerList } from './layers/list.jsx'
import { SettingsEditor } from './settings.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 /** The workspace drawer contains the editor components depending on the edit
* context chosen in the toolbar. It holds the state of the layers.*/ * 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={{ return <div style={{
...fullHeight,
zIndex: 100, zIndex: 100,
position: "fixed",
left: 60, left: 60,
width: 300, width: 300,
top: 0,
bottom: 0,
overflow: "hidden", overflow: "hidden",
backgroundColor: theme.colors.gray} backgroundColor: colors.gray}
}> }>
{workspaceContent} {workspaceContent}
</div> </div>