ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

add tabs for profile & data + button group

Browse source
This commit is contained in:
Norbert Renner 2014-08-28 12:43:15 +02:00
parent 5a277b0a34
commit c190f6d48a
3 changed files with 42 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

16
css/style.css
View file

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

29
index.html
View file

@ -51,14 +51,29 @@
</table> </table>
</div> </div>
<div id="profile_div" class="hidden"> <div id="profile_div" class="hidden">
<form id="profile_upload" name="profile_upload">
<button id="clear">Clear</button>&nbsp; <ul id="tab" class="nav nav-tabs" role="tablist">
<a href="http://brouter.de/brouter/costfunctions.html" target="_blank">Help</a> <li class="active"><a href="#tab_profile" role="tab">Profile</a></li>
<input type="submit" value="Upload" /> <li><a href="#tab_data" role="tab">Data</a></li>
<div id="textarea_container"> </ul>
<textarea type="text" name="profile" spellcheck="false" wrap="off" maxlength="100000" placeholder="... paste your custom routing profile here ..."></textarea>
<div class="tab-content">
<div class="tab-pane active" id="tab_profile">
<form id="profile_upload" name="profile_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>
</form> <div class="tab-pane" id="tab_data">
</div>
</div>
</div> </div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script>

5
js/control/Profile.js
View file

@ -1,6 +1,5 @@
BR.Profile = BR.Control.extend({ BR.Profile = BR.Control.extend({
options: { options: {
heading: 'Profile',
divId: 'profile_div' 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('profile_upload').onsubmit = L.bind(this._submit, this);
L.DomUtil.get('clear').onclick = L.bind(this.clear, 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); return BR.Control.prototype.onAdd.call(this, map);
}, },