Improve modal dialogs consistency

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

View file

@ -242,10 +242,6 @@ input#trackname:focus:invalid {
display: flex;
}
#profile_buttons {
padding-top: 4px;
}
/* track messages (data tab) */
#tab_data,
.CodeMirror {

View file

@ -11,6 +11,7 @@
<link rel="stylesheet" href="dist/brouter-web.css" />
<!-- endinject -->
</head>
<body class="flexcolumn">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button
@ -60,7 +61,7 @@
aria-haspopup="true"
aria-expanded="false"
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"
>
<span class="fa fa-lg fa-cloud-download" aria-hidden="true"> </span>
@ -70,7 +71,6 @@
<div class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href=""
data-toggle="dropdown"
href="#"
role="button"
@ -78,12 +78,12 @@
aria-haspopup="true"
aria-expanded="false"
data-i18n="[title]navbar.load.tooltip"
data-i18n-options='{
"tracksAction": "$t(navbar.load.tracks)",
"tracksKey": "O",
"nogosAction": "$t(navbar.load.nogos)",
"nogosKey": "$t(keyboard.shift)+O"
}'
data-i18n-options="{
'tracksAction': '$t(navbar.load.tracks)',
'tracksKey': 'O',
'nogosAction': '$t(navbar.load.nogos)',
'nogosKey': '$t(keyboard.shift)+O'
}"
title="Load route"
>
<span class="fa fa-lg fa-cloud-upload" aria-hidden="true"> </span>
@ -119,7 +119,7 @@
<div
class="nav-item"
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"
>
<a class="nav-link" href="#" data-toggle="modal" data-target="#about"
@ -181,6 +181,11 @@
<h5 data-i18n="credits.map-tiles">Map tiles</h5>
<dl id="credits-maps"></dl>
</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>
@ -341,7 +346,7 @@
on the client.
</p>
</div>
<div class="modal-footer mt-4">
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
@ -379,7 +384,7 @@
<div class="modal-body">
<!-- will be filled automatically -->
</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">
Close
</button>
@ -388,83 +393,6 @@
</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 -->
<div
class="modal fade"
@ -565,26 +493,22 @@
</div>
</div>
</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>
</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>
@ -598,7 +522,7 @@
aria-labelledby="Load Track as route"
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-header">
<h4 class="modal-title" data-i18n="trackasroute.title">Load Track as Route</h4>
@ -609,65 +533,81 @@
</div>
<div class="modal-body">
<form name="loadedittrackForm" id="loadedittrackForm">
<div class="form-group row mt-4">
<label class="col-sm-3" for="loadedittrackFile" data-i18n="trackasroute.file"
<div class="form-group row">
<label
class="col-form-label col-sm-3"
for="loadedittrackFile"
data-i18n="trackasroute.file"
>Trackfile</label
>
<div class="custom-control custom-file col-sm-8">
<input
type="file"
accept=".gpx,.kml,.geojson,*.*"
name="loadedittrackFile"
id="loadedittrackFile"
class="custom-file-input"
/>
<label
for="loadedittrackFile"
class="custom-file-label"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
>
</label
><br />
<div class="col-sm-9">
<div class="custom-control custom-file">
<input
type="file"
accept=".gpx,.kml,.geojson,*.*"
name="loadedittrackFile"
id="loadedittrackFile"
class="custom-file-input"
/>
<label
for="loadedittrackFile"
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 class="form-group row mt-4">
<label class="col-sm-3" for="cb_showtracklayer" data-i18n="trackasroute.tracklayer"
<div class="form-group row">
<label
class="col-form-label col-sm-3"
for="cb_showtracklayer"
data-i18n="trackasroute.tracklayer"
>Track Layer</label
>
<div class="custom-control custom-switch">
<input
type="checkbox"
class="custom-control-input"
id="cb_showtracklayer"
checked="checked"
/>
<label
class="custom-control-label"
for="cb_showtracklayer"
data-i18n="trackasroute.explaintracklayer"
>(show Track as separate Layer)</label
>
<div class="col-sm-9">
<div class="custom-control custom-switch">
<input
type="checkbox"
class="custom-control-input"
id="cb_showtracklayer"
checked="checked"
/>
<label
class="custom-control-label"
for="cb_showtracklayer"
data-i18n="trackasroute.explaintracklayer"
>(show Track as separate Layer)</label
>
</div>
</div>
</div>
<div class="form-group row mt-4">
<label class="col-sm-3" for="cb_showpois" data-i18n="trackasroute.showpois"
<div class="form-group row">
<label
class="col-form-label col-sm-3"
for="cb_showpois"
data-i18n="trackasroute.showpois"
>POI's</label
>
<div class="custom-control custom-switch">
<input
type="checkbox"
class="custom-control-input"
id="cb_showpois"
checked="checked"
/>
<label
class="custom-control-label"
for="cb_showpois"
data-i18n="trackasroute.explainpoi"
>(show waypoints as POI's)</label
>
<div class="col-sm-9">
<div class="custom-control custom-switch">
<input
type="checkbox"
class="custom-control-input"
id="cb_showpois"
checked="checked"
/>
<label
class="custom-control-label"
for="cb_showpois"
data-i18n="trackasroute.explainpoi"
>(show waypoints as POI's)</label
>
</div>
</div>
</div>
@ -693,17 +633,19 @@
for="simplify_tolerance"
class="col-sm-3"
data-i18n="trackasroute.fuzziness"
>fuzziness</label
>Fuzziness</label
>
<input
type="range"
class="custom-range col-sm-8"
id="simplify_tolerance"
min="-500"
max="500"
step="any"
value="0"
/>
<div class="col-sm-9">
<input
type="range"
class="custom-range"
id="simplify_tolerance"
min="-500"
max="500"
step="any"
value="0"
/>
</div>
</div>
</div>
</div>
@ -715,26 +657,145 @@
>
Please wait!
</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>
</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>
@ -747,11 +808,11 @@
href="#tab_layers_control"
role="tab"
data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{
"action": "$t(sidebar.layers.tooltip)",
"toggleKey": "T",
"switchKey": "$t(keyboard.shift)+T"
}'
data-i18n-options="{
'action': '$t(sidebar.layers.tooltip)',
'toggleKey': 'T',
'switchKey': '$t(keyboard.shift)+T'
}"
title="Select layers"
>
<!--
@ -763,7 +824,7 @@
class="fa"
width="1em"
height="1em"
viewBox="0 0 24 24"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.2"
@ -781,11 +842,11 @@
href="#tab_itinerary"
role="tab"
data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{
"action": "$t(sidebar.itinerary.tooltip)",
"toggleKey": "T",
"switchKey": "$t(keyboard.shift)+T"
}'
data-i18n-options="{
'action': '$t(sidebar.itinerary.tooltip)',
'toggleKey': 'T',
'switchKey': '$t(keyboard.shift)+T'
}"
title="Show Itinerary"
><i class="fa fa-map-signs"></i
></a>
@ -795,11 +856,11 @@
href="#tab_profile"
role="tab"
data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{
"action": "$t(sidebar.customize-profile.tooltip)",
"toggleKey": "T",
"switchKey": "$t(keyboard.shift)+T"
}'
data-i18n-options="{
'action': '$t(sidebar.customize-profile.tooltip)',
'toggleKey': 'T',
'switchKey': '$t(keyboard.shift)+T'
}"
title="Customize profile"
><i class="fa fa-wrench"></i
></a>
@ -809,11 +870,11 @@
href="#tab_data"
role="tab"
data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{
"action": "$t(sidebar.data.tooltip)",
"toggleKey": "T",
"switchKey": "$t(keyboard.shift)+T"
}'
data-i18n-options="{
'action': '$t(sidebar.data.tooltip)',
'toggleKey': 'T',
'switchKey': '$t(keyboard.shift)+T'
}"
title="Show detailed route data table"
><i class="fa fa-table"></i
></a>
@ -823,11 +884,11 @@
href="#tab_analysis"
role="tab"
data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{
"action": "$t(sidebar.analysis.tooltip)",
"toggleKey": "T",
"switchKey": "$t(keyboard.shift)+T"
}'
data-i18n-options="{
'action': '$t(sidebar.analysis.tooltip)',
'toggleKey': 'T',
'switchKey': '$t(keyboard.shift)+T'
}"
title="Analyse route"
><i class="fa fa-pie-chart"></i
></a>
@ -953,7 +1014,7 @@
aria-labelledby="params-tab"
>
<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">
<span class="fa fa-cloud-upload"></span>
<span data-i18n="sidebar.profile.apply">Apply</span>
@ -975,7 +1036,7 @@
placeholder="Write your custom profile here."
></textarea>
<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">
<span class="fa fa-cloud-upload"></span>
<span data-i18n="sidebar.profile.apply">Apply</span>
@ -1139,7 +1200,7 @@
aria-expanded="false"
aria-label="Toggle elevation chart"
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"
>
<span class="fa fa-area-chart"></span>

View file

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