Improve preferences.html layout and style

melkati · Jun 9, 2024 · 991665d · 991665d
1 parent efabed4
commit 991665d
Show file tree

Hide file tree

Showing 8 changed files with 474 additions and 508 deletions.
diff --git a/data/index.js.gz b/data/index.js.gz
diff --git a/data/ota.js.gz b/data/ota.js.gz
diff --git a/data/preferences.html.gz b/data/preferences.html.gz
diff --git a/data/preferences.js.gz b/data/preferences.js.gz
diff --git a/data/status.js.gz b/data/status.js.gz
diff --git a/data/style.css.gz b/data/style.css.gz
diff --git a/webserver/preferences.html b/webserver/preferences.html
diff --git a/webserver/style.css b/webserver/style.css
@@ -187,6 +187,57 @@ h4 {
   background-color: var(--tag-dark-bg-color);
 }
 
+.form-group {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.form-group input[type="text"],
+.form-group input[type="password"],
+.form-group input[type="number"] {
+  flex: 2;
+}
+
+.form-group input[type="checkbox"] {
+  margin-right: 10px;
+}
+
+.form-group .tooltip-icon {
+  margin-left: 5px;
+}
+
+.form-group .tooltip-text {
+  margin-left: 10px;
+}
+
+.flex-align-center {
+  display: flex;
+  align-items: center;
+}
+
+.flex-align-center label {
+  margin-right: 10px;
+}
+
+.flex-align-center input,
+.flex-align-center select {
+  margin-right: 10px;
+}
+
+.flex-align-center .tooltip-icon {
+  margin-right: 5px;
+}
+
+#vRef + #currentVoltage {
+  margin-right: 10px;
+}
+
 #preferencesForm {
   background-color: var(--bg-color);
   border-radius: 8px;
@@ -265,6 +316,7 @@ button:hover {
   display: flex;
   justify-content: space-between;
   flex-wrap: nowrap;
+  margin-top: 20px;
 }
 
 .buttonsBackupRestore,