From adb0cf41aba606cc05960261294ff5300a600d02 Mon Sep 17 00:00:00 2001
From: Daniel Imms <daimms@microsoft.com>
Date: Sun, 3 Jun 2018 15:37:01 +0200
Subject: [PATCH] Improve display of options

---
 demo/index.html |  1 +
 demo/main.js    | 12 ++++++++----
 demo/style.css  | 16 ++++++++++++++++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 41a77205..f374d998 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -30,6 +30,7 @@
         <input type="number" id="padding" />
       </div>
     </div>
+    <hr/>
     <p><strong>Attention:</strong> The demo is a barebones implementation and is designed for the development and evaluation of xterm.js only. Exposing the demo to the public as is would introduce security risks for the host.</p>
     <script src="dist/bundle.js" defer ></script>
   </body>
diff --git a/demo/main.js b/demo/main.js
index e4d0bb2b..f765f3ce 100644
--- a/demo/main.js
+++ b/demo/main.js
@@ -187,19 +187,23 @@ function initOptions(term) {
   });
 
   var html = '';
+  html += '<div class="option-group">';
   booleanOptions.forEach(o => {
-    html += `<div><label><input id="opt-${o}" type="checkbox" ${term.getOption(o) ? 'checked' : ''}/> ${o}</label></div>`;
+    html += `<div class="option"><label><input id="opt-${o}" type="checkbox" ${term.getOption(o) ? 'checked' : ''}/> ${o}</label></div>`;
   });
+  html += '</div><div class="option-group">';
   numberOptions.forEach(o => {
-    html += `<div><label>${o} <input id="opt-${o}" type="number" value="${term.getOption(o)}"/></label></div>`;
+    html += `<div class="option"><label>${o} <input id="opt-${o}" type="number" value="${term.getOption(o)}"/></label></div>`;
   });
+  html += '</div><div class="option-group">';
   Object.keys(stringOptions).forEach(o => {
     if (stringOptions[o]) {
-      html += `<div><label>${o} <select id="opt-${o}">${stringOptions[o].map(v => `<option ${term.getOption(o) === v ? 'selected' : ''}>${v}</option>`).join('')}</select></label></div>`;
+      html += `<div class="option"><label>${o} <select id="opt-${o}">${stringOptions[o].map(v => `<option ${term.getOption(o) === v ? 'selected' : ''}>${v}</option>`).join('')}</select></label></div>`;
     } else {
-      html += `<div><label>${o} <input id="opt-${o}" type="text" value="${term.getOption(o)}"/></label></div>`
+      html += `<div class="option"><label>${o} <input id="opt-${o}" type="text" value="${term.getOption(o)}"/></label></div>`
     }
   });
+  html += '</div>';
 
   var container = document.getElementById('options-container');
   container.innerHTML = html;
diff --git a/demo/style.css b/demo/style.css
index 1ab5f61c..b061dfcb 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -14,3 +14,19 @@ h1 {
     margin: 0 auto;
     padding: 2px;
 }
+
+p {
+    font-size: 0.9em;
+    font-style: italic
+}
+
+#option-container {
+    display: flex;
+    justify-content: center;
+}
+
+.option-group {
+    display: inline-block;
+    padding-left: 20px;
+    vertical-align: top;
+}