MAPG-35 introduce layout for mobile

further style fixes and adjustments

public/static/css/mapguesser.css

@@ -27,16 +27,17 @@ p {
 
 button {
     cursor: pointer;
-    font-size: 15px;
+    font-size: 16px;
     font-weight: 500;
     color: #ffffff;
     background-color: #5e77aa;
-    padding: 8px 15px;
+    padding: 0 15px;
+    height: 35px;
     border: none;
     border-radius: 3px;
 }
 
-button:hover, button:focus {
+button:enabled:hover, button:enabled:focus {
     background-color: #29457f;
     outline: none;
 }
@@ -44,10 +45,34 @@ button:hover, button:focus {
 button:disabled {
     cursor: no-drop;
     color: #dddddd;
-    background-color: #808080;
     opacity: 0.7;
 }
 
+button.block {
+    padding: 0;
+    width: 100%;
+}
+
+button.gray {
+    background-color: #808080;
+}
+
+button.gray:hover, button.gray:focus {
+    background-color: #555555;
+}
+
+div.buttonContainer {
+    height: 35px;
+}
+
+div.buttonContainer.top {
+    margin-bottom: 5px;
+}
+
+div.buttonContainer.bottom {
+    margin-top: 5px;
+}
+
 #loading {
     position: absolute;
     width: 40px;
@@ -56,8 +81,7 @@ button:disabled {
     left: 50%;
     margin-top: -20px;
     margin-left: -20px;
-    z-index: 2;
-    visibility: visible;
+    z-index: 3;
 }
 
 #panorama {
@@ -68,57 +92,18 @@ button:disabled {
 
 #guess {
     position: absolute;
-    right: 20px;
     bottom: 20px;
-    width: 250px;
-    height: 150px;
-    opacity: 0.5;
+    right: 20px;
     z-index: 2;
-    visibility: visible;
-    transition-property: width, height, opacity;
-    transition-duration: 0.1s;
-    transition-delay: 0.8s;
 }
 
-#guess:hover {
-    width: 500px;
-    height: 350px;
-    opacity: 0.95;
-    transition-delay: 0s;
-}
-
-#guess > #guessMap {
-    height: 115px;
+#guessMap {
     width: 100%;
-    transition-property: height;
-    transition-duration: 0.1s;
-    transition-delay: 0.8s;
     border-radius: 3px;
 }
 
-#guess:hover > #guessMap {
-    height: 315px;
-    transition-delay: 0s;
-}
-
-#guessButtonContainer {
-    margin-top: 5px;
-    height: 30px;
-}
-
-#guessButton {
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-}
-
 #result {
     position: absolute;
-    top: 50px;
-    left: 50px;
-    right: 50px;
-    bottom: 50px;
     opacity: 0.95;
     z-index: 2;
     visibility: hidden;
@@ -152,16 +137,93 @@ button:disabled {
 }
 
 #scoreBarBase {
-    height: 20px;
-    width: 60%;
+    height: 24px;
     margin: 0 auto;
     background-color: #eeeeee;
-    border-radius: 3px;
 }
 
 #scoreBar {
     height: 100%;
     width: 0;
+    border-radius: 3px;
     transition-property: width;
     transition-duration: 2.0s;
 }
+
+@media screen and (max-width: 599px) {
+    button {
+        padding: 0;
+        width: 100%;
+    }
+
+    #showGuessButtonContainer {
+        position: absolute;
+        left: 20px;
+        bottom: 20px;
+        right: 20px;
+        z-index: 2;
+    }
+
+    #guess {
+        left: 20px;
+        top: 20px;
+        opacity: 0.95;
+        visibility: hidden;
+    }
+
+    #guessMap {
+        height: calc(100% - 80px);
+    }
+
+    #result {
+        top: 20px;
+        left: 20px;
+        right: 20px;
+        bottom: 20px;
+    }
+
+    #scoreBarBase {
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 600px) {
+    #showGuessButtonContainer {
+        visibility: hidden;
+    }
+
+    #guess {
+        width: 250px;
+        height: 150px;
+        opacity: 0.5;
+        transition-property: width, height, opacity;
+        transition-duration: 0.1s;
+        transition-delay: 0.8s;
+    }
+
+    #guess:hover {
+        width: 500px;
+        height: 350px;
+        opacity: 0.95;
+        transition-delay: 0s;
+    }
+
+    #closeGuessButtonContainer {
+        display: none;
+    }
+
+    #guessMap {
+        height: calc(100% - 40px);
+    }
+
+    #result {
+        top: 50px;
+        left: 50px;
+        right: 50px;
+        bottom: 50px;
+    }
+
+    #scoreBarBase {
+        width: 60%;
+    }
+}