add tabs for profile & data + button group

css/style.css

@@ -132,16 +132,21 @@ td {
     bottom: 0px;
 }
 
+.tab-content {
+    padding: 5px 0px;
+}
+/*
 #profile_upload input {
     position: absolute;
     top: 6px;
     right: 8px;
 }
+*/
 
 /* http://snook.ca/archives/html_and_css/absolute-position-textarea */
 #textarea_container {
     position: absolute;
-    top: 32px;
+    top: 64px;
     bottom: 6px;
     left: 8px;
     right: 8px;
@@ -186,6 +191,10 @@ textarea:focus {
   }
 }
 
+/*
+ * Bootstrap
+ */
+
 /* override Bootstrap label for Leaflet layer switcher */
 .leaflet-control-layers label {
     max-width: none;
@@ -197,3 +206,8 @@ textarea:focus {
        Bootstrap    | 23      | 22     |*/
     height: 21px;
 }
+
+/* smaller tab height */
+.nav > li > a {
+    padding: 2px 15px;
+}

index.html

@@ -51,15 +51,30 @@
         </table>
     </div>
     <div id="profile_div" class="hidden">
+      
+        <ul id="tab" class="nav nav-tabs" role="tablist">
+            <li class="active"><a href="#tab_profile" role="tab">Profile</a></li>
+            <li><a href="#tab_data" role="tab">Data</a></li>
+        </ul>
+
+        <div class="tab-content">
+            <div class="tab-pane active" id="tab_profile">
                 <form id="profile_upload" name="profile_upload">
-            <button id="clear">Clear</button>&nbsp;
-            <a href="http://brouter.de/brouter/costfunctions.html" target="_blank">Help</a>
-            <input type="submit" value="Upload" />
+                    &nbsp;<div class="btn-group">
+                        <button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-upload"></span> Upload</button>
+                        <!-- TODO type="reset" -->
+                        <button id="clear" type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-ban-circle"></span> Clear</button>
+                    </div>
+                    <a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn-xs">Help</a>
                     <div id="textarea_container">
                         <textarea type="text" name="profile" spellcheck="false" wrap="off" maxlength="100000" placeholder="... paste your custom routing profile here ..."></textarea>
                     </div>
                 </form>
             </div>
+            <div class="tab-pane" id="tab_data">
+            </div>
+        </div>
+    </div>
 
     <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script>
 

js/control/Profile.js

@@ -1,6 +1,5 @@
 BR.Profile = BR.Control.extend({
     options: {
-        heading: 'Profile',
         divId: 'profile_div'
     },
 
@@ -8,6 +7,10 @@ BR.Profile = BR.Control.extend({
         L.DomUtil.get('profile_upload').onsubmit = L.bind(this._submit, this);
         L.DomUtil.get('clear').onclick = L.bind(this.clear, this);
 
+        $('#tab a').click(function (e) {
+          e.preventDefault();
+          $(this).tab('show');
+        });
 
         return BR.Control.prototype.onAdd.call(this, map);
     },