Merge pull request freeCodeCamp#9205 from dlwebdev/fix/mobile-map-header

Improved mobile layouts to map page

Author: Jonathan

client/less/map.less

@@ -74,16 +74,33 @@
     padding-top:30px;
   }
   p {
-  margin: 5px 0 20px;
+    margin: 5px 0 20px;
     @media (max-width: 720px) {
       margin-bottom:10px;
     }
+    @media only screen and (min-width: 480px) and (max-width: 670px) {
+      margin-top: -30px;
+      margin-bottom: 10px;
+      font-size: 14px;
+    }     
+    @media only screen and (min-width: 200px) and (max-width: 479px) {
+      margin-top: -30px;
+      margin-bottom: 10px;
+      font-size: 12px;
+    }   
   }
   hr {
     margin:30px 0;
+
     @media (max-width: 720px) {
       margin:25px 0;
     }
+    @media only screen and (min-width: 480px) and (max-width: 670px) {
+      margin: 15px 0;
+    }     
+    @media only screen and (min-width: 200px) and (max-width: 479px) {
+      margin: 10px 0;
+    }     
   }
   .flashMessage {
     position:fixed;
@@ -145,25 +162,25 @@
   #nested {
     margin:0 10px;
     @media (max-width: 400px) {
-    margin:0;
+      margin:0;
     }
   }
   a:focus {
-      text-decoration: none;
-      color:darkgreen;
+    text-decoration: none;
+    color:darkgreen;
   }
   a:focus:hover {
-      text-decoration: underline;
-      color:#001800;
+    text-decoration: underline;
+    color:#001800;
   }
   h2 > a {
-      width:100%;
-      display:block;
-      background:#efefef;
-      padding:10px 0;
-      padding-left:50px;
-      padding-right:20px;
-    }
+    width:100%;
+    display:block;
+    background:#efefef;
+    padding:10px 0;
+    padding-left:50px;
+    padding-right:20px;
+  }
 
   h3 {
     margin:15px 0;
@@ -194,20 +211,19 @@
   }
 
   .challengeBlockDescription {
-      margin:0;
-      margin-top:-10px;
-      padding:0 15px 23px 30px;
-    }
+    margin:0;
+    margin-top:-10px;
+    padding:0 15px 23px 30px;
+  }
 
   span.no-link-underline {
     position:absolute;
     margin-left:-30px;
     color: #666;
   }
-
   div > div:last-child {
     margin-bottom:30px
-  }
+  }  
 }
 .challengeBlockTime {
   font-size: 18px;
@@ -258,6 +274,81 @@
   }
 }
 
+@media only screen and (min-width: 480px) and (max-width: 670px) {
+  .map-fixed-header {
+    .row.map-buttons {
+      width: 50%;
+      float: left;
+      padding-bottom: 10px;
+      margin-left: 0px;
+      margin-right: 0px;
+      button, button.map-buttons {
+        width: 100%;
+      }
+      .input-group {
+        margin-top: 0;
+        width: 100%;
+      }    
+    }
+    .map-buttons:first-of-type {
+      float: right;
+      padding-left: 10px;
+    }    
+    hr {
+      clear: both;  
+      margin: 9px 0;    
+    }   
+  }
+  .map-accordion {
+    top: 136px;
+    h2 {
+      margin: 5px 0;
+      a {
+        font-size: 16px;
+      }
+    }
+    h3 > a {
+      font-size: 15px;
+    }
+    h3:first-child {
+      margin-top: 10px;
+    }
+  }
+}     
+@media only screen and (min-width: 200px) and (max-width: 479px) { 
+  .map-fixed-header {
+    .row.map-buttons {
+      width: 100%;
+      padding-bottom: 10px;
+      margin-left: 0px;
+      margin-right: 0px;
+      button, button.map-buttons {
+        width: 100%;
+      }
+      .input-group {
+        margin-top: 0;
+        width: 100%;
+      }    
+    }  
+  }
+
+  .map-accordion {
+    top: 172px;
+    h2 {
+      margin: 10px 0;
+      a {
+        font-size: 18px;
+      }      
+    }  
+    h3 > a {
+      font-size: 17px;
+    }    
+    h3:first-child {
+      margin-top: 10px;
+    }      
+  }
+} 
+
 .map-aside-action-item {
     display: -webkit-flex;
     display: flex;
@@ -316,6 +407,46 @@
     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzEuNDI5IDE3MS40MjkiIGZpbGw9IiMzYTMxMzMiPjxwYXRoIGQ9Ik0xMjIuNDMzLDEwNi4xMzhsLTE2LjI5NSwxNi4yOTVjLTAuNzQ0LDAuNzQ0LTEuNiwxLjExNi0yLjU2NiwxLjExNmMtMC45NjgsMC0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTUuMjktMTUuMjkgbC0xNS4yOSwxNS4yOWMtMC43NDQsMC43NDQtMS42LDEuMTE2LTIuNTY3LDEuMTE2cy0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTYuMjk0LTE2LjI5NWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY2IGMwLTAuOTY4LDAuMzcyLTEuODIzLDEuMTE2LTIuNTY3bDE1LjI5LTE1LjI5bC0xNS4yOS0xNS4yOWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY3czAuMzcyLTEuODIzLDEuMTE2LTIuNTY3IEw2NS4yOSw0OC45OTZjMC43NDQtMC43NDQsMS42LTEuMTE2LDIuNTY3LTEuMTE2czEuODIzLDAuMzcyLDIuNTY3LDEuMTE2bDE1LjI5LDE1LjI5bDE1LjI5LTE1LjI5IGMwLjc0NC0wLjc0NCwxLjYtMS4xMTYsMi41NjctMS4xMTZjMC45NjcsMCwxLjgyMiwwLjM3MiwyLjU2NiwxLjExNmwxNi4yOTUsMTYuMjk0YzAuNzQ0LDAuNzQ0LDEuMTE2LDEuNiwxLjExNiwyLjU2NyBzLTAuMzcyLDEuODIzLTEuMTE2LDIuNTY3bC0xNS4yOSwxNS4yOWwxNS4yOSwxNS4yOWMwLjc0NCwwLjc0NCwxLjExNiwxLjYsMS4xMTYsMi41NjcgQzEyMy41NDksMTA0LjUzOSwxMjMuMTc3LDEwNS4zOTQsMTIyLjQzMywxMDYuMTM4eiBNMTQ2LjQyOSw4NS43MTRjMC0xMS4wMTItMi43MTctMjEuMTY4LTguMTQ4LTMwLjQ2OSBzLTEyLjc5Ny0xNi42NjctMjIuMDk4LTIyLjA5OFM5Ni43MjYsMjUsODUuNzE0LDI1cy0yMS4xNjgsMi43MTYtMzAuNDY5LDguMTQ3UzM4LjU3OSw0NS45NDUsMzMuMTQ3LDU1LjI0NlMyNSw3NC43MDMsMjUsODUuNzE0IHMyLjcxNiwyMS4xNjgsOC4xNDcsMzAuNDY5czEyLjc5NywxNi42NjYsMjIuMDk4LDIyLjA5OHMxOS40NTcsOC4xNDgsMzAuNDY5LDguMTQ4czIxLjE2OC0yLjcxNywzMC40NjktOC4xNDggczE2LjY2Ni0xMi43OTcsMjIuMDk4LTIyLjA5OFMxNDYuNDI5LDk2LjcyNiwxNDYuNDI5LDg1LjcxNHogTTE3MS40MjksODUuNzE0YzAsMTUuNTUxLTMuODMyLDI5Ljg5My0xMS40OTYsNDMuMDI0IGMtNy42NjQsMTMuMTMzLTE4LjA2MiwyMy41My0zMS4xOTQsMzEuMTk0Yy0xMy4xMzIsNy42NjQtMjcuNDc0LDExLjQ5Ni00My4wMjQsMTEuNDk2cy0yOS44OTItMy44MzItNDMuMDI0LTExLjQ5NiBjLTEzLjEzMy03LjY2NC0yMy41MzEtMTguMDYyLTMxLjE5NC0zMS4xOTRDMy44MzIsMTE1LjYwNywwLDEwMS4yNjUsMCw4NS43MTRTMy44MzIsNTUuODIyLDExLjQ5Niw0Mi42OSBjNy42NjQtMTMuMTMzLDE4LjA2Mi0yMy41MzEsMzEuMTk0LTMxLjE5NEM1NS44MjIsMy44MzIsNzAuMTY0LDAsODUuNzE0LDBzMjkuODkzLDMuODMyLDQzLjAyNCwxMS40OTYgYzEzLjEzMyw3LjY2NCwyMy41MywxOC4wNjIsMzEuMTk0LDMxLjE5NEMxNjcuNTk3LDU1LjgyMiwxNzEuNDI5LDcwLjE2NCwxNzEuNDI5LDg1LjcxNHoiLz48L3N2Zz4=)
 }
 
+.map-aside-body {
+  .map-fixed-header {
+    p {
+      margin-top: 0;
+      font-size: 16px;
+    }
+    .row.map-buttons {
+      float: none;
+      width: 100%;
+      text-align: center;
+      button {
+        width: 300px;
+      }
+      .input-group {
+        width: 300px;
+        padding-top: 5px;
+      }
+    }
+  }
+  .map-buttons:first-of-type {
+    float: none;
+    padding-left: 0;
+  }
+  .map-accordion {
+    top: 180px;
+    h2 {
+      margin: 15px 0;
+      a {
+        padding: 10px 0;
+        padding-left: 50px;
+        padding-right: 20px;
+        font-size: 20px;        
+      }
+    }
+    h3 > a {
+      font-size: 20px;
+    }
+  }
+}
+
 .night {
   .map-fixed-header {
     background-color: @night-body-bg;