From 332fdffa7774b7c6644afd86069312ab01cfa9a4 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Wed, 11 Apr 2018 22:26:26 +0200
Subject: [PATCH] Move dropdown to left to not hide route/map center; footer
 padding (#66)

---
 css/style.css | 16 ++++++++++------
 index.html    | 22 +++++++++++-----------
 js/index.js   |  4 +++-
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/css/style.css b/css/style.css
index 474b3cf..4a176bd 100644
--- a/css/style.css
+++ b/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;
diff --git a/index.html b/index.html
index fff53f9..4ef3334 100644
--- a/index.html
+++ b/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">
-                    <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">
+                <form class="nav-item form-inline">
                     <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>
diff --git a/js/index.js b/js/index.js
index ce0195c..bd73df9 100644
--- a/js/index.js
+++ b/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();