Map layout tweaks

Signed-off-by: Daniel Kastl <[email protected]>

Author: dkastl

src/components/gtt-client.ts

@@ -308,10 +308,11 @@ export class GttClient {
     this.setView()
     this.setGeocoding(this.map)
     this.setGeolocation(this.map)
-    this.toolbar.addControl (new FullScreen())
-    this.toolbar.addControl (new Rotate())
     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,16 +3,25 @@
  */
 .ol-map {
   width: 100%;
-  height: 420px;
+  height: 400px;
   border: 1px solid #E4E4E4;
 }
 #issue-form .ol-map {
   width: 100%;
   margin-bottom: 1em;
 }
 
+$breakpoint-tablet: 899px;
+@media (max-width: $breakpoint-tablet) {
+  .ol-map {
+    height: 340px;
+  }
+}
+
 .ol-control button {
   background-color: rgba(52, 73, 94, 0.8);
+  height: 32px;
+  width: 32px;
 }
 .ol-control button:hover {
   background-color: rgba(52, 73, 94, 1);
@@ -24,11 +33,21 @@
 .ol-full-screen button.ol-full-screen-false,
 .ol-rotate button.ol-rotate-reset,
 .ol-bar .ol-button button {
-  height: 32px;
-  width: 32px;
   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;
 }