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

Improve modal dialogs consistency

Browse source
This commit is contained in:
Gautier P 2021-03-10 10:54:53 +01:00
parent 51ed126a12
commit 5b52abc14e
3 changed files with 279 additions and 221 deletions
Download patch file Download diff file Expand all files Collapse all files

4
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 {

345
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>
@ -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"
@ -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>
@ -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"
@ -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 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>
<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"
@ -565,26 +493,22 @@
</div> </div>
</div> </div>
</fieldset> </fieldset>
</form>
</div>
<div class="modal-footer"> <div class="modal-footer">
<button <button type="button" class="btn btn-secondary" data-i18n="modal.close" data-dismiss="modal">
type="button"
class="btn btn-secondary"
data-i18n="modal.close"
data-dismiss="modal"
>
Close Close
</button> </button>
<button <button
type="submit" type="submit"
class="btn btn-primary" class="btn btn-primary"
data-i18n="export.title" data-i18n="export.title"
form="export"
id="submitExport" id="submitExport"
> >
Export route Export route
</button> </button>
</div> </div>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -598,7 +522,7 @@
aria-labelledby="Load Track as route" aria-labelledby="Load Track as route"
aria-hidden="true" aria-hidden="true"
> >
<div class="modal-dialog modal-fullscreen-md-down" 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,11 +533,15 @@
</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">
<div class="custom-control custom-file">
<input <input
type="file" type="file"
accept=".gpx,.kml,.geojson,*.*" accept=".gpx,.kml,.geojson,*.*"
@ -624,17 +552,23 @@
<label <label
for="loadedittrackFile" for="loadedittrackFile"
class="custom-file-label" class="custom-file-label"
data-i18n="[data-browse]trackasroute.browse"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
> >
</label </label
><br /> ><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="col-sm-9">
<div class="custom-control custom-switch"> <div class="custom-control custom-switch">
<input <input
type="checkbox" type="checkbox"
@ -650,11 +584,16 @@
> >
</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="col-sm-9">
<div class="custom-control custom-switch"> <div class="custom-control custom-switch">
<input <input
type="checkbox" type="checkbox"
@ -670,6 +609,7 @@
> >
</div> </div>
</div> </div>
</div>
<div class="accordion" id="manual_accordion"> <div class="accordion" id="manual_accordion">
<div class="row"> <div class="row">
@ -693,11 +633,12 @@
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
> >
<div class="col-sm-9">
<input <input
type="range" type="range"
class="custom-range col-sm-8" class="custom-range"
id="simplify_tolerance" id="simplify_tolerance"
min="-500" min="-500"
max="500" max="500"
@ -707,6 +648,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
id="msg_busy" id="msg_busy"
@ -715,26 +657,145 @@
> >
Please wait! Please wait!
</div> </div>
<div class="modal-footer mt-4"> </form>
<button </div>
type="button" <div class="modal-footer">
class="btn btn-secondary" <button type="button" class="btn btn-secondary" data-i18n="modal.close" data-dismiss="modal">
data-i18n="modal.close"
data-dismiss="modal"
>
Close Close
</button> </button>
<button <button
type="button" type="button"
class="btn btn-primary" class="btn btn-primary"
form="loadedittrackForm"
data-i18n="trackasroute.title" data-i18n="trackasroute.title"
id="submitLoadEditTrack" id="submitLoadEditTrack"
> >
Import Track Import Track
</button> </button>
</div> </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> </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="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>
@ -953,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>
@ -975,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>
@ -1139,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>

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",