Fix setup screen to work with Bootstrap 4.0

www/cards/js/qwikclock_myshifts.js

@@ -18,7 +18,7 @@ $(".card_qwikclock_myshifts").each(function () {
 	if (resp.status == "OK") {
 	    var shifts = resp.shifts;
 	    if (shifts.length > 0) {
-		shifttable.html('<thead><tr><th>Shift</th><th><i class="fas fa-play d-sm-none d-lg-inline"></i> Start</th><th><i class="fas fa-stop d-sm-none d-lg-inline"></i> End</th><th><i class="far fa-calendar-alt d-sm-none d-lg-inline"></i> Days</th></tr></thead>');
+		shifttable.html('<thead><tr><th>Shift</th><th style="white-space: nowrap;"><i class="fas fa-play"></i> Start</th><th style="white-space: nowrap;"><i class="fas fa-stop"></i> End</th><th style="white-space: nowrap;"><i class="far fa-calendar-alt"></i> Days</th></tr></thead>');
 		shifttable.append("<tbody>");
 		for (var shift in shifts) {
 		    var days = "";

www/js/login.js

@@ -79,7 +79,7 @@ function loadQuickLogin() {
                 var userhtml = "";
                 for (var user in resp.users) {
                     var u = resp.users[user];
-                    userhtml += '<div class="col-4 col-lg-3 quick-user" data-uid="' + u["uid"] + '" data-username="' + u["username"] + '" data-name="' + u["name"] + '" data-pin="' + (u["pin"] == true ? "1" : "") + '" >\n'
+                    userhtml += '<div class="col-4 col-lg-3 col-xl-2 quick-user" data-uid="' + u["uid"] + '" data-username="' + u["username"] + '" data-name="' + u["name"] + '" data-pin="' + (u["pin"] == true ? "1" : "") + '" >\n'
                             + '<svg class="identicon" width="60" height="60" data-jdenticon-value="' + u["name"] + '"></svg>\n'
                             + '<br />\n'
                             + u["name"] + "\n"

www/pages/login.html

@@ -85,7 +85,7 @@
 </div>
 <div class="container" style="height: 100%;">
     <div class="row justify-content-center" style="height: 100%;">
-        <div class="col-12 col-sm-10 col-md-8 col-lg-6">
+        <div class="col-12 col-sm-10 col-md-8 col-lg-8 col-xl-8">
             <div class="card" style="width: 100%;">
                 <h3 class="card-header"><i class="fas fa-lock"></i> Login</h3>
                 <ul class="nav nav-tabs justify-content-center">
@@ -114,11 +114,15 @@
                                 <input style="display:none" type="text" name="fakeusernameremembered"/>
                                 <input style="display:none" type="password" name="fakepasswordremembered"/>
                                 <div class="input-group">
-                                    <span class="input-group-addon"><i class="far fa-user"></i></span>
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="far fa-user"></i></span>
+                                    </div>
                                     <input type="text" class="form-control" id="username" placeholder="Username" />
                                 </div>
                                 <div class="input-group">
-                                    <span class="input-group-addon"><i class="fas fa-key"></i></span>
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fas fa-key"></i></span>
+                                    </div>
                                     <input type="text" style="-webkit-text-security: disc;" class="form-control" id="password" placeholder="Password" />
                                 </div>
                                 <br />
@@ -131,7 +135,9 @@
                             <div class="alert alert-info">Open the Business app on your phone, <br />then press the <i class="fas fa-desktop"></i> button to get a code.</div>
                             <form id="mobilecode_form">
                                 <div class="input-group input-group-lg">
-                                    <span class="input-group-addon">B-</span>
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text">B -</span>
+                                    </div>
                                     <input type="text" class="form-control" id="code" placeholder="123456" />
                                 </div>
                                 <br />

www/pages/setup.html

@@ -16,15 +16,21 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                     </div>
                     <form id="settings_form">
                         <div class="input-group">
-                            <span class="input-group-addon"><i class="fas fa-server"></i></span>
+                            <div class="input-group-prepend">
+                                <span class="input-group-text"><i class="fas fa-server"></i></span>
+                            </div>
                             <input type="text" class="form-control" id="url" placeholder="AccountHub API URL" required />
                         </div>
                         <div class="input-group">
-                            <span class="input-group-addon"><i class="fas fa-key"></i></span>
+                            <div class="input-group-prepend">
+                                <span class="input-group-text"><i class="fas fa-key"></i></span>
+                            </div>
                             <input type="text" class="form-control" id="key" placeholder="API Key" required />
                         </div>
                         <div class="input-group">
-                            <span class="input-group-addon"><i class="fas fa-users"></i></span>
+                            <div class="input-group-prepend">
+                                <span class="input-group-text"><i class="fas fa-users"></i></span>
+                            </div>
                             <select class="form-control" id="group">
                                 <option value="">Select a Quick Access Group</option>
                             </select>
@@ -36,14 +42,14 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                         </div>
                         <br />
                         <div class="form-check">
-                            <label class="form-check-label">
                             <input class="form-check-input" value="1" type="checkbox" id="kioskmode">
+                            <label class="form-check-label">
                                 Kiosk mode (run in fullscreen)
                             </label>
                         </div>
                         <div class="form-check">
-                            <label class="form-check-label">
                             <input class="form-check-input" value="1" type="checkbox" id="largebtns">
+                            <label class="form-check-label">
                                 Use larger buttons if available
                             </label>
                         </div>