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

View File

@ -242,18 +242,19 @@ function setupFilterList(tableKey, table, target) {
var element = $(target);
// One blank slate, please
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) {
var value = getFilterOptionValue(tableKey, key, filters[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
element.find(`#${add}`).click(function() {

View File

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

View File

@ -18,17 +18,9 @@
</ul>
</div>
{% 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 -->
</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>