Refactor 'controls' template block; ditch old classes

netbox/project-static/styles/old/netbox.scss

@@ -7,45 +7,6 @@
 @import './utilities';
 //@import './variables';
 
-// Object list control buttons (Add/Clone/Import/Export)
-.controls {
-  margin-bottom: map.get($spacers, 2);
-
-  @media print {
-    // Never print controls. Use this over the .noprint utility so plugin authors don't need to
-    // remember to add the class.
-    display: none !important;
-  }
-
-  // Each group of buttons.
-  .control-group {
-    display: flex;
-    flex-wrap: wrap;
-    // Left-align controls on mobile.
-    justify-content: flex-start;
-
-    // Right-align controls on larger screens.
-    @include media-breakpoint-up(lg) {
-      justify-content: flex-end;
-    }
-
-    > * {
-      // Pad each control button.
-      margin: map.get($spacers, 1);
-
-      &:first-child {
-        // Don't pad the left side of the first control button.
-        margin-left: 0;
-      }
-
-      &:last-child {
-        // Don't pad the right side of the last control button.
-        margin-right: 0;
-      }
-    }
-  }
-}
-
 // Global Search
 nav.search {
   // Don't overtake dropdowns

netbox/templates/core/configrevision.html

@@ -10,23 +10,15 @@
 {% block breadcrumbs %}
 {% endblock %}
 
-{% block controls %}
+{% block control-buttons %}
-  <div class="controls">
+  {% if not object.pk or object.is_active and perms.core.add_configrevision %}
-    <div class="control-group">
+    {% url 'core:configrevision_add' as edit_url %}
-      {% plugin_buttons object %}
+    {% include "buttons/edit.html" with url=edit_url %}
-      {% if not object.pk or object.is_active and perms.core.add_configrevision %}
+  {% endif %}
-        {% url 'core:configrevision_add' as edit_url %}
+  {% if object.pk and not object.is_active and perms.core.delete_configrevision %}
-        {% include "buttons/edit.html" with url=edit_url %}
+    {% delete_button object %}
-      {% endif %}
+  {% endif %}
-      {% if object.pk and not object.is_active and perms.core.delete_configrevision %}
+{% endblock control-buttons %}
-        {% delete_button object %}
-      {% endif %}
-    </div>
-    <div class="control-group">
-      {% custom_links object %}
-    </div>
-  </div>
-{% endblock controls %}
 
 {% block subtitle %}
   {% if object.created %}

netbox/templates/core/configrevision_restore.html

@@ -13,15 +13,11 @@
   </div>
 {% endblock %}
 
-{% block controls %}
+{% block control-buttons %}
-  <div class="controls">
+  {% if request.user|can_delete:job %}
-    <div class="control-group">
+    {% delete_button job %}
-      {% if request.user|can_delete:job %}
+  {% endif %}
-        {% delete_button job %}
+{% endblock control-buttons %}
-      {% endif %}
-    </div>
-  </div>
-{% endblock controls %}
 
 {% block tabs %}
   <ul class="nav nav-tabs" role="tablist">
@@ -59,13 +55,9 @@
 
   <form method="post">
     {% csrf_token %}
-    <div class="submit-row" style="margin-top: 20px">
+    <div class="text-end my-3">
-      <div class="controls">
+      <a href="{% url 'core:configrevision_list' %}" id="cancel" name="cancel" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
-        <div class="control-group">
+      <button type="submit" name="restore" class="btn btn-primary">{% trans "Restore" %}</button>
-          <a href="{% url 'core:configrevision_list' %}" id="cancel" name="cancel" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
-          <button type="submit" name="restore" class="btn btn-primary">{% trans "Restore" %}</button>
-        </div>
-      </div>
     </div>
   </form>
 

netbox/templates/core/datafile.html

@@ -11,19 +11,11 @@
   <li class="breadcrumb-item"><a href="{% url 'core:datafile_list' %}?source_id={{ object.source.pk }}">{{ object.source }}</a></li>
 {% endblock %}
 
-{% block controls %}
+{% block control-buttons %}
-  <div class="controls">
+  {% if request.user|can_delete:object %}
-    <div class="control-group">
+    {% delete_button object %}
-      {% plugin_buttons object %}
+  {% endif %}
-    </div>
+{% endblock control-buttons %}
-    {% if request.user|can_delete:object %}
-      {% delete_button object %}
-    {% endif %}
-    <div class="control-group">
-      {% custom_links object %}
-    </div>
-  </div>
-{% endblock controls %}
 
 {% block content %}
   <div class="row mb-3">

netbox/templates/core/job.html

@@ -4,15 +4,11 @@
 {% load perms %}
 {% load i18n %}
 
-{% block controls %}
+{% block control-buttons %}
-  <div class="controls">
+  {% if request.user|can_delete:object %}
-    <div class="control-group">
+    {% delete_button object %}
-      {% if request.user|can_delete:object %}
+  {% endif %}
-        {% delete_button object %}
+{% endblock control-buttons %}
-      {% endif %}
-    </div>
-  </div>
-{% endblock controls %}
 
 {% block content %}
   <div class="row mb-3">

netbox/templates/dcim/rack_elevation_list.html

@@ -6,19 +6,19 @@
 {% block title %}{% trans "Rack Elevations" %}{% endblock %}
 
 {% block controls %}
-  <div class="controls">
+  <div class="col-auto d-print-none">
-    <div class="control-group">
+    <div class="btn-list">
       <a href="{% url 'dcim:rack_list' %}{% querystring request %}" class="btn btn-primary">
         <i class="mdi mdi-format-list-checkbox"></i> {% trans "View List" %}
       </a>
-      <div class="btn-group btn-group-sm" role="group">
+      <div class="btn-group" role="group">
         <select class="btn btn-outline-secondary rack-view">
           <option value="images-and-labels" selected="selected">{% trans "Images and Labels" %}</option>
           <option value="images-only">{% trans "Images only" %}</option>
           <option value="labels-only">{% trans "Labels only" %}</option>
         </select>
       </div>
-      <div class="btn-group btn-group-sm" role="group">
+      <div class="btn-group" role="group">
         <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='front' %}" class="btn btn-outline-secondary{% if rack_face == 'front' %} active{% endif %}">{% trans "Front" %}</a>
         <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='rear' %}" class="btn btn-outline-secondary{% if rack_face == 'rear' %} active{% endif %}">{% trans "Rear" %}</a>
       </div>

netbox/templates/extras/objectchange.html

@@ -18,7 +18,7 @@
 {% endblock %}
 
 {# ObjectChange does not support the default add/edit/delete controls #}
-{% block controls %}{% endblock %}
+{% block control-buttons %}{% endblock %}
 {% block subtitle %}{% endblock %}
 
 {% block content %}

netbox/templates/extras/report_list.html

@@ -15,12 +15,7 @@
 {% endblock tabs %}
 
 {% block controls %}
-  <div class="controls">
+  {% add_button model %}
-    <div class="control-group">
-      {% block extra_controls %}{% endblock %}
-      {% add_button model %}
-    </div>
-  </div>
 {% endblock controls %}
 
 {% block content %}

netbox/templates/extras/report_result.html

@@ -2,6 +2,12 @@
 {% load buttons %}
 {% load perms %}
 
+{% block controls %}
+  {% if request.user|can_delete:job %}
+    {% delete_button job %}
+  {% endif %}
+{% endblock controls %}
+
 {% block content %}
   <div class="row">
     <div class="col col-md-12"{% if not job.completed %} hx-get="{% url 'extras:report_result' job_pk=job.pk %}" hx-trigger="load delay:0.5s, every 5s"{% endif %}>
@@ -9,13 +15,3 @@
     </div>
   </div>
 {% endblock content %}
-
-{% block controls %}
-  <div class="controls">
-    <div class="control-group">
-      {% if request.user|can_delete:job %}
-        {% delete_button job %}
-      {% endif %}
-    </div>
-  </div>
-{% endblock controls %}

netbox/templates/extras/script_list.html

@@ -6,12 +6,7 @@
 {% block title %}{% trans "Scripts" %}{% endblock %}
 
 {% block controls %}
-  <div class="controls">
+  {% add_button model %}
-    <div class="control-group">
-      {% block extra_controls %}{% endblock %}
-      {% add_button model %}
-    </div>
-  </div>
 {% endblock controls %}
 
 {% block tabs %}

netbox/templates/extras/script_result.html

@@ -27,13 +27,9 @@
 {% endblock header %}
 
 {% block controls %}
-  <div class="controls">
+  {% if request.user|can_delete:job %}
-    <div class="control-group">
+    {% delete_button job %}
-      {% if request.user|can_delete:job %}
+  {% endif %}
-        {% delete_button job %}
-      {% endif %}
-    </div>
-  </div>
 {% endblock controls %}
 
 {% block tabs %}

netbox/templates/generic/_base.html

@@ -16,7 +16,11 @@
 
           {# Controls #}
           <div class="col-auto d-print-none">
-            {% block controls %}{% endblock controls %}
+            {% block controls %}
+              <div class="btn-list">
+                {% block control-buttons %}{% endblock %}
+              </div>
+            {% endblock controls %}
           </div>
 
         </div>

netbox/templates/generic/object.html

@@ -57,13 +57,16 @@ Context:
 {% endblock subtitle %}
 
 {% block controls %}
-  {# Clone/Edit/Delete Buttons #}
+  <div class="btn-list mb-2">
-  <div class="btn-list">
+    {% plugin_buttons object %}
-      {% plugin_buttons object %}
+
+    {# Add/edit/delete/etc. buttons #}
+    {% block control-buttons %}
 
       {# Extra buttons #}
       {% block extra_controls %}{% endblock %}
 
+      {# Default buttons #}
       {% if perms.extras.add_bookmark and object.bookmarks %}
         {% bookmark_button object %}
       {% endif %}
@@ -76,8 +79,16 @@ Context:
       {% if request.user|can_delete:object %}
         {% delete_button object %}
       {% endif %}
+    {% endblock control-buttons %}
+  </div>
 
-      {% custom_links object %}
+  {# Custom links #}
+  <div class="d-flex justify-content-end">
+    <div class="btn-list">
+      {% block custom-links %}
+        {% custom_links object %}
+      {% endblock custom-links %}
+    </div>
   </div>
 {% endblock controls %}