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

Replace profile options/editor switch buttons with Bootstrap tabs

Browse source
This commit is contained in:
Norbert Renner 2019-11-11 19:22:38 +01:00
parent ef9cc7abe7
commit 21a8d8b5de
4 changed files with 94 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

126
index.html
View file

@ -651,56 +651,86 @@
><span data-i18n="sidebar.customize-profile.title">Customize profile</span>
</h1>
<form class="flexcolumn flexgrow">
<div id="profile_params_container">
<div id="profile_params"></div>
<div class="form-group" id="profile_buttons">
<button type="button" class="btn btn-info btn-sm" id="profile_advanced">
<span data-i18n="sidebar.profile.switch_advanced"
>Switch to advanced editor</span
>
</button>
<button id="save" type="button" class="btn btn-primary btn-sm pull-right">
<span class="fa fa-cloud-upload"></span>
<span data-i18n="sidebar.profile.save">Save</span>
</button>
</div>
</div>
<div id="profile_editor" class="flexcolumn flexgrow">
<textarea
class="form-control flexgrow"
id="profile_upload"
spellcheck="false"
wrap="off"
data-i18n="[placeholder]sidebar.profile.placeholder"
placeholder="Write your custom profile here."
></textarea>
<div id="profile_message"></div>
<div class="form-group" id="profile_buttons">
<button
id="upload"
type="button"
class="btn btn-primary btn-sm"
data-uploading-text="Uploading…"
>
<span class="fa fa-cloud-upload"></span>
<span data-i18n="sidebar.profile.upload">Upload</span>
</button>
<button id="clear" type="button" class="btn btn-secondary btn-sm">
<span class="fa fa-eraser"></span>
<span data-i18n="sidebar.profile.clear">Clear</span>
</button>
<ul class="nav nav-tabs " id="profileEditorTabs" role="tablist">
<li class="nav-item">
<a
href="https://brouter.de/brouter/costfunctions.html"
target="_blank"
class="btn btn-info btn-sm pull-right"
><span class="fa fa-question"></span>
<span data-i18n="sidebar.profile.help">Help</span></a
class="nav-link active"
id="params-tab"
data-toggle="tab"
href="#profile_params_container"
role="tab"
aria-controls="profile_params_container"
aria-selected="true"
data-i18n="sidebar.profile.options"
>Options</a
>
<button type="button" class="btn btn-info btn-sm" id="profile_basic">
<span data-i18n="sidebar.profile.switch_basic">Switch to basic editor</span>
</button>
</li>
<li class="nav-item">
<a
class="nav-link"
id="profile-editor-tab"
data-toggle="tab"
href="#profile_editor"
role="tab"
aria-controls="profile_editor"
aria-selected="false"
data-i18n="sidebar.profile.profile"
>Profile</a
>
</li>
</ul>
<div class="tab-content flexcolumn flexgrow" id="profileEditorTabsContent">
<div
id="profile_params_container"
class="tab-pane show active"
role="tabpanel"
aria-labelledby="params-tab"
>
<div id="profile_params"></div>
<div class="form-group" id="profile_buttons">
<button id="save" type="button" class="btn btn-primary btn-sm">
<span class="fa fa-cloud-upload"></span>
<span data-i18n="sidebar.profile.save">Save</span>
</button>
</div>
</div>
<div
id="profile_editor"
class="flexcolumn flexgrow tab-pane"
role="tabpanel"
aria-labelledby="profile-editor-tab"
>
<textarea
class="form-control flexgrow"
id="profile_upload"
spellcheck="false"
wrap="off"
data-i18n="[placeholder]sidebar.profile.placeholder"
placeholder="Write your custom profile here."
></textarea>
<div id="profile_message"></div>
<div class="form-group" id="profile_buttons">
<button
id="upload"
type="button"
class="btn btn-primary btn-sm"
data-uploading-text="Uploading…"
>
<span class="fa fa-cloud-upload"></span>
<span data-i18n="sidebar.profile.upload">Upload</span>
</button>
<button id="clear" type="button" class="btn btn-secondary btn-sm">
<span class="fa fa-eraser"></span>
<span data-i18n="sidebar.profile.clear">Clear</span>
</button>
<a
href="https://brouter.de/brouter/costfunctions.html"
target="_blank"
class="btn btn-info btn-sm pull-right"
><span class="fa fa-question"></span>
<span data-i18n="sidebar.profile.help">Help</span></a
>
</div>
</div>
</div>
</form>