Merge pull request #184 from gtt-project/fix/styling

Map improvements

Author: dkastl

src/components/gtt-client.ts

@@ -17,7 +17,7 @@ import {
   Select,
 } from 'ol/interaction'
 import { focus as events_condifition_focus } from 'ol/events/condition'
-import { defaults as control_defaults } from 'ol/control'
+import { defaults as control_defaults, FullScreen, Rotate } from 'ol/control'
 import { transform, fromLonLat, transformExtent } from 'ol/proj'
 import { createEmpty, extend, getCenter, containsCoordinate } from 'ol/extent'
 import { FeatureCollection } from 'geojson'
@@ -306,10 +306,13 @@ export class GttClient {
     this.toolbar.setPosition('bottom-left' as position)
     this.map.addControl(this.toolbar)
     this.setView()
-    this.setGeolocation(this.map)
     this.setGeocoding(this.map)
+    this.setGeolocation(this.map)
     this.parseHistory()
 
+    this.map.addControl (new FullScreen())
+    this.map.addControl (new Rotate())
+
     // Control button
     const maximizeCtrl = new Button({
       html: '<i class="material-icons" >zoom_out_map</i>',

src/stylesheets/app.scss

@@ -3,19 +3,53 @@
  */
 .ol-map {
   width: 100%;
-  height: 300px;
+  height: 400px;
   border: 1px solid #E4E4E4;
 }
 #issue-form .ol-map {
-  width: 92%;
-  margin: 1em auto;
+  width: 100%;
+  margin-bottom: 1em;
+}
+
+$breakpoint-tablet: 899px;
+@media (max-width: $breakpoint-tablet) {
+  .ol-map {
+    height: 340px;
+  }
 }
 
 .ol-control button {
-  background-color: rgba(40, 40, 40, 0.8);
+  background-color: rgba(52, 73, 94, 0.8);
+  height: 32px;
+  width: 32px;
 }
 .ol-control button:hover {
-  background-color: rgba(40, 40, 40, 1);
+  background-color: rgba(52, 73, 94, 1);
+}
+
+.ol-zoom button.ol-zoom-in,
+.ol-zoom button.ol-zoom-out,
+.ol-full-screen button.ol-full-screen-true,
+.ol-full-screen button.ol-full-screen-false,
+.ol-rotate button.ol-rotate-reset,
+.ol-bar .ol-button button {
+  font-size: 1.6em;
+}
+
+div.ol-full-screen {
+  right: 3.0em;
+}
+
+div.ol-rotate {
+  right: 5.5em;
+}
+
+div.ol-full-screen {
+  right: 3.0em;
+}
+
+.ol-control.ol-bar.ol-top.ol-left, .ol-control.ol-bar.ol-top.ol-right {
+  top: 5.2em;
 }
 
 .tabular .ol-layerswitcher label {
@@ -43,6 +77,10 @@ i[id^='icon_settings_tracker_'] {
   text-align: center;
 }
 
+.ol-control.ol-layerswitcher-popup {
+  top: 0.5em;
+}
+
 .ol-control button .material-icons {
   font-size: inherit;
 }