Fixed css issues with setup.html

kennycoder · kennycoder · commit 253ffc08a81b · 2025-09-02T15:52:44.000+02:00
diff --git a/data/fans.html b/data/fans.html
@@ -186,14 +186,14 @@ <h1>Fans & Temperatures</h1>
           `);
           fanContainer.append(tabsContainer);
 
-          const controlsContainer = $('<div>').addClass('chart-controls-container').attr('id', `chart-controls-${key}`);
+          const controlsContainer = $('<div>').addClass('chart-controls-container form-grid').attr('id', `chart-controls-${key}`);
           const chartContainer = $('<div>').addClass('chart-container').attr('id', `chart-${key}`);
           chartContainer.append(`<h3 style="position: absolute; opacity: 30%; margin-inline: auto; width: fit-content; left:0; right:0; top: 50%; transform: translateY(-50%); user-select: none;">${fanLabelOverride}</h3>`);
           
           const svg = $(`<svg width="100%" height="100%"></svg>`).attr('id', `svg-${key}`).appendTo(chartContainer);
 
           const temp_src_select_label = $(`<label for="sensor_id-${key}">Temperature source:</label>`);
-          const temp_src_select = $(`<select style="bottom: 10px; right: 10px;"></select><br>`).attr('id', `sensor_id-${key}`)
+          const temp_src_select = $(`<select style="bottom: 10px; right: 10px;"></select>`).attr('id', `sensor_id-${key}`)
           for (const t_sensor of available_sensors) {
             temp_src_select.append($('<option>', { 
               value: t_sensor,
@@ -212,7 +212,6 @@ <h1>Fans & Temperatures</h1>
           }
           rpm_select_label.appendTo(controlsContainer);
           rpm_select.appendTo(controlsContainer);
-          $(`<br>`).appendTo(controlsContainer);
 
           const temp_select_label = $(`<label for="temp_th-${key}">Temperature alarm:</label>`);
           const temp_select = $(`<select style="bottom: 10px; right: 100px;"></select>`).attr('id', `temp_th-${key}`);
@@ -228,7 +227,6 @@ <h1>Fans & Temperatures</h1>
           }
           temp_select_label.appendTo(controlsContainer);
           temp_select.appendTo(controlsContainer);
-          $(`<br>`).appendTo(controlsContainer);
 
           const halt_select_label = $(`<label for="halt_on-${key}">Halt PC on:</label>`);
           const halt_select = $(`<select style="bottom: 10px; right: 100px;"></select>`).attr('id', `halt-${key}`);
@@ -238,7 +236,6 @@ <h1>Fans & Temperatures</h1>
           halt_select.append($('<option>', { value: 3, text : 'Halt on both', selected: halt_on == 3 }));
           halt_select_label.appendTo(controlsContainer);
           halt_select.appendTo(controlsContainer);
-          $(`<br>`).appendTo(controlsContainer);
 
           const stepupdown_select_label = $(`<label for="step-${key}">Step up/down duration:</label>`);
           const stepupdown_select = $(`<select style="bottom: 10px; right: 100px;"></select>`).attr('id', `step-${key}`);
@@ -247,22 +244,21 @@ <h1>Fans & Temperatures</h1>
           }
           stepupdown_select_label.appendTo(controlsContainer);
           stepupdown_select.appendTo(controlsContainer);
-          $(`<br>`).appendTo(controlsContainer);
 
-          $('<hr>').appendTo(controlsContainer);
+          $('<hr style="grid-column: 1 / -1;">').appendTo(controlsContainer);
 
           $('#tab-curve-' + key).append(chartContainer);
 
           const pidControlsContainer = $(`
-            <div class="pid-controls" id="pid-controls-${key}" style="display: block;">
+            <div class="pid-controls form-grid" id="pid-controls-${key}" style="display: grid; gap: 15px 10px;">
               <label for="pid_target-${key}">Target Temperature (°${units}):</label>
-              <input type="number" id="pid_setpoint-${key}" value="${pid_setpoint || 30}"><br>
+              <input type="number" id="pid_setpoint-${key}" value="${pid_setpoint || 30}">
               <label for="pid_p-${key}" title="Proportional (Kp): How strongly the fan reacts to the current temperature difference. Higher values mean a stronger reaction. Range: 0.1 - 10.0">Reaction Speed:</label>
-              <input type="number" id="pid_kp-${key}" step="0.1" value="${pid_kp || 1.0}" min="0.1" max="10.0"><br>
+              <input type="number" id="pid_kp-${key}" step="0.1" value="${pid_kp || 1.0}" min="0.1" max="10.0">
               <label for="pid_i-${key}" title="Integral (Ki): Corrects for small, steady-state temperature errors over time. Helps eliminate temperature drift. Range: 0.0 - 10.0">Correction Strength:</label>
-              <input type="number" id="pid_ki-${key}" step="0.1" value="${pid_ki || 0.1}" min="0.0" max="10.0"><br>
+              <input type="number" id="pid_ki-${key}" step="0.1" value="${pid_ki || 0.1}" min="0.0" max="10.0">
               <label for="pid_d-${key}" title="Derivative (Kd): Predicts future temperature changes and dampens the fan's reaction to prevent overshooting the target. Range: 0.0 - 10.0">Stability:</label>
-              <input type="number" id="pid_kd-${key}" step="0.1" value="${pid_kd || 0.5}" min="0.0" max="10.0"><br>
+              <input type="number" id="pid_kd-${key}" step="0.1" value="${pid_kd || 0.5}" min="0.0" max="10.0">
             </div>
           `);
           $('#tab-pid-' + key).append(pidControlsContainer);
diff --git a/data/rgb.html b/data/rgb.html
@@ -25,9 +25,8 @@ <h2>Menu</h2>
     <div class="card">
       <h1>RGB Control</h1>
 
-      <form id="rgb-form">
+      <form id="rgb-form" class="form-grid" style="gap: 15px 10px;">
         <label for="mode_led_0">Operation mode for ARGB header #1:</label>
-        <br>
         <select name="mode_led_0" id="mode_led_0">
           <option value="0">Off</option>
           <option value="1">Static single color</option>
@@ -36,7 +35,6 @@ <h1>RGB Control</h1>
           <option value="4">Rainbow effect</option>
           <option value="5">Pass-through from the external source</option>
         </select>
-        <br><br>
         <label for="num_leds_led_0">Amount of LEDs on the strip (<span id="num_leds_led_0_val">32</span>):</label>
         <input type="range" min="1" max="64" value="10" class="slider" id="num_leds_led_0" name="num_leds_led_0">
         <label for="start_color_led_0">ARGB 1 Color 1:</label>
@@ -46,10 +44,9 @@ <h1>RGB Control</h1>
         <label for="speed_led_0">Effect speed (<span id="speed_led_0_val">32</span>):</label>
         <input type="range" min="1" max="100" value="11" class="slider" id="speed_led_0" name="speed_led_0">
 
-        <hr>
+        <hr style="grid-column: 1 / -1;">
         
         <label for="mode_led_1">Operation mode for ARGB header #2:</label>
-        <br>
         <select name="mode_led_1" id="mode_led_1">
           <option value="0">Off</option>
           <option value="1">Static single color</option>
@@ -58,19 +55,16 @@ <h1>RGB Control</h1>
           <option value="4">Rainbow effect</option>
           <option value="5">Pass-through from the external source</option>
         </select>
-        <br><br>
         <label for="num_leds_led_1">Amount of LEDs on the strip (<span id="num_leds_led_1_val">32</span>):</label>
         <input type="range" min="1" max="64" value="12" class="slider" id="num_leds_led_1" name="num_leds_led_1">
-        <br><br>
         <label for="start_color_led_1">ARGB 2 Color 1:</label>
         <input type="color" id="start_color_led_1" name="start_color_led_1" value="#0000ff">
         <label for="end_color_led_1">ARGB 2 Color 2:</label>
         <input type="color" id="end_color_led_1" name="end_color_led_1" value="#ff0000">
         <label for="speed_led_1">Effect speed (<span id="speed_led_1_val">32</span>):</label>
         <input type="range" min="1" max="100" value="13" class="slider" id="speed_led_1" name="speed_led_1">
-        <br><br>
 
-        <button type="submit">Save Colors</button>
+        <button type="submit" style="grid-column: 2;">Save Colors</button>
       </form>
     </div>
   </div>
@@ -94,6 +88,7 @@ <h1>RGB Control</h1>
               value = name.includes("color") ? toHexColorString(value) : value;
               $("#" + name + "_" + led_id).val(value);
 
+              console.log(name, led_id, value);
               if($("#" + name + "_" + led_id + "_val").length) {
                 $("#" + name + "_" + led_id + "_val").text(value);
               }
diff --git a/data/settings.html b/data/settings.html
@@ -26,7 +26,7 @@ <h2>Menu</h2>
     <div class="card">
       <h1>WiFi Setup</h1>
 
-      <form id="wifi-form">
+      <form id="wifi-form" class="form-grid" style="gap: 15px 10px;">
         <label for="ssid">WiFi Network:</label>
         <select id="ssid" name="ssid">
           <option value="">Scanning your WiFi networks, please wait..</option>
@@ -44,11 +44,10 @@ <h1>WiFi Setup</h1>
           <option value="F">Farenheit</option>
         </select>
 
-        <hr>
-        <input type="checkbox" id="mqtt_enable" name="mqtt_enable" value="true" disabled>
-        <label style="display: inline" for="mqtt_enable">Enable sending telemetry via MQTT</label>
-        <br><br>
-
+        <hr style="grid-column: 1 / -1;">
+        <label style="text-align: right;" for="mqtt_enable">Enable sending telemetry via MQTT</label>
+        <input type="checkbox" id="mqtt_enable" name="mqtt_enable" value="true" disabled  style="width: min-content;">
+        
         <label for="mqtt_broker">MQTT Broker:</label>
         <input type="text" id="mqtt_broker" name="mqtt_broker">
 
@@ -75,7 +74,7 @@ <h1>WiFi Setup</h1>
         <input type="hidden" id="force_reboot" name="force_reboot" value="true">
         <input type="hidden" id="offline_mode" name="offline_mode" value="true">
 
-        <button type="submit">Save</button>
+        <button type="submit" style="grid-column: 2;">Save</button>
       </form>
       <hr>
       <button id="reset" style="background-color: red">Factory Reset</button>
diff --git a/data/setup.html b/data/setup.html
@@ -17,7 +17,7 @@
       </div>
       <div>
         <h1>WiFi Setup</h1>
-        <form id="wifi-form">
+        <form id="wifi-form" class="form-grid" style="gap: 15px 10px;">
           <label for="ssid">WiFi Network:</label>
           <select id="ssid" name="ssid">
         <option value="">Scanning your WiFi networks, please wait..</option>
@@ -40,7 +40,7 @@ <h1>WiFi Setup</h1>
       <input type="hidden" id="force_reboot" name="force_reboot" value="false">
       <input type="hidden" id="offline_mode" name="offline_mode" value="true">
 
-      <button type="submit">Finish Setup & Connect</button>
+      <button type="submit" style="grid-column: 2;">Finish Setup & Connect</button>
         </form>
       </div>
     </div>
diff --git a/data/styles.css b/data/styles.css
@@ -86,6 +86,18 @@ h1 {
 	margin-bottom: 10px;
 }
 
+.form-grid {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 5px 10px;
+	align-items: center;
+}
+
+.form-grid label {
+	text-align: left;
+	margin-bottom: 0; /* Override default margin */
+}
+
 .chart-container {
 	display: inline-block;
 	width: 640px;
@@ -267,7 +279,7 @@ input[type="text"],
 input[type="password"],
 input[type="number"],
 select {
-	width: 100%;
+	width: auto;
 	padding: 12px;
 	border: 1px solid #ccc;
 	border-radius: 4px;
@@ -287,6 +299,7 @@ select:read-only {
 	justify-content: center;
 	align-items: center;
 	min-height: 100vh;
+	width: 100%;
 }
 
 .card-content {
diff --git a/mock-ui/main.go b/mock-ui/main.go
@@ -99,7 +99,7 @@ func main() {
 		h3 := fmt.Sprintf("%x", 7134613)
 		h4 := fmt.Sprintf("%x", 5847134)
 
-		fmt.Fprintf(w, `{"LED_1": {"mode": 2, "speed": 69, "start_color": "#%s", "end_color": "#%s", "num_leds": 16}, "LED_2": {"mode": 1, "speed": 69, "start_color": "#%s", "end_color": "#%s", "num_leds": 59}}`, h1, h2, h3, h4)
+		fmt.Fprintf(w, `{"LED_0": {"mode": 2, "speed": 69, "start_color": "%s", "end_color": "%s", "num_leds": 16}, "LED_1": {"mode": 1, "speed": 69, "start_color": "%s", "end_color": "%s", "num_leds": 59}}`, h1, h2, h3, h4)
 	})
 
 	http.HandleFunc("/get-data", func(w http.ResponseWriter, r *http.Request) {
