Просмотр исходного кода

Closes #19550: Enhancement: Refactor rack elevations template for lazy loading /dcim/rack-elevations/ (#19823)

* Refactor rack elevation template to use htmx for dynamic loading and improved user experience

* rework to prevent dup loading

* Update netbox/templates/dcim/inc/rack_elevation.html

Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* Update netbox/templates/dcim/inc/rack_elevation.html

Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* Move inline styles to styles/custom/racks.css

---------

Co-authored-by: tony.nealon@wholesailnetworks.com <tony.nealon@wholesailnetworks.com>
Co-authored-by: tbotnz <tonynealon1989@gmail.com>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>
Jason Novinger 7 месяцев назад
Родитель
Сommit
ee94fb0b94

Разница между файлами не показана из-за своего большого размера
+ 0 - 0
netbox/project-static/dist/netbox.css


+ 4 - 0
netbox/project-static/styles/custom/racks.scss

@@ -0,0 +1,4 @@
+.rack-loading-container {
+  min-height: 200px;
+  margin-left: 30px;
+}

+ 1 - 0
netbox/project-static/styles/netbox.scss

@@ -27,3 +27,4 @@
 @import 'custom/markdown';
 @import 'custom/misc';
 @import 'custom/notifications';
+@import 'custom/racks';

+ 12 - 1
netbox/templates/dcim/inc/rack_elevation.html

@@ -1,6 +1,17 @@
 {% load i18n %}
 <div style="margin-left: -30px">
-    <object data="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" class="rack_elevation" aria-label="{% trans "Rack elevation" %}"></object>
+  <div
+    hx-get="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{ face }}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}"
+    hx-trigger="intersect"
+    hx-swap="outerHTML"
+    aria-label="{% trans "Rack elevation" %}"
+  >
+    <div class="d-flex justify-content-center align-items-center rack-loading-container">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">{% trans "Loading..." %}</span>
+      </div>
+    </div>
+  </div>
 </div>
 <div class="text-center mt-3">
     <a class="btn btn-outline-primary" href="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" hx-boost="false">

Некоторые файлы не были показаны из-за большого количества измененных файлов