diff --git a/src/interaction/siWardrobe.js b/src/interaction/siWardrobe.js index 46640b44817b17325e4d2184aae2c4ec7f92e21e..626e942f10adf75d1d197019a2569544da238e6c 100644 --- a/src/interaction/siWardrobe.js +++ b/src/interaction/siWardrobe.js @@ -39,7 +39,8 @@ App.UI.SlaveInteract.wardrobe = function(slave) { } function filtersDOM() { - const el = document.createElement("p"); + const el = document.createElement("div"); + el.classList.add("filter-line"); el.append("Filters: "); const niceFilters = new Map([ @@ -67,9 +68,8 @@ App.UI.SlaveInteract.wardrobe = function(slave) { ); } } - App.UI.DOM.appendNewElement("span", el, App.UI.DOM.generateLinksStrip(linkArray)); + App.UI.DOM.appendNewElement("span", el, App.UI.DOM.generateLinksStrip(linkArray), "filter-cluster"); - el.append(" / "); const exposureFilters = new Map([ [0, "Modest"], [1, "Normal"], @@ -98,17 +98,20 @@ App.UI.SlaveInteract.wardrobe = function(slave) { ); } } - App.UI.DOM.appendNewElement("span", el, App.UI.DOM.generateLinksStrip(linkArray)); - el.append(" / "); - - App.UI.DOM.appendNewElement("span", el, App.UI.DOM.link( - "Reset Filters", - () => { - filters = {}; - refresh(); - } - )); // clear filters - App.UI.DOM.appendNewElement("hr", el); + App.UI.DOM.appendNewElement("span", el, App.UI.DOM.generateLinksStrip(linkArray), "filter-cluster"); + + // clear filters + App.UI.DOM.appendNewElement( + "span", + el, + App.UI.DOM.link( + "Reset Filters", + () => { + filters = {}; + refresh(); + } + ), + "filter-cluster"); return el; } diff --git a/src/interaction/wardrobe.css b/src/interaction/wardrobe.css new file mode 100644 index 0000000000000000000000000000000000000000..d857756c3b40c29dd844ab94819131d7f3081345 --- /dev/null +++ b/src/interaction/wardrobe.css @@ -0,0 +1,9 @@ +span.filter-cluster { + background-color: var(--button-color); + border: solid 2px var(--button-border-color); + margin: 6px; + padding: 1ex 1ex; +} +div.filter-line { + line-height: 3em; +} \ No newline at end of file