Do some quick mobile stylings

BlueMapCore/src/main/webroot/js/libs/Controls.js

@@ -343,12 +343,17 @@ export default class Controls {
 	};
 
 	onTouchDown = event => {
+		if (event.pointerType === "mouse") return;
+
+		$(":focus").blur();
+
 		this.touchStart.x = this.targetPosition.x;
 		this.touchStart.y = this.targetPosition.z;
 		this.state = Controls.STATES.MOVE;
 	};
 
 	onTouchMove = event => {
+		if (event.pointerType === "mouse") return;
 		if (this.state !== Controls.STATES.MOVE) return;
 
 		this.touchDelta.x = event.deltaX;
@@ -363,6 +368,8 @@ export default class Controls {
 	};
 
 	onTouchUp = event => {
+		if (event.pointerType === "mouse") return;
+
 		this.state = Controls.STATES.NONE;
 	};
 

BlueMapCore/src/main/webroot/style/modules/compass.scss

@@ -1,6 +1,11 @@
 #bluemap-compass {
-    width: 30px;
-    height: 30px;
+    width: 2rem;
+    height: 2rem;
+
+    #bluemap-compass-needle {
+        width: 100%;
+        height: 100%;
+    }
 
     &:hover #bluemap-compass-needle {
         filter: invert(1);

BlueMapCore/src/main/webroot/style/modules/info.scss

@@ -1,6 +1,6 @@
 #bluemap-info {
-    width: 30px;
-    height: 30px;
+    width: 2rem;
+    height: 2rem;
     text-align: center;
 
     &::after {

BlueMapCore/src/main/webroot/style/modules/mapmenu.scss

@@ -1,5 +1,5 @@
 #bluemap-mapmenu {
-    width: 200px;
+    width: 15rem;
     cursor: pointer;
 
     .selection, .dropdown li {

BlueMapCore/src/main/webroot/style/modules/position.scss

@@ -2,7 +2,7 @@
   position: relative;
 
   input {
-    width: 60px;
+    width: 4rem;
     height: 100%;
     border: none;
     outline: none;

BlueMapCore/src/main/webroot/style/modules/settings.scss

@@ -1,6 +1,11 @@
 #bluemap-settings {
-  width: 30px;
-  height: 30px;
+  width: 2rem;
+  height: 2rem;
+
+  > img {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 #bluemap-settings.active:not(:hover) {
@@ -18,7 +23,7 @@
 
 #bluemap-settings-quality {
   width: 150px;
-  height: 30px;
+  height: 2rem;
 
 }
 

BlueMapCore/src/main/webroot/style/style.scss

@@ -10,17 +10,21 @@ html, body {
     padding: 0;
 
 	font-size: 15px;
-	line-height: 15px;
+	line-height: 1rem;
     font-family: Verdana,Helvetica,Arial,sans-serif;
 
 	color: #333333;
 	background-color: #dddddd;
+
+    @media (max-width: 900px) {
+        font-size: 17px;
+    }
 }
 
 .box {
     color: #333333;
     background-color: white;
-    box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.8);
+    box-shadow: 0 1px 4px 0 rgba(50, 50, 50, 0.8);
 }
 
 .button {
@@ -37,7 +41,7 @@ html, body {
     background-color: white;
 	position: relative;
 
-    transition: all 0.3s;
+    transition: background-color 0.3s;
 }
 
 .dropdown-container:hover {
@@ -53,7 +57,7 @@ html, body {
 	overflow: hidden;
 
 	transition: all 0.3s;
-	max-height: 0px;
+	max-height: 0;
 }
 
 .dropdown-container:hover > .dropdown {
@@ -104,9 +108,15 @@ html, body {
     top: 10px;
     right: 10px;
 
-    line-height: 30px;
+    line-height: 2rem;
 
     display: flex;
+
+    @media (max-width: 900px) {
+        display: none;
+    }
+
+
 }
 
 #bluemap-topright > *:not(:last-child) {
@@ -118,9 +128,34 @@ html, body {
     top: 10px;
     left: 10px;
 
-    line-height: 30px;
+    line-height: 2rem;
+
+    white-space: nowrap;
 
     display: flex;
+  
+    @media (max-width: 900px) {
+        top: 0;
+        left: 0;
+        width: 100%;
+
+        >:last-child {
+            flex-grow: 1;
+        }
+    }
+
+    @media (max-width: 500px) {
+        flex-wrap: wrap;
+
+        > :not(:first-child) {
+            flex-grow: 1;
+        }
+
+        >:last-child {
+            width: 100%;
+            border-top: solid 1px #dddddd;
+        }
+    }
 }
 
 #bluemap-topleft > *:not(:last-child) {