feat: improve UI visibility and interaction

Enhanced UI element visibility and interaction across the editor and
scene components. By switching to classList manipulation for showing and
hiding UI elements, the approach aligns better with modern best
practices, ensuring smooth transitions and consistency in user
experience. The addition of `!important` in the CSS for the `.hide`
class guarantees the override of conflicting styles, addressing
potential visibility issues. Adjustments in HTML formatting enhance
readability and maintainability without altering functionality. This
change, while seemingly minor, significantly improves the user's ability
to intuitively navigate and interact with the UI, potentially reducing
frustration and increasing overall user satisfaction.

assets/css/editor.css

@@ -67,3 +67,11 @@ body {
 .dropdown-menu {
     max-width: 100%;
 }
+
+#resetButton {
+  display: inline;
+}
+
+#buttons {
+  display: block;
+}

assets/css/scene.css

@@ -29,7 +29,7 @@
 }
 
 .hide {
-  display: none;
+  display: none !important;
 }
 
 .btn-open-sidebar {

assets/js/editor.js

@@ -79,8 +79,8 @@ function startCreateElement(event) {
   </form>
   `;
 
-  document.getElementById("resetButton").style = "display: none;";
+  document.getElementById("resetButton").classList.remove("hide");
-  document.getElementById("buttons").style = "display: block;";
+  document.getElementById("buttons").classList.remove("hide");
 
   document
     .getElementById("resourcetype")
@@ -235,8 +235,8 @@ function startModifyElement(event) {
         element_data.obj.destination_z;
     }
 
-    document.getElementById("resetButton").style = "display: inline;";
+    document.getElementById("resetButton").classList.remove("hide");
-    document.getElementById("buttons").style = "display: block;";
+    document.getElementById("buttons").classList.remove("hide");
   });
 }
 

quackscape/tours/templates/tours/scene_edit.html

@@ -24,13 +24,13 @@
       <div class="row">
         <!-- Main area for the scene -->
         <div class="col-md-9 scene-container">
-            <quackscape-scene
+          <quackscape-scene
-              scene="{{ scene.id }}"
+            scene="{{ scene.id }}"
-              x="{{ scene.default_x }}"
+            x="{{ scene.default_x }}"
-              y="{{ scene.default_y }}"
+            y="{{ scene.default_y }}"
-              z="{{ scene.default_z }}"
+            z="{{ scene.default_z }}"
-              embedded
+            embedded
-            ></quackscape-scene>
+          ></quackscape-scene>
         </div>
 
         <!-- Sidebar for properties -->
@@ -39,30 +39,19 @@
           <div id="propertiesContent" class="mb-3">
             <div class="mb-2">
               <label for="propertyExample" class="form-label"
-                >Click into the sphere to create a new object,
+                >Click into the sphere to create a new object, or on an existing
-                or on an existing object to edit it.</label
+                object to edit it.</label
               >
             </div>
           </div>
-          <div class="mb-2" id="buttons" style="display: none;">
+          <div class="mb-2 hide" id="buttons">
-            <button
+            <button id="saveButton" class="btn btn-primary">Save</button>
-              id="saveButton"
+            <button id="resetButton" class="btn btn-secondary hide">
-              class="btn btn-primary"
-            >
-              Save
-            </button>
-            <button
-              style="display: none;"
-              id="resetButton"
-              class="btn btn-secondary"
-            >
               Reset
             </button>
-            <button
+            <button id="cancelButton" class="btn btn-danger">Cancel</button>
-              id="cancelButton"
+            <button id="deleteButton" class="btn btn-danger hide">
-              class="btn btn-danger"
+              Delete
-            >
-              Cancel
             </button>
           </div>
         </div>