From ae3d7ffc984e46c5910e1eb7d795ddaec57e8dcf Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Thu, 28 Mar 2024 11:15:36 +0100
Subject: [PATCH] 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                         |  8 ++++
 assets/css/scene.css                          |  2 +-
 assets/js/editor.js                           |  8 ++--
 .../tours/templates/tours/scene_edit.html     | 41 +++++++------------
 4 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/assets/css/editor.css b/assets/css/editor.css
index 7c124cb..4639422 100644
--- a/assets/css/editor.css
+++ b/assets/css/editor.css
@@ -66,4 +66,12 @@ body {
 
 .dropdown-menu {
     max-width: 100%;
+}
+
+#resetButton {
+  display: inline;
+}
+
+#buttons {
+  display: block;
 }
\ No newline at end of file
diff --git a/assets/css/scene.css b/assets/css/scene.css
index 0a1ef53..7fe6364 100644
--- a/assets/css/scene.css
+++ b/assets/css/scene.css
@@ -29,7 +29,7 @@
 }
 
 .hide {
-  display: none;
+  display: none !important;
 }
 
 .btn-open-sidebar {
diff --git a/assets/js/editor.js b/assets/js/editor.js
index cdf287b..900dcee 100644
--- a/assets/js/editor.js
+++ b/assets/js/editor.js
@@ -79,8 +79,8 @@ function startCreateElement(event) {
   </form>
   `;
 
-  document.getElementById("resetButton").style = "display: none;";
-  document.getElementById("buttons").style = "display: block;";
+  document.getElementById("resetButton").classList.remove("hide");
+  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("buttons").style = "display: block;";
+    document.getElementById("resetButton").classList.remove("hide");
+    document.getElementById("buttons").classList.remove("hide");
   });
 }
 
diff --git a/quackscape/tours/templates/tours/scene_edit.html b/quackscape/tours/templates/tours/scene_edit.html
index 8457479..37a6eed 100644
--- a/quackscape/tours/templates/tours/scene_edit.html
+++ b/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
-              scene="{{ scene.id }}"
-              x="{{ scene.default_x }}"
-              y="{{ scene.default_y }}"
-              z="{{ scene.default_z }}"
-              embedded
-            ></quackscape-scene>
+          <quackscape-scene
+            scene="{{ scene.id }}"
+            x="{{ scene.default_x }}"
+            y="{{ scene.default_y }}"
+            z="{{ scene.default_z }}"
+            embedded
+          ></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,
-                or on an existing object to edit it.</label
+                >Click into the sphere to create a new object, or on an existing
+                object to edit it.</label
               >
             </div>
           </div>
-          <div class="mb-2" id="buttons" style="display: none;">
-            <button
-              id="saveButton"
-              class="btn btn-primary"
-            >
-              Save
-            </button>
-            <button
-              style="display: none;"
-              id="resetButton"
-              class="btn btn-secondary"
-            >
+          <div class="mb-2 hide" id="buttons">
+            <button id="saveButton" class="btn btn-primary">Save</button>
+            <button id="resetButton" class="btn btn-secondary hide">
               Reset
             </button>
-            <button
-              id="cancelButton"
-              class="btn btn-danger"
-            >
-              Cancel
+            <button id="cancelButton" class="btn btn-danger">Cancel</button>
+            <button id="deleteButton" class="btn btn-danger hide">
+              Delete
             </button>
           </div>
         </div>