PrivateCoffee/quackscape
PrivateCoffee/quackscape
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: improve UI visibility and interaction

Browse source 
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.
This commit is contained in:
Kumi 2024-03-28 11:15:36 +01:00
parent 4043f031ab
commit ae3d7ffc98
Signed by: kumi
GPG key ID: ECBCC9082395383F
4 changed files with 28 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/css/editor.css
View file

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

2
assets/css/scene.css
View file

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

8
assets/js/editor.js
View file

@ -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");
});
}

41
quackscape/tours/templates/tours/scene_edit.html
View file

@ -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>