Move dropdown to left to not hide route/map center; footer padding (#66)

css/style.css

@@ -38,6 +38,16 @@ table.dataTable {
     flex: auto;
 }
 
+.navbar {
+    /* align with leaflet-control */
+    padding: .5rem 10px;
+}    
+.navbar-brand {
+    float: right;
+    margin-left: 1rem;
+    margin-right: 0;
+}
+
 footer {
     flex: none;
 
@@ -75,12 +85,6 @@ footer {
     margin-bottom: 0
 }
 
-.bootstrap-select.btn-group:not(.input-group-btn),
-.bootstrap-select.btn-group[class*="col-"] {
-    margin-left: 10px;
-}
-
-
 .axis path,
 .axis line {
     stroke: #818a91;

index.html

@@ -21,17 +21,7 @@
         </div>
         <div class="collapse navbar-toggleable-sm" id="collapsingNavbar">
             <div class="nav navbar-nav">
-                <div class="nav-item dropdown">
+                <form class="nav-item form-inline">
-                    <a class="nav-link dropdown-toggle" href="" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
-                        <span class="fa fa-lg fa-cloud-download"></span>&nbsp;Download</a>
-                    <div class="dropdown-menu">
-                        <a class="dropdown-item" id="dl-gpx" href="#" disabled>GPX</a>
-                        <a class="dropdown-item" id="dl-kml" href="#" disabled>KML</a>
-                        <a class="dropdown-item" id="dl-geojson" href="#" disabled>GeoJSON</a>
-                        <a class="dropdown-item" id="dl-csv" href="#" disabled>data CSV</a>
-                    </div>
-                </div>
-                <form class="navbar-form">
                     <div class="form-group">
                         <select class="selectpicker show-tick" id="profile-alternative" multiple>
                             <optgroup label="Profile" data-max-options="1" data-icon="fa-bicycle" id="profile">
@@ -46,6 +36,16 @@
                         </select>
                     </div>
                 </form>
+                <div class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
+                        <span class="fa fa-lg fa-cloud-download"></span>&nbsp;Download</a>
+                    <div class="dropdown-menu">
+                        <a class="dropdown-item" id="dl-gpx" href="#" disabled>GPX</a>
+                        <a class="dropdown-item" id="dl-kml" href="#" disabled>KML</a>
+                        <a class="dropdown-item" id="dl-geojson" href="#" disabled>GeoJSON</a>
+                        <a class="dropdown-item" id="dl-csv" href="#" disabled>data CSV</a>
+                    </div>
+                </div>
             </div>
         </div>
     </nav>

js/index.js

@@ -41,7 +41,9 @@
         // By default bootstrap-select use glyphicons
         $('.selectpicker').selectpicker({
             iconBase: 'fa',
-            tickIcon: 'fa-check'
+            tickIcon: 'fa-check',
+            // don't overlap with footer
+            windowPadding: [0, 0, 40, 0]
         });
 
         search = new BR.Search();