Quellcode durchsuchen

add bootstrap style

Bernadette Elena Hammerle vor 4 Jahren
Ursprung
Commit
938705662e
2 geänderte Dateien mit 19 neuen und 7 gelöschten Zeilen
  1. 8 7
      src/Leaflet.js
  2. 11 0
      src/css/maps.css

+ 8 - 7
src/Leaflet.js

@@ -10,6 +10,7 @@ import {
 import "./css/maps.css";
 import {calcDistance} from "./helpers/distance";
 import {longitude, latitude, mapWidth, mapHeight, testPath} from "./config/variables";
+import {Button, Input} from 'reactstrap';
 
 export default class Leaflet extends React.Component{
   state = {
@@ -79,7 +80,7 @@ export default class Leaflet extends React.Component{
       .then(data => {
         let pathKeyCopy = this.state.pathKeys.slice();
         pathKeyCopy.push(this.state.savePathKey);
-        this.setState({pathKeys: pathKeyCopy})
+        this.setState({pathKeys: pathKeyCopy, savePathKey: ""})
       })
   }
 
@@ -148,17 +149,17 @@ export default class Leaflet extends React.Component{
         </div>
 
         <div className="mapInfo">
-          <button onClick={this.clearPath}>Clear path</button>
-          <button onClick={this.getDistance}>Calculate Distance</button>
+          <Button onClick={this.clearPath}>Clear path</Button>
+          <Button onClick={this.getDistance}>Calculate Distance</Button>
 
-          <button onClick={this.savePath}>save path</button>
-          <input type="text" onChange={this.setSavePathKey} value={this.state.savePathKey}/>
+          <Input type="text" onChange={this.setSavePathKey} value={this.state.savePathKey}/>
+          <Button onClick={this.savePath}>save path</Button>
 
-          <select name="paths" onChange={this.getPath.bind(this)}>
+          <Input type="select" name="select" id="savePath" onChange={this.getPath.bind(this)}>
             {this.state.pathKeys.map((name, idx) =>
               <option value={name} key={idx}>{name}</option>
             )}
-          </select>
+          </Input>
 
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km

+ 11 - 0
src/css/maps.css

@@ -14,6 +14,17 @@
   margin-bottom: 30px;
 }
 
+.form-control{
+  display: inline;
+  width: auto;
+  position: relative;
+  top: 2px;
+}
+
+button{
+  margin-right: 3px;
+}
+
 .controllers{  
   position: absolute;
   bottom: 0;