From 41db9ec89b8eb76009f0cf8894aa0f6e2cc2f8bd Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 12 Sep 2020 11:22:17 -0400
Subject: Use a grid layout for scanning inputs (#814)

---
 ext/bg/settings.html | 55 ++++++++++++++++++++++++----------------------------
 1 file changed, 25 insertions(+), 30 deletions(-)

(limited to 'ext/bg/settings.html')

diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index eb20f5f7..e934a92c 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -434,36 +434,31 @@
                     <button class="btn btn-default" id="scan-input-add" title="Add scan input"><span class="glyphicon glyphicon-plus"></span></button>
 
                     <template id="scan-input-template"><div class="scan-input">
-                        <table class="scan-input-table"><tbody>
-                            <tr class="scan-input-include">
-                                <td class="scan-input-index-cell" rowspan="3"><div class="scan-input-index"></div></td>
-                                <td class="scan-input-prefix-cell"><div class="scan-input-prefix">Include</div></td>
-                                <td class="scan-input-input-cell"><div class="scan-input-input-cell-inner">
-                                    <input type="text" class="form-control scan-input-field" placeholder="No inputs">
-                                    <button class="btn btn-default mouse-button" title="Mouse button"><span class="mouse-button-icon"></span></button>
-                                </div></td>
-                                <td class="scan-input-remove-button-cell"><button class="btn btn-danger scan-input-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></td>
-                            </tr>
-                            <tr class="scan-input-exclude">
-                                <td class="scan-input-prefix-cell"><div class="scan-input-prefix">Exclude</div></td>
-                                <td class="scan-input-input-cell"><div class="scan-input-input-cell-inner">
-                                    <input type="text" class="form-control scan-input-field" placeholder="No inputs">
-                                    <button class="btn btn-default mouse-button" title="Mouse button"><span class="mouse-button-icon"></span></button>
-                                </div></td>
-                                <td class="scan-input-empty-cell"></td>
-                            </tr>
-                            <tr class="scan-input-types">
-                                <td class="scan-input-prefix-cell"><div class="scan-input-prefix">Types</div></td>
-                                <td class="scan-input-input-cell"><div class="scan-input-input-cell-inner">
-                                    <div class="form-control scan-input-type-list">
-                                        <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-type="mouse"><span>Mouse</span></label>
-                                        <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-type="touch"><span>Touch</span></label>
-                                        <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-type="pen"><span>Pen</span></label>
-                                    </div>
-                                </div></td>
-                                <td class="scan-input-empty-cell"></td>
-                            </tr>
-                        </tbody></table>
+                        <div class="scan-input-grid">
+                            <div class="scan-input-index-cell"><div class="scan-input-index"></div></div>
+
+                            <div class="scan-input-prefix-cell" data-property="include"><div class="scan-input-prefix">Include</div></div>
+                            <div class="scan-input-content-cell" data-property="include"><div class="scan-input-input-cell-inner">
+                                <input type="text" class="form-control scan-input-field" placeholder="No inputs" data-property="include">
+                                <button class="btn btn-default mouse-button" title="Mouse button" data-property="include"><span class="mouse-button-icon"></span></button>
+                            </div></div>
+                            <div class="scan-input-suffix-cell"><button class="btn btn-danger scan-input-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></div>
+
+                            <div class="scan-input-prefix-cell" data-property="exclude"><div class="scan-input-prefix">Exclude</div></div>
+                            <div class="scan-input-content-cell" data-property="exclude"><div class="scan-input-input-cell-inner">
+                                <input type="text" class="form-control scan-input-field" placeholder="No inputs" data-property="exclude">
+                                <button class="btn btn-default mouse-button" title="Mouse button" data-property="exclude"><span class="mouse-button-icon"></span></button>
+                            </div></div>
+
+                            <div class="scan-input-prefix-cell" data-property="types"><div class="scan-input-prefix">Types</div></div>
+                            <div class="scan-input-content-cell" data-property="types"><div class="scan-input-input-cell-inner">
+                                <div class="scan-input-type-list-container form-control"><div class="scan-input-type-list">
+                                    <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="mouse"><span>Mouse</span></label>
+                                    <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="touch"><span>Touch</span></label>
+                                    <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="pen"><span>Pen</span></label>
+                                </div></div>
+                            </div></div>
+                        </div>
                     </div></template>
                 </div>
             </div>
-- 
cgit v1.2.3