Small ui fixes in wizart and defaults dialog

iNavFlight · Oct 25, 2024 · 8f8b7bb · 8f8b7bb
1 parent 55f69ff
commit 8f8b7bb
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 56 deletions.
diff --git a/index.html b/index.html
@@ -438,11 +438,14 @@ <h2 class="groundstation-telemetry__header" data-i18n="gsTelemetry"></h2>
         <div class="defaults-dialog__background"></div>
         <div class="defaults-dialog__wizard"></div>
         <div class="defaults-dialog__content">
-            <div class="tab_title" data-i18n="defaultsDialogTitle"></div>
+            <h3 data-i18n="defaultsDialogTitle"></h3>
+            <hr class="mt-0">
             <div class="defaults-dialog__content--wrapper">
-                <p class="defaults-dialog__info" data-i18n="defaultsDialogInfo"></p>
-                <p class="defaults-dialog__info" data-i18n="defaultsDialogInfo2"></p>
-                <div class="defaults-dialog__options"></div>
+                <div class="alert alert-info">
+                    <p data-i18n="defaultsDialogInfo"></p>
+                    <div data-i18n="defaultsDialogInfo2"></div>
+                </div>
+                <div class="defaults-dialog__options d-grid"></div>
             </div>
         </div>
     </div>

diff --git a/js/defaults_dialog.js b/js/defaults_dialog.js
@@ -318,15 +318,13 @@ var defaultsDialog = (function () {
         for (let i in defaultsDialogData) {
             if (defaultsDialogData.hasOwnProperty(i)) {
                 let preset = defaultsDialogData[i];
-                let $element = $("<div class='default_btn defaults_btn'>\
-                        <a class='confirm' href='#'></a>\
-                    </div>")
+                let $element = $('<button class="btn btn-lg btn-outline-primary mb-3"></button>');
 
                 if (preset.notRecommended) {
-                    $element.addClass("defaults_btn--not-recommended");
+                   $element.addClass("btn-warning").removeClass("btn-outline-primary");
                 }
 
-                $element.find("a").html(preset.title);
+                $element.html(preset.title);
                 $element.data("index", i).on('click', privateScope.onPresetClick)
                 $element.appendTo($place);
             }

diff --git a/src/css/defaults_dialog.css b/src/css/defaults_dialog.css
@@ -20,9 +20,9 @@
     margin-left: 2em;
 }
 
-.defaults-dialog__bottom_buttons  {
-    font-size: 14pt !important;
-}
+/*.defaults-dialog__bottom_buttons  {*/
+/*    font-size: 14pt !important;*/
+/*}*/
 
 .defaults-dialog__content, .defaults-dialog__wizard {
     border: var(--inav-border-width) var(--inav-border-color) solid;
@@ -33,22 +33,21 @@
     z-index: 2002;
     position: absolute;
     width: 500px;
-    height: 535px;
+    max-height: 573px;
     overflow: hidden;
+    overflow-y: auto;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
-    margin: auto;
+    margin: 1em auto;
     padding: 1em;
 }
 
 .defaults-dialog__wizard {
     font-size: 1.2em;
-}
-
-.defaults-dialog__wizard > div {
-    margin-top: 1em;
+    display: flex;
+    flex-direction: column;
 }
 
 .defaults-dialog__wizard label {
@@ -63,12 +62,11 @@
 }
 
 .defaults-dialog__content--wrapper {
-    overflow-y: auto;
+    /*overflow-y: auto;*/
 }
 
 .defaults-dialog__info {
     font-size: 1.3em;
-    /*margin-bottom: 1em;*/
 }
 
 .defaults_btn {
@@ -81,14 +79,3 @@
     font-size: 1.4em;
     line-height: 25px;
 }
-
-.defaults_btn--not-recommended a {
-    color: #444;
-    border: 1px solid #666;
-    background-image: linear-gradient(45deg, #fcea97 25%, #ffffff 25%, #ffffff 50%, #fcea97 50%, #fcea97 75%, #ffffff 75%, #ffffff 100%);
-    background-size: 56.57px 56.57px;
-}
-
-.defaults_btn--not-recommended a:hover {
-    color: #222 !important;
-}
diff --git a/wizard/buttons.html b/wizard/buttons.html
@@ -1,8 +1,4 @@
-<div class="defaults-dialog__bottom_buttons">
-    <div class="btn default_btn narrow green">
-        <a id="wizard-next" href="#">Next</a>
-    </div>
-    <div class="btn default_btn narrow">
-        <a id="wizard-skip" href="#">Skip</a>
-    </div>
+<div class="d-flex gap-2 justify-content-end mt-auto">
+    <button id="wizard-skip" class="btn btn-outline-primary">Skip</button>
+    <button id="wizard-next" class="btn btn-primary">Next</button>
 </div>
diff --git a/wizard/filters.html b/wizard/filters.html
@@ -1 +1,2 @@
-<h2>Filters wizard</h2>
+<h3>Filters wizard</h3>
+<hr class="mt-0">
diff --git a/wizard/gps.html b/wizard/gps.html
@@ -1,14 +1,22 @@
-<h2>GPS wizard</h2>
-<p>
+<h3>GPS wizard</h3>
+<hr class="mt-0">
+
+<div class="alert alert-info">
     Configure GPS and port. If you unsure about serial port or protocol, click `Skip` to go to the next page.
     You can change those settings later with the configurator UI. If no GPS installed, choose <b>None</b>.
-</p>
-<div>
-    <label for="wizard-gps-port">GPS Serial Port</label><select id="wizard-gps-port"></select>
 </div>
-<div style="display: none;" id="wizard-gps-baud-container">
-    <label for="wizard-gps-baud">GPS Baud Rate</label><select id="wizard-gps-baud"></select>
+
+<div class="hstack mb-3">
+    <select id="wizard-gps-port" class="form-select w-12r"></select>
+    <label for="wizard-gps-port">GPS Serial Port</label>
 </div>
-<div style="display: none;" id="wizard-gps-protocol-container">
-    <label for="wizard-gps-protocol">GPS Protocol</label><select id="wizard-gps-protocol"></select>
+
+<div style="display: none;" class="hstack mb-3" id="wizard-gps-baud-container">
+    <select id="wizard-gps-baud" class="form-select w-12r"></select>
+    <label for="wizard-gps-baud">GPS Baud Rate</label>
+</div>
+
+<div style="display: none;" class="hstack mb-3" id="wizard-gps-protocol-container">
+    <select id="wizard-gps-protocol" class="form-select w-12r"></select>
+    <label for="wizard-gps-protocol">GPS Protocol</label>
 </div>
diff --git a/wizard/pids.html b/wizard/pids.html
@@ -1 +1,2 @@
-<h2>PIDs wizard</h2>
+<h3>PIDs wizard</h3>
+<hr class="mt-0">
diff --git a/wizard/receiver.html b/wizard/receiver.html
@@ -1,11 +1,17 @@
-<h2>Receiver wizard</h2>
-<p>
+<h3>Receiver wizard</h3>
+<hr class="mt-0">
+
+<div class="alert alert-info">
     Configure receiver serial port and protocol. If you unsure about serial port or protocol, click `Skip` to go to the next page.
     You can change those settings later with the configurator UI.
-</p>
-<div>
-    <label for="wizard-receiver-port">Receiver Serial Port</label><select id="wizard-receiver-port"></select>
 </div>
-<div>
-    <label for="wizard-receiver-protocol">Receiver Protocol</label><select id="wizard-receiver-protocol" data-setting="serialrx_provider"></select>
+
+<div class="hstack mb-3">
+    <select id="wizard-receiver-port" class="form-select w-12r"></select>
+    <label for="wizard-receiver-port">Receiver Serial Port</label>
+</div>
+
+<div class="hstack mb-3">
+    <select id="wizard-receiver-protocol" data-setting="serialrx_provider" class="form-select w-12r"></select>
+    <label for="wizard-receiver-protocol">Receiver Protocol</label>
 </div>