Layout improvements

This commit is contained in:
Oliver Walters 2020-04-11 14:19:21 +10:00
parent 64f8034a4c
commit dddaa102b3
4 changed files with 10 additions and 20 deletions

View File

@ -168,7 +168,7 @@
margin-right: 1px; margin-right: 1px;
} }
.filters { .filter-list {
display: inline-block; display: inline-block;
*display: inline; *display: inline;
border: 1px solid #555; border: 1px solid #555;
@ -177,9 +177,6 @@
margin-bottom: 1px; margin-bottom: 1px;
margin-top: 1px; margin-top: 1px;
vertical-align: middle; vertical-align: middle;
}
.filter-list {
margin: 1px; margin: 1px;
padding: 1px; padding: 1px;
} }
@ -194,7 +191,7 @@
.filter-list .close:hover {background: #bbb;} .filter-list .close:hover {background: #bbb;}
.filter-list > li { .filter-tag {
display: inline-block; display: inline-block;
*display: inline; *display: inline;
zoom: 1; zoom: 1;

View File

@ -242,18 +242,19 @@ function setupFilterList(tableKey, table, target) {
var element = $(target); var element = $(target);
// One blank slate, please
element.empty(); element.empty();
element.append(`<button class='btn btn-default' id='${add}'>Add filter</button>`);
element.append(`<button class='btn btn-default' id='${clear}'>Clear filters</button>`);
for (var key in filters) { for (var key in filters) {
var value = getFilterOptionValue(tableKey, key, filters[key]); var value = getFilterOptionValue(tableKey, key, filters[key]);
var title = getFilterTitle(tableKey, key); var title = getFilterTitle(tableKey, key);
element.append(`<li>${title} = ${value}<span ${tag}='${key}' class='close'>x</span></li>`); element.append(`<div class='filter-tag'>${title} = ${value}<span ${tag}='${key}' class='close'>x</span></div>`);
} }
element.append(`<button class='btn btn-default' id='${add}'>Add filter</button>`);
element.append(`<button class='btn btn-default' id='${clear}'>Clear filters</button>`);
// Add a callback for adding a new filter // Add a callback for adding a new filter
element.find(`#${add}`).click(function() { element.find(`#${add}`).click(function() {

View File

@ -79,7 +79,7 @@ function loadStockTable(table, options) {
// List of user-params which override the default filters // List of user-params which override the default filters
var params = options.params || {}; var params = options.params || {};
var filterListElement = options.filterList || "#stock-filter-list"; var filterListElement = options.filterList || "#filter-list-stock";
var filters = loadTableFilters("stock"); var filters = loadTableFilters("stock");

View File

@ -18,17 +18,9 @@
</ul> </ul>
</div> </div>
{% endif %} {% endif %}
<div class='filters' id='#filter-list-stock'> <div class='filter-list' id='filter-list-stock'>
<!-- An empty div in which the filter list will be constructed --> <!-- An empty div in which the filter list will be constructed -->
</div> </div>
<div class='filters'>
<ul class='filter-list' id='stock-filter-list'>
<!-- This is an empty list which will be populated with the stock table filters -->
</ul>
<div id='add-new-filter'>
<!-- This is an empty div for placing an in-line form to add new filter -->
</div>
</div>
</div> </div>
</div> </div>