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

Improve profile parameters layout: button always visible, smaller font

Browse source 
- Flexbox layout with scrolling inner content instead of whole tab
- same smaller font size like in layers tab, small input fields
This commit is contained in:
Norbert Renner 2019-11-13 10:44:34 +01:00
parent ad40459be7
commit 4efa6247aa
3 changed files with 16 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

24
css/style.css
View file

@ -192,7 +192,7 @@ input#trackname:focus:invalid {
} }
/* Override Bootstrap tabs that set `display` from `none` to `block` when activating */ /* Override Bootstrap tabs that set `display` from `none` to `block` when activating */
.tab-content > #profile_editor.active { #profileEditorTabsContent.tab-content > .active {
display: flex; display: flex;
} }
@ -430,6 +430,7 @@ table.dataTable.display tbody tr.even:hover {
* leaflet-sidebar-v2 * leaflet-sidebar-v2
*/ */
.leaflet-sidebar-pane#tab_profile,
.leaflet-sidebar-pane#tab_data, .leaflet-sidebar-pane#tab_data,
.leaflet-sidebar-pane#tab_itinerary { .leaflet-sidebar-pane#tab_itinerary {
/* Full height for content with inner scrolling, /* Full height for content with inner scrolling,
@ -437,12 +438,17 @@ table.dataTable.display tbody tr.even:hover {
height: 100%; height: 100%;
} }
.leaflet-sidebar-pane#tab_profile { #profile_params,
min-height: 100%; .CodeMirror {
/* auto instead of 1 to avoid overflow to content height in Firefox */
flex: auto;
/* override default 300px, behaves like min-height with flex auto */
height: 0;
} }
#profile_params_container .form-group { #profile_params {
margin-bottom: 5px; overflow-y: scroll;
padding-right: 5px;
} }
.leaflet-sidebar-pane#tab_profile label { .leaflet-sidebar-pane#tab_profile label {
@ -467,7 +473,8 @@ table.dataTable.display tbody tr.even:hover {
} }
/* layers control as sidebar tab */ /* layers control as sidebar tab */
#tab_layers_control { #tab_layers_control,
#profile_params {
font-size: 0.9rem; font-size: 0.9rem;
line-height: normal; line-height: normal;
} }
@ -517,11 +524,6 @@ table.dataTable.display tbody tr.even:hover {
*/ */
.CodeMirror { .CodeMirror {
/* auto instead of 1 to avoid overflow to content height in Firefox */
flex: auto;
/* override default 300px, behaves like min-height with flex auto */
height: 0;
border: 1px solid #ddd; border: 1px solid #ddd;
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

2
index.html
View file

@ -682,7 +682,7 @@
<div class="tab-content flexcolumn flexgrow" id="profileEditorTabsContent"> <div class="tab-content flexcolumn flexgrow" id="profileEditorTabsContent">
<div <div
id="profile_params_container" id="profile_params_container"
class="tab-pane show active" class="flexcolumn flexgrow tab-pane show active"
role="tabpanel" role="tabpanel"
aria-labelledby="params-tab" aria-labelledby="params-tab"
> >

4
js/control/Profile.js
View file

@ -217,7 +217,7 @@ BR.Profile = L.Evented.extend({
if (paramType == 'select') { if (paramType == 'select') {
var select = document.createElement('select'); var select = document.createElement('select');
select.name = paramName; select.name = paramName;
select.className = 'form-control'; select.className = 'form-control form-control-sm';
label.htmlFor = select.id = 'customize-profile-' + paramName; label.htmlFor = select.id = 'customize-profile-' + paramName;
var paramValues = params[param].possible_values; var paramValues = params[param].possible_values;
@ -238,7 +238,7 @@ BR.Profile = L.Evented.extend({
if (paramType == 'number') { if (paramType == 'number') {
input.type = 'number'; input.type = 'number';
input.value = params[param].value; input.value = params[param].value;
input.className = 'form-control'; input.className = 'form-control form-control-sm';
label.append(paramName); label.append(paramName);
div.appendChild(label); div.appendChild(label);