From dddaa102b3e28c91391e5041a6297631aa089d97 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Sat, 11 Apr 2020 14:19:21 +1000
Subject: [PATCH] Layout improvements

---
 InvenTree/InvenTree/static/css/inventree.css          |  7 ++-----
 .../InvenTree/static/script/inventree/filters.js      | 11 ++++++-----
 InvenTree/InvenTree/static/script/inventree/stock.js  |  2 +-
 InvenTree/templates/stock_table.html                  | 10 +---------
 4 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index e8a98476db..21a5c32575 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -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;
diff --git a/InvenTree/InvenTree/static/script/inventree/filters.js b/InvenTree/InvenTree/static/script/inventree/filters.js
index 47b86b227a..97f9d5b722 100644
--- a/InvenTree/InvenTree/static/script/inventree/filters.js
+++ b/InvenTree/InvenTree/static/script/inventree/filters.js
@@ -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() {
 
diff --git a/InvenTree/InvenTree/static/script/inventree/stock.js b/InvenTree/InvenTree/static/script/inventree/stock.js
index 053dbb81c7..5a098294fe 100644
--- a/InvenTree/InvenTree/static/script/inventree/stock.js
+++ b/InvenTree/InvenTree/static/script/inventree/stock.js
@@ -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");
 
diff --git a/InvenTree/templates/stock_table.html b/InvenTree/templates/stock_table.html
index 2106b0a3a4..6f74f568dd 100644
--- a/InvenTree/templates/stock_table.html
+++ b/InvenTree/templates/stock_table.html
@@ -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>