diff --git a/src/gui/css/options.css b/src/gui/css/options.css index 7f559889c95a4eba4eb41ffd6b237309e385e410..0e6b1604fa2149c9d9acacd65e5c4d1427a1c5c0 100644 --- a/src/gui/css/options.css +++ b/src/gui/css/options.css @@ -4,6 +4,12 @@ div.options-group { align-items: center; } +@media only screen and (min-width: 1600px) { + div.options-group.double { + grid-template-columns: max-content auto max-content auto; + } +} + /* left side */ div.options-group div.description { margin-right: 10px; diff --git a/src/gui/options.js b/src/gui/options.js index 8ad74d00e471f85d43db185eeaf286a511a4e479..c544ca2b3659f7283e69c5a63941994559a67a69 100644 --- a/src/gui/options.js +++ b/src/gui/options.js @@ -157,6 +157,14 @@ App.UI.OptionsGroup = (function() { this.options = []; } + /** + * @returns {App.UI.OptionsGroup} + */ + enableDoubleColumn() { + this.doubleColumn = true; + return this; + } + addOption(name, property, object = V) { const option = new Option(name, property, object); this.options.push(option); @@ -166,6 +174,9 @@ App.UI.OptionsGroup = (function() { render() { const container = document.createElement("div"); container.className = "options-group"; + if (this.doubleColumn) { + container.classList.add("double"); + } for (/** @type {Option} */ const option of this.options) { /* left side */ const desc = document.createElement("div"); diff --git a/src/uncategorized/summaryOptions.tw b/src/uncategorized/summaryOptions.tw index f913886f8ff630d79360e2f80b8eb287d9fdf433..33378dbd662ebfa67d0e5b7be99835dfee53dc9b 100644 --- a/src/uncategorized/summaryOptions.tw +++ b/src/uncategorized/summaryOptions.tw @@ -49,7 +49,7 @@ Sample summary: App.UI.SlaveList.SlaveInteract.stdInteract )>> -<<set _options = new App.UI.OptionsGroup()>> +<<set _options = (new App.UI.OptionsGroup()).enableDoubleColumn()>> <<run _options.addOption("Panel style is", "slavePanelStyle") .addValueList([["None", 0], ["Line Seperator", 1], ["Card", 2]])>>