Improve look of settings menu; rearrange some entries

macrovision.css

@@ -927,7 +927,7 @@ button {
     border-color: #222;
     border-width: 5px;
     border-style: solid;
-    max-width: 360pt;
+    max-width: 400pt;
 }
 
 .settings-holder.enabled {
@@ -936,8 +936,7 @@ button {
 }
 
 .settings-desc {
-    text-align: right;
-    margin-right: 8pt;
+    margin-left: 8pt;
     user-select: none;
     flex: 1;
 }
@@ -951,8 +950,16 @@ button {
     font-size: 200%;
     margin-left: 8pt;
     user-select: none;
-    max-width: 120pt;
-    width: 120pt;
+    max-width: 200pt;
+    width: 200pt;
+}
+
+.settings-vertical {
+    display: flex;
+    flex-direction: column;
+    width: 250pt;
+    max-width: 250pt;
+    min-width: 250pt;
 }
 
 .settings-holder > select {

macrovision.js

@@ -2231,6 +2231,55 @@ function toggleBodyClass(cls, setting) {
 }
 
 const settingsData = {
+    "show-vertical-scale": {
+        name: "Vertical Scale",
+        desc: "Draw vertical scale marks",
+        type: "toggle",
+        default: true,
+        get value() {
+            return config.drawYAxis;
+        },
+        set value(param) {
+            config.drawYAxis = param;
+            drawScales(false);
+        }
+    },
+    "show-horizontal-scale": {
+        name: "Horiziontal Scale",
+        desc: "Draw horizontal scale marks",
+        type: "toggle",
+        default: false,
+        get value() {
+            return config.drawXAxis;
+        },
+        set value(param) {
+            config.drawXAxis = param;
+            drawScales(false);
+        }
+    },
+    "show-altitudes": {
+        name: "Altitudes",
+        desc: "Draw interesting altitudes",
+        type: "select",
+        default: "none",
+        options: [
+            "none",
+            "all",
+            "atmosphere",
+            "orbits",
+            "weather",
+            "water",
+            "geology",
+            "thicknesses"
+        ],
+        get value() {
+            return config.drawAltitudes;
+        },
+        set value(param) {
+            config.drawAltitudes = param;
+            drawScales(false);
+        }
+    },
     "lock-y-axis": {
         name: "Lock Y-Axis",
         desc: "Keep the camera at ground-level",
@@ -2252,6 +2301,18 @@ const settingsData = {
             }
         }
     },
+    "solid-ground": {
+        name: "Ground",
+        desc: "Draw solid ground at the y=0 line",
+        type: "toggle",
+        default: true,
+        get value() {
+            return checkBodyClass("toggle-bottom-cover");
+        },
+        set value(param) {
+            toggleBodyClass("toggle-bottom-cover", param);
+        }
+    },
     "ground-pos": {
         name: "Ground Position",
         desc: "How high the ground is if the y-axis is locked",
@@ -2296,57 +2357,8 @@ const settingsData = {
             config.autoUnits = param;
         }
     },
-    "show-vertical-scale": {
-        name: "Show Vertical Scale",
-        desc: "Draw vertical scale marks",
-        type: "toggle",
-        default: true,
-        get value() {
-            return config.drawYAxis;
-        },
-        set value(param) {
-            config.drawYAxis = param;
-            drawScales(false);
-        }
-    },
-    "show-altitudes": {
-        name: "Show Altitudes",
-        desc: "Draw interesting altitudes",
-        type: "select",
-        default: "none",
-        options: [
-            "none",
-            "all",
-            "atmosphere",
-            "orbits",
-            "weather",
-            "water",
-            "geology",
-            "thicknesses"
-        ],
-        get value() {
-            return config.drawAltitudes;
-        },
-        set value(param) {
-            config.drawAltitudes = param;
-            drawScales(false);
-        }
-    },
-    "show-horizontal-scale": {
-        name: "Show Horiziontal Scale",
-        desc: "Draw horizontal scale marks",
-        type: "toggle",
-        default: false,
-        get value() {
-            return config.drawXAxis;
-        },
-        set value(param) {
-            config.drawXAxis = param;
-            drawScales(false);
-        }
-    },
     "zoom-when-adding": {
-        name: "Zoom When Adding",
+        name: "Zoom On Add",
         desc: "Zoom to fit when you add a new entity",
         type: "toggle",
         default: true,
@@ -2358,7 +2370,7 @@ const settingsData = {
         }
     },
     "zoom-when-sizing": {
-        name: "Zoom When Sizing",
+        name: "Zoom On Size",
         desc: "Zoom to fit when you select an entity's size",
         type: "toggle",
         default: true,
@@ -2477,18 +2489,6 @@ const settingsData = {
             toggleBodyClass("smoothing", param);
         }
     },
-    "solid-ground": {
-        name: "Solid Ground",
-        desc: "Draw solid ground at the y=0 line",
-        type: "toggle",
-        default: true,
-        get value() {
-            return checkBodyClass("toggle-bottom-cover");
-        },
-        set value(param) {
-            toggleBodyClass("toggle-bottom-cover", param);
-        }
-    },
     "auto-food-intake": {
         name: "Estimate Food Intake",
         desc: "Guess how much food creatures need, based on their mass -- 2000kcal per 150lbs",
@@ -2534,7 +2534,10 @@ function prepareSettings(userSettings) {
         
         const input = document.createElement("input");
         input.id = "setting-" + id;
-
+        
+        const vertical = document.createElement("div");
+        vertical.classList.add("settings-vertical");
+        
         const name = document.createElement("label");
         name.innerText = entry.name;
         name.classList.add("settings-name");
@@ -2552,9 +2555,10 @@ function prepareSettings(userSettings) {
             
             holder.setAttribute("for", input.id);
 
-            holder.appendChild(name);
+            vertical.appendChild(name);
+            vertical.appendChild(desc);
+            holder.appendChild(vertical);
             holder.appendChild(input);
-            holder.appendChild(desc);
             menubar.appendChild(holder);
 
             const update = () => {
@@ -2586,9 +2590,10 @@ function prepareSettings(userSettings) {
 
             select.value = userSettings[id] === undefined ? entry.default : userSettings[id];
 
-            holder.appendChild(name);
+            vertical.appendChild(name);
+            vertical.appendChild(desc);
+            holder.appendChild(vertical);
             holder.appendChild(select);
-            holder.appendChild(desc);
             menubar.appendChild(holder);
 
             holder.classList.add("enabled");
@@ -2677,6 +2682,8 @@ function setUserSettings(settings) {
 const lastHelpChange = 1601955834693;
 
 function checkHelpDate() {
+    // disabling this for now
+    return false;
     try {
         const old = localStorage.getItem("help-viewed");