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

Merge pull request #383 from bagage/feat/improve-mobile

Browse source 
Feat/improve mobile
This commit is contained in:
Norbert Renner 2021-03-19 18:10:30 +01:00 • committed by GitHub
commit d3e344fd25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 442 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

137
css/style.css
View file

@ -242,10 +242,6 @@ input#trackname:focus:invalid {
display: flex; display: flex;
} }
#profile_buttons {
padding-top: 4px;
}
/* track messages (data tab) */ /* track messages (data tab) */
#tab_data, #tab_data,
.CodeMirror { .CodeMirror {
@ -788,3 +784,136 @@ table.dataTable.display tbody tr:hover.selected {
.leaflet-control-layers-selector[disabled] ~ span { .leaflet-control-layers-selector[disabled] ~ span {
color: #777; color: #777;
} }
/* make modals fullscreen on small devices (code from bootstrap 5) */
.modal-fullscreen {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
}
.modal-fullscreen .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-fullscreen .modal-header {
border-radius: 0;
}
.modal-fullscreen .modal-body {
overflow-y: auto;
}
.modal-fullscreen .modal-footer {
border-radius: 0;
}
@media (max-width: 575.98px) {
.modal-fullscreen-sm-down {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
}
.modal-fullscreen-sm-down .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-fullscreen-sm-down .modal-header {
border-radius: 0;
}
.modal-fullscreen-sm-down .modal-body {
overflow-y: auto;
}
.modal-fullscreen-sm-down .modal-footer {
border-radius: 0;
}
}
@media (max-width: 767.98px) {
.modal-fullscreen-md-down {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
}
.modal-fullscreen-md-down .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-fullscreen-md-down .modal-header {
border-radius: 0;
}
.modal-fullscreen-md-down .modal-body {
overflow-y: auto;
}
.modal-fullscreen-md-down .modal-footer {
border-radius: 0;
}
}
@media (max-width: 991.98px) {
.modal-fullscreen-lg-down {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
}
.modal-fullscreen-lg-down .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-fullscreen-lg-down .modal-header {
border-radius: 0;
}
.modal-fullscreen-lg-down .modal-body {
overflow-y: auto;
}
.modal-fullscreen-lg-down .modal-footer {
border-radius: 0;
}
}
@media (max-width: 1199.98px) {
.modal-fullscreen-xl-down {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
}
.modal-fullscreen-xl-down .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-fullscreen-xl-down .modal-header {
border-radius: 0;
}
.modal-fullscreen-xl-down .modal-body {
overflow-y: auto;
}
.modal-fullscreen-xl-down .modal-footer {
border-radius: 0;
}
}
@media (max-width: 1399.98px) {
.modal-fullscreen-xxl-down {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
}
.modal-fullscreen-xxl-down .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-fullscreen-xxl-down .modal-header {
border-radius: 0;
}
.modal-fullscreen-xxl-down .modal-body {
overflow-y: auto;
}
.modal-fullscreen-xxl-down .modal-footer {
border-radius: 0;
}
}

511
index.html
View file

@ -11,6 +11,7 @@
<link rel="stylesheet" href="dist/brouter-web.css" /> <link rel="stylesheet" href="dist/brouter-web.css" />
<!-- endinject --> <!-- endinject -->
</head> </head>
<body class="flexcolumn"> <body class="flexcolumn">
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button <button
@ -60,7 +61,7 @@
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
data-i18n="[title]keyboard.generic-shortcut" data-i18n="[title]keyboard.generic-shortcut"
data-i18n-options='{ "action": "$t(navbar.export-tooltip)", "key": "X" }' data-i18n-options="{ 'action': '$t(navbar.export-tooltip)', 'key': 'X' }"
title="Export route" title="Export route"
> >
<span class="fa fa-lg fa-cloud-download" aria-hidden="true"> </span> <span class="fa fa-lg fa-cloud-download" aria-hidden="true"> </span>
@ -70,7 +71,6 @@
<div class="nav-item dropdown"> <div class="nav-item dropdown">
<a <a
class="nav-link dropdown-toggle" class="nav-link dropdown-toggle"
href=""
data-toggle="dropdown" data-toggle="dropdown"
href="#" href="#"
role="button" role="button"
@ -78,12 +78,12 @@
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
data-i18n="[title]navbar.load.tooltip" data-i18n="[title]navbar.load.tooltip"
data-i18n-options='{ data-i18n-options="{
"tracksAction": "$t(navbar.load.tracks)", 'tracksAction': '$t(navbar.load.tracks)',
"tracksKey": "O", 'tracksKey': 'O',
"nogosAction": "$t(navbar.load.nogos)", 'nogosAction': '$t(navbar.load.nogos)',
"nogosKey": "$t(keyboard.shift)+O" 'nogosKey': '$t(keyboard.shift)+O'
}' }"
title="Load route" title="Load route"
> >
<span class="fa fa-lg fa-cloud-upload" aria-hidden="true"> </span> <span class="fa fa-lg fa-cloud-upload" aria-hidden="true"> </span>
@ -100,7 +100,7 @@
class="dropdown-item" class="dropdown-item"
data-i18n="trackasroute.title" data-i18n="trackasroute.title"
data-toggle="modal" data-toggle="modal"
data-target="#loadedittrackdlg" data-target="#loadedittrack"
href="#" href="#"
id="navbarLoadEditTracks" id="navbarLoadEditTracks"
>Track as Route</a >Track as Route</a
@ -119,7 +119,7 @@
<div <div
class="nav-item" class="nav-item"
data-i18n="[title]keyboard.generic-shortcut" data-i18n="[title]keyboard.generic-shortcut"
data-i18n-options='{ "action": "$t(about.tooltip)", "key": "H" }' data-i18n-options="{ 'action': '$t(about.tooltip)', 'key': 'H' }"
title="Show more information about BRouter-Web" title="Show more information about BRouter-Web"
> >
<a class="nav-link" href="#" data-toggle="modal" data-target="#about" <a class="nav-link" href="#" data-toggle="modal" data-target="#about"
@ -140,7 +140,7 @@
aria-labelledby="Credits window" aria-labelledby="Credits window"
aria-hidden="true" aria-hidden="true"
> >
<div class="modal-dialog" role="document"> <div class="modal-dialog modal-fullscreen-md-down" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" data-i18n="credits.title">Credits</h4> <h4 class="modal-title" data-i18n="credits.title">Credits</h4>
@ -181,6 +181,11 @@
<h5 data-i18n="credits.map-tiles">Map tiles</h5> <h5 data-i18n="credits.map-tiles">Map tiles</h5>
<dl id="credits-maps"></dl> <dl id="credits-maps"></dl>
</div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-i18n="modal.close" data-dismiss="modal">
Close
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -194,7 +199,7 @@
aria-labelledby="Layers window" aria-labelledby="Layers window"
aria-hidden="true" aria-hidden="true"
> >
<div class="modal-dialog modal-lg" role="document"> <div class="modal-dialog modal-lg modal-fullscreen-md-down" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" data-i18n="layers.customize">Customize layers</h4> <h4 class="modal-title" data-i18n="layers.customize">Customize layers</h4>
@ -261,7 +266,7 @@
aria-labelledby="About window" aria-labelledby="About window"
aria-hidden="true" aria-hidden="true"
> >
<div class="modal-dialog" role="document"> <div class="modal-dialog modal-fullscreen-md-down" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" data-i18n="about.title">About</h4> <h4 class="modal-title" data-i18n="about.title">About</h4>
@ -341,7 +346,7 @@
on the client. on the client.
</p> </p>
</div> </div>
<div class="modal-footer mt-4"> <div class="modal-footer">
<button <button
type="button" type="button"
class="btn btn-secondary" class="btn btn-secondary"
@ -368,7 +373,7 @@
aria-labelledby="What's new window" aria-labelledby="What's new window"
aria-hidden="true" aria-hidden="true"
> >
<div class="modal-dialog modal-lg" role="document"> <div class="modal-dialog modal-lg modal-fullscreen-md-down" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" data-i18n="whatsnew.title">What's new?</h4> <h4 class="modal-title" data-i18n="whatsnew.title">What's new?</h4>
@ -379,7 +384,7 @@
<div class="modal-body"> <div class="modal-body">
<!-- will be filled automatically --> <!-- will be filled automatically -->
</div> </div>
<div class="modal-footer mt-4"> <div class="modal-footer">
<button type="button" class="btn btn-primary" data-i18n="modal.close" data-dismiss="modal"> <button type="button" class="btn btn-primary" data-i18n="modal.close" data-dismiss="modal">
Close Close
</button> </button>
@ -388,83 +393,6 @@
</div> </div>
</div> </div>
<!-- Load nogos modal window -->
<div
class="modal fade"
id="loadNogos"
tabindex="-1"
role="dialog"
aria-labelledby="Load nogos window"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" data-i18n="loadNogos.title">Load no-go areas</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p id="nogoError" class="invalid-feedback" style="display: none"></p>
<form>
<fieldset>
<legend data-i18n="loadNogos.source">Source</legend>
<p>
<input type="text" id="nogoJSON" hidden />
<label for="nogoURL" data-i18n="loadNogos.url">URL: </label>
<input type="text" name="nogoURL" id="nogoURL" /><br />
or<br />
<label for="nogoFile" data-i18n="loadNogos.file">File (.geojson): </label>
<input type="file" accept=".geojson" name="nogoFile" id="nogoFile" />
</p>
</fieldset>
<fieldset>
<legend data-i18n="loadNogos.defaultProperties">Default properties</legend>
<p>
<label for="nogoWeight" data-i18n="loadNogos.nogoWeight"
>No-go weight (-1 means impassable):
</label>
<input type="number" name="nogoWeight" id="nogoWeight" value="-1" min="-1" />
</p>
<p>
<label for="nogoRadius" data-i18n="loadNogos.nogoRadius"
>No-go radius for points (in meters):
</label>
<input type="number" name="nogoRadius" id="nogoRadius" value="20" min="0" />
</p>
<p>
<label for="nogoBuffer" data-i18n="loadNogos.nogoBuffer"
>Buffer no-go areas (in meters):
</label>
<input type="number" name="nogoBuffer" id="nogoBuffer" value="0" min="0" />
</p>
</fieldset>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-i18n="[value]modal.close"
data-dismiss="modal"
>
Close
</button>
<button
type="button"
class="btn btn-primary"
data-i18n="[value]loadNogos.load"
id="submitNogos"
>
Load
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Export modal window --> <!-- Export modal window -->
<div <div
class="modal fade" class="modal fade"
@ -474,7 +402,7 @@
aria-labelledby="Export route window" aria-labelledby="Export route window"
aria-hidden="true" aria-hidden="true"
> >
<div class="modal-dialog" role="document"> <div class="modal-dialog modal-fullscreen-md-down" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" data-i18n="export.title">Export route</h4> <h4 class="modal-title" data-i18n="export.title">Export route</h4>
@ -565,26 +493,22 @@
</div> </div>
</div> </div>
</fieldset> </fieldset>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-i18n="modal.close"
data-dismiss="modal"
>
Close
</button>
<button
type="submit"
class="btn btn-primary"
data-i18n="export.title"
id="submitExport"
>
Export route
</button>
</div>
</form> </form>
</div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-i18n="modal.close" data-dismiss="modal">
Close
</button>
<button
type="submit"
class="btn btn-primary"
data-i18n="export.title"
form="export"
id="submitExport"
>
Export route
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -592,13 +516,13 @@
<!-- Track to Route modal window --> <!-- Track to Route modal window -->
<div <div
class="modal fade" class="modal fade"
id="loadedittrackdlg" id="loadedittrack"
tabindex="-1" tabindex="-1"
role="dialog" role="dialog"
aria-labelledby="Load Track as route" aria-labelledby="Load Track as route"
aria-hidden="true" aria-hidden="true"
> >
<div class="modal-dialog" role="document"> <div class="modal-dialog modal-lg modal-fullscreen-md-down" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" data-i18n="trackasroute.title">Load Track as Route</h4> <h4 class="modal-title" data-i18n="trackasroute.title">Load Track as Route</h4>
@ -609,65 +533,81 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form name="loadedittrackForm" id="loadedittrackForm"> <form name="loadedittrackForm" id="loadedittrackForm">
<div class="form-group row mt-4"> <div class="form-group row">
<label class="col-sm-3" for="loadedittrackFile" data-i18n="trackasroute.file" <label
class="col-form-label col-sm-3"
for="loadedittrackFile"
data-i18n="trackasroute.file"
>Trackfile</label >Trackfile</label
> >
<div class="custom-control custom-file col-sm-8"> <div class="col-sm-9">
<input <div class="custom-control custom-file">
type="file" <input
accept=".gpx,.kml,.geojson,*.*" type="file"
name="loadedittrackFile" accept=".gpx,.kml,.geojson,*.*"
id="loadedittrackFile" name="loadedittrackFile"
class="custom-file-input" id="loadedittrackFile"
/> class="custom-file-input"
<label />
for="loadedittrackFile" <label
class="custom-file-label" for="loadedittrackFile"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis" class="custom-file-label"
> data-i18n="[data-browse]trackasroute.browse"
</label style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
><br /> >
</label
><br />
</div>
</div> </div>
</div> </div>
<div class="form-group row mt-4"> <div class="form-group row">
<label class="col-sm-3" for="cb_showtracklayer" data-i18n="trackasroute.tracklayer" <label
class="col-form-label col-sm-3"
for="cb_showtracklayer"
data-i18n="trackasroute.tracklayer"
>Track Layer</label >Track Layer</label
> >
<div class="custom-control custom-switch"> <div class="col-sm-9">
<input <div class="custom-control custom-switch">
type="checkbox" <input
class="custom-control-input" type="checkbox"
id="cb_showtracklayer" class="custom-control-input"
checked="checked" id="cb_showtracklayer"
/> checked="checked"
<label />
class="custom-control-label" <label
for="cb_showtracklayer" class="custom-control-label"
data-i18n="trackasroute.explaintracklayer" for="cb_showtracklayer"
>(show Track as separate Layer)</label data-i18n="trackasroute.explaintracklayer"
> >(show Track as separate Layer)</label
>
</div>
</div> </div>
</div> </div>
<div class="form-group row mt-4"> <div class="form-group row">
<label class="col-sm-3" for="cb_showpois" data-i18n="trackasroute.showpois" <label
class="col-form-label col-sm-3"
for="cb_showpois"
data-i18n="trackasroute.showpois"
>POI's</label >POI's</label
> >
<div class="custom-control custom-switch"> <div class="col-sm-9">
<input <div class="custom-control custom-switch">
type="checkbox" <input
class="custom-control-input" type="checkbox"
id="cb_showpois" class="custom-control-input"
checked="checked" id="cb_showpois"
/> checked="checked"
<label />
class="custom-control-label" <label
for="cb_showpois" class="custom-control-label"
data-i18n="trackasroute.explainpoi" for="cb_showpois"
>(show waypoints as POI's)</label data-i18n="trackasroute.explainpoi"
> >(show waypoints as POI's)</label
>
</div>
</div> </div>
</div> </div>
@ -693,17 +633,19 @@
for="simplify_tolerance" for="simplify_tolerance"
class="col-sm-3" class="col-sm-3"
data-i18n="trackasroute.fuzziness" data-i18n="trackasroute.fuzziness"
>fuzziness</label >Fuzziness</label
> >
<input <div class="col-sm-9">
type="range" <input
class="custom-range col-sm-8" type="range"
id="simplify_tolerance" class="custom-range"
min="-500" id="simplify_tolerance"
max="500" min="-500"
step="any" max="500"
value="0" step="any"
/> value="0"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -715,26 +657,145 @@
> >
Please wait! Please wait!
</div> </div>
<div class="modal-footer mt-4">
<button
type="button"
class="btn btn-secondary"
data-i18n="modal.close"
data-dismiss="modal"
>
Close
</button>
<button
type="button"
class="btn btn-primary"
data-i18n="trackasroute.title"
id="submitLoadEditTrack"
>
Import Track
</button>
</div>
</form> </form>
</div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-i18n="modal.close" data-dismiss="modal">
Close
</button>
<button
type="button"
class="btn btn-primary"
form="loadedittrackForm"
data-i18n="trackasroute.title"
id="submitLoadEditTrack"
>
Import Track
</button>
</div>
</div>
</div>
</div>
<!-- Load nogos modal window -->
<div
class="modal fade"
id="loadNogos"
tabindex="-1"
role="dialog"
aria-labelledby="Load nogos window"
aria-hidden="true"
>
<div class="modal-dialog modal-lg modal-fullscreen-md-down" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" data-i18n="loadNogos.title">Load no-go areas</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p id="nogoError" class="invalid-feedback" style="display: none"></p>
<form name="loadNogosForm">
<fieldset>
<legend data-i18n="loadNogos.source">Source</legend>
<div>
<input type="text" id="nogoJSON" hidden />
<div class="form-group row">
<label for="nogoURL" class="col-form-label col-sm-3" data-i18n="loadNogos.url"
>URL</label
>
<div class="col-sm-9">
<input type="text" name="nogoURL" id="nogoURL" />
</div>
</div>
<p data-i18n="modal.or">or</p>
<div class="form-group row">
<label
class="col-form-label col-sm-3"
for="loadNogosFile"
data-i18n="loadNogos.file"
>File (.geojson)</label
>
<div class="col-sm-9">
<div class="custom-control custom-file">
<input
type="file"
accept=".geojson"
name="loadNogosFile"
id="loadNogosFile"
class="custom-file-input"
/>
<label
for="loadNogosFile"
class="custom-file-label"
data-i18n="[data-browse]trackasroute.browse"
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
</label
><br />
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend data-i18n="loadNogos.defaultProperties">Default properties</legend>
<div class="form-group row">
<label
class="col-form-label col-sm-8"
for="nogoWeight"
data-i18n="loadNogos.nogoWeight"
>No-go weight (-1 means impassable):
</label>
<div class="col-sm-3">
<input type="number" name="nogoWeight" id="nogoWeight" value="-1" min="-1" />
</div>
</div>
<div class="form-group row">
<label
class="col-form-label col-sm-8"
for="nogoRadius"
data-i18n="loadNogos.nogoRadius"
>No-go radius for points (in meters):
</label>
<div class="col-sm-3">
<input type="number" name="nogoRadius" id="nogoRadius" value="20" min="0" />
</div>
</div>
<div class="form-group row">
<label
class="col-form-label col-sm-8"
for="nogoBuffer"
data-i18n="loadNogos.nogoBuffer"
>Buffer no-go areas (in meters):
</label>
<div class="col-sm-3">
<input type="number" name="nogoBuffer" id="nogoBuffer" value="0" min="0" />
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-i18n="modal.close" data-dismiss="modal">
Close
</button>
<button
type="button"
class="btn btn-primary"
form="loadNogosForm"
data-i18n="loadNogos.load"
id="submitNogos"
>
Load
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -747,11 +808,11 @@
href="#tab_layers_control" href="#tab_layers_control"
role="tab" role="tab"
data-i18n="[title]sidebar.tab-tooltip" data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{ data-i18n-options="{
"action": "$t(sidebar.layers.tooltip)", 'action': '$t(sidebar.layers.tooltip)',
"toggleKey": "T", 'toggleKey': 'T',
"switchKey": "$t(keyboard.shift)+T" 'switchKey': '$t(keyboard.shift)+T'
}' }"
title="Select layers" title="Select layers"
> >
<!-- <!--
@ -763,7 +824,7 @@
class="fa" class="fa"
width="1em" width="1em"
height="1em" height="1em"
viewBox="0 0 24 24" viewbox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-width="2.2" stroke-width="2.2"
@ -781,11 +842,11 @@
href="#tab_itinerary" href="#tab_itinerary"
role="tab" role="tab"
data-i18n="[title]sidebar.tab-tooltip" data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{ data-i18n-options="{
"action": "$t(sidebar.itinerary.tooltip)", 'action': '$t(sidebar.itinerary.tooltip)',
"toggleKey": "T", 'toggleKey': 'T',
"switchKey": "$t(keyboard.shift)+T" 'switchKey': '$t(keyboard.shift)+T'
}' }"
title="Show Itinerary" title="Show Itinerary"
><i class="fa fa-map-signs"></i ><i class="fa fa-map-signs"></i
></a> ></a>
@ -795,11 +856,11 @@
href="#tab_profile" href="#tab_profile"
role="tab" role="tab"
data-i18n="[title]sidebar.tab-tooltip" data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{ data-i18n-options="{
"action": "$t(sidebar.customize-profile.tooltip)", 'action': '$t(sidebar.customize-profile.tooltip)',
"toggleKey": "T", 'toggleKey': 'T',
"switchKey": "$t(keyboard.shift)+T" 'switchKey': '$t(keyboard.shift)+T'
}' }"
title="Customize profile" title="Customize profile"
><i class="fa fa-wrench"></i ><i class="fa fa-wrench"></i
></a> ></a>
@ -809,11 +870,11 @@
href="#tab_data" href="#tab_data"
role="tab" role="tab"
data-i18n="[title]sidebar.tab-tooltip" data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{ data-i18n-options="{
"action": "$t(sidebar.data.tooltip)", 'action': '$t(sidebar.data.tooltip)',
"toggleKey": "T", 'toggleKey': 'T',
"switchKey": "$t(keyboard.shift)+T" 'switchKey': '$t(keyboard.shift)+T'
}' }"
title="Show detailed route data table" title="Show detailed route data table"
><i class="fa fa-table"></i ><i class="fa fa-table"></i
></a> ></a>
@ -823,11 +884,11 @@
href="#tab_analysis" href="#tab_analysis"
role="tab" role="tab"
data-i18n="[title]sidebar.tab-tooltip" data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{ data-i18n-options="{
"action": "$t(sidebar.analysis.tooltip)", 'action': '$t(sidebar.analysis.tooltip)',
"toggleKey": "T", 'toggleKey': 'T',
"switchKey": "$t(keyboard.shift)+T" 'switchKey': '$t(keyboard.shift)+T'
}' }"
title="Analyse route" title="Analyse route"
><i class="fa fa-pie-chart"></i ><i class="fa fa-pie-chart"></i
></a> ></a>
@ -846,7 +907,8 @@
<div class="leaflet-sidebar-pane" id="tab_layers_control"> <div class="leaflet-sidebar-pane" id="tab_layers_control">
<h1 class="leaflet-sidebar-header"> <h1 class="leaflet-sidebar-header">
<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span <span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span
><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span ><span class="d-none d-md-block leaflet-sidebar-expand"
><i class="fa fa-expand"></i></span
><span data-i18n="sidebar.layers.title">Layers</span> ><span data-i18n="sidebar.layers.title">Layers</span>
</h1> </h1>
<div id="layers-control-wrapper"></div> <div id="layers-control-wrapper"></div>
@ -910,7 +972,8 @@
<div class="leaflet-sidebar-pane" id="tab_profile"> <div class="leaflet-sidebar-pane" id="tab_profile">
<h1 class="leaflet-sidebar-header"> <h1 class="leaflet-sidebar-header">
<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span <span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span
><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span ><span class="d-none d-md-block leaflet-sidebar-expand"
><i class="fa fa-expand"></i></span
><span data-i18n="sidebar.customize-profile.title">Customize profile</span> ><span data-i18n="sidebar.customize-profile.title">Customize profile</span>
</h1> </h1>
<form class="flexcolumn flexgrow"> <form class="flexcolumn flexgrow">
@ -951,7 +1014,7 @@
aria-labelledby="params-tab" aria-labelledby="params-tab"
> >
<div id="profile_params"></div> <div id="profile_params"></div>
<div class="form-group" id="profile_buttons"> <div class="form-group pt-1">
<button id="save" type="button" class="btn btn-primary btn-sm"> <button id="save" type="button" class="btn btn-primary btn-sm">
<span class="fa fa-cloud-upload"></span> <span class="fa fa-cloud-upload"></span>
<span data-i18n="sidebar.profile.apply">Apply</span> <span data-i18n="sidebar.profile.apply">Apply</span>
@ -973,7 +1036,7 @@
placeholder="Write your custom profile here." placeholder="Write your custom profile here."
></textarea> ></textarea>
<div id="profile_message"></div> <div id="profile_message"></div>
<div class="form-group" id="profile_buttons"> <div class="form-group pt-1">
<button id="upload" type="button" class="btn btn-primary btn-sm"> <button id="upload" type="button" class="btn btn-primary btn-sm">
<span class="fa fa-cloud-upload"></span> <span class="fa fa-cloud-upload"></span>
<span data-i18n="sidebar.profile.apply">Apply</span> <span data-i18n="sidebar.profile.apply">Apply</span>
@ -998,7 +1061,9 @@
<div class="leaflet-sidebar-pane" id="tab_data"> <div class="leaflet-sidebar-pane" id="tab_data">
<h1 class="leaflet-sidebar-header"> <h1 class="leaflet-sidebar-header">
<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span> <span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span>
<span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span> <span class="d-none d-md-block leaflet-sidebar-expand"
><i class="fa fa-expand"></i
></span>
<span <span
id="data-sync-map" id="data-sync-map"
class="sync-map active" class="sync-map active"
@ -1015,7 +1080,9 @@
<h1 class="leaflet-sidebar-header"> <h1 class="leaflet-sidebar-header">
<span data-i18n="sidebar.itinerary.title">Itinerary</span <span data-i18n="sidebar.itinerary.title">Itinerary</span
><span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span ><span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span
><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span> ><span class="d-none d-md-block leaflet-sidebar-expand"
><i class="fa fa-expand"></i
></span>
</h1> </h1>
<div id="itinerary" class="flexcolumn flexgrow"></div> <div id="itinerary" class="flexcolumn flexgrow"></div>
</div> </div>
@ -1133,7 +1200,7 @@
aria-expanded="false" aria-expanded="false"
aria-label="Toggle elevation chart" aria-label="Toggle elevation chart"
data-i18n="[title]keyboard.generic-shortcut" data-i18n="[title]keyboard.generic-shortcut"
data-i18n-options='{ "action": "$t(footer.elevation-chart)", "key": "E" }' data-i18n-options="{ 'action': '$t(footer.elevation-chart)', 'key': 'E' }"
title="Toggle elevation chart" title="Toggle elevation chart"
> >
<span class="fa fa-area-chart"></span> <span class="fa fa-area-chart"></span>

16
js/plugin/RouteLoaderConverter.js
View file

@ -156,13 +156,13 @@ BR.routeLoader = function (map, layersControl, routing, pois) {
if (typeof isBusy === undefined) { if (typeof isBusy === undefined) {
isBusy = false; isBusy = false;
} }
if (isBusy === true) $('#loadedittrackdlg #msg_busy').removeClass('invisible'); if (isBusy === true) $('#loadedittrack #msg_busy').removeClass('invisible');
else $('#loadedittrackdlg #msg_busy').addClass('invisible'); else $('#loadedittrack #msg_busy').addClass('invisible');
}, },
onManualCollapse: function (e) { onManualCollapse: function (e) {
//workaround for starting with closed collapse //workaround for starting with closed collapse
if ($('#loadedittrackdlg').is(':hidden')) return; if ($('#loadedittrack').is(':hidden')) return;
this._options.isTestMode = $(e.target).hasClass('show'); this._options.isTestMode = $(e.target).hasClass('show');
if (this._options.isTestMode) { if (this._options.isTestMode) {
@ -172,13 +172,13 @@ BR.routeLoader = function (map, layersControl, routing, pois) {
}, },
onAdd: function (map) { onAdd: function (map) {
$('#loadedittrackdlg').on( $('#loadedittrack').on(
'hidden.bs.modal', 'hidden.bs.modal',
function (e) { function (e) {
this.cleanup(); this.cleanup();
}.bind(this) }.bind(this)
); );
$('#loadedittrackdlg').on( $('#loadedittrack').on(
'show.bs.modal', 'show.bs.modal',
function (e) { function (e) {
$('#manual_collapse').collapse('hide'); $('#manual_collapse').collapse('hide');
@ -195,7 +195,7 @@ BR.routeLoader = function (map, layersControl, routing, pois) {
function () { function () {
this.addRoutingPoints(); this.addRoutingPoints();
this.onBusyChanged(false); this.onBusyChanged(false);
$('#loadedittrackdlg').modal('hide'); $('#loadedittrack').modal('hide');
}.bind(this), }.bind(this),
0 0
); );
@ -203,7 +203,7 @@ BR.routeLoader = function (map, layersControl, routing, pois) {
setTimeout( setTimeout(
function () { function () {
this.convertTrackLocal(); this.convertTrackLocal();
$('#loadedittrackdlg').modal('hide'); $('#loadedittrack').modal('hide');
}.bind(this), }.bind(this),
0 0
); );
@ -214,7 +214,7 @@ BR.routeLoader = function (map, layersControl, routing, pois) {
L.DomUtil.get('loadedittrackFile').onchange = L.bind(this.onFileChanged, this); L.DomUtil.get('loadedittrackFile').onchange = L.bind(this.onFileChanged, this);
this.onFileChanged({ target: L.DomUtil.get('loadedittrackFile') }); this.onFileChanged({ target: L.DomUtil.get('loadedittrackFile') });
this.setDialogDraggable($('#loadedittrackdlg .modal-header')); this.setDialogDraggable($('#loadedittrack .modal-header'));
$('#manual_collapse').collapse('hide'); $('#manual_collapse').collapse('hide');
$('#manual_collapse').on( $('#manual_collapse').on(

13
locales/en.json
View file

@ -78,14 +78,14 @@
}, },
"loadNogos": { "loadNogos": {
"defaultProperties": "Default properties", "defaultProperties": "Default properties",
"file": "File (.geojson): ", "file": "File (.geojson)",
"load": "Load", "load": "Load",
"nogoBuffer": "Buffer no-go areas (in meters): ", "nogoBuffer": "Buffer no-go areas (in meters)",
"nogoRadius": "No-go radius for points (in meters): ", "nogoRadius": "No-go radius for points (in meters)",
"nogoWeight": "No-go weight (-1 means impassable): ", "nogoWeight": "No-go weight (-1 means impassable)",
"source": "Source", "source": "Source",
"title": "Load no-go areas", "title": "Load no-go areas",
"url": "URL: " "url": "URL"
}, },
"map": { "map": {
"attribution-osm-long": "OpenStreetMap contributors", "attribution-osm-long": "OpenStreetMap contributors",
@ -266,10 +266,11 @@
}, },
"title": "BRouter web client", "title": "BRouter web client",
"trackasroute": { "trackasroute": {
"browse": "Browse",
"explainpoi": "(show waypoints as POI's)", "explainpoi": "(show waypoints as POI's)",
"explaintracklayer": "(show Track as separate Layer)", "explaintracklayer": "(show Track as separate Layer)",
"file": "Trackfile", "file": "Trackfile",
"fuzziness": "fuzziness", "fuzziness": "Fuzziness",
"pleasewait": "Please wait!", "pleasewait": "Please wait!",
"showpois": "POI's", "showpois": "POI's",
"title": "Load Track as Route", "title": "Load Track as Route",

2
package.json
View file

@ -43,7 +43,7 @@
"async": "~0.9.2", "async": "~0.9.2",
"bootbox": "~5.3.4", "bootbox": "~5.3.4",
"bootstrap": "4.3.1", "bootstrap": "4.3.1",
"bootstrap-select": "1.13.6", "bootstrap-select": "1.13.18",
"bootstrap-slider": "^9.8.1", "bootstrap-slider": "^9.8.1",
"codemirror": "^5.35.0", "codemirror": "^5.35.0",
"core-js-bundle": "^3.8.3", "core-js-bundle": "^3.8.3",

8
yarn.lock
View file

@ -2747,10 +2747,10 @@ bootbox@~5.3.4:
jquery ">=1.12.0" jquery ">=1.12.0"
popper.js ">=1.12.9" popper.js ">=1.12.9"
bootstrap-select@1.13.6: bootstrap-select@1.13.18:
version "1.13.6" version "1.13.18"
resolved "https://registry.yarnpkg.com/bootstrap-select/-/bootstrap-select-1.13.6.tgz#dc41f8a7385ab4e385562b400d4cf2422f5ef852" resolved "https://registry.yarnpkg.com/bootstrap-select/-/bootstrap-select-1.13.18.tgz#4557119d58dc1159189977161c803962220e4dda"
integrity sha512-MsOZjYVv0jjHOCUV6CG3J8MSsosrKL8MlA8DacMhMqFq43tTxMjjd7Czo5a/upKPNHW6asFq29oyKJTrPva6FQ== integrity sha512-V1IzK4rxBq5FrJtkzSH6RmFLFBsjx50byFbfAf8jYyXROWs7ZpprGjdHeoyq2HSsHyjJhMMwjsQhRoYAfxCGow==
bootstrap-slider@^9.8.1: bootstrap-slider@^9.8.1:
version "9.10.0" version "9.10.0"