#6797: Improve controls & custom link styling

netbox/extras/choices.py

@@ -46,28 +46,40 @@ class CustomFieldFilterLogicChoices(ChoiceSet):
 class CustomLinkButtonClassChoices(ChoiceSet):
 
     CLASS_DEFAULT = 'outline-dark'
-    CLASS_PRIMARY = 'primary'
-    CLASS_SUCCESS = 'success'
-    CLASS_INFO = 'info'
-    CLASS_WARNING = 'warning'
-    CLASS_DANGER = 'danger'
-    CLASS_LINK = 'link'
+    CLASS_LINK = 'ghost-dark'
+    CLASS_BLUE = 'blue'
+    CLASS_INDIGO = 'indigo'
+    CLASS_PURPLE = 'purple'
+    CLASS_PINK = 'pink'
+    CLASS_RED = 'red'
+    CLASS_ORANGE = 'orange'
+    CLASS_YELLOW = 'yellow'
+    CLASS_GREEN = 'green'
+    CLASS_TEAL = 'teal'
+    CLASS_CYAN = 'cyan'
+    CLASS_GRAY = 'secondary'
 
     CHOICES = (
         (CLASS_DEFAULT, 'Default'),
-        (CLASS_PRIMARY, 'Primary (blue)'),
-        (CLASS_SUCCESS, 'Success (green)'),
-        (CLASS_INFO, 'Info (aqua)'),
-        (CLASS_WARNING, 'Warning (orange)'),
-        (CLASS_DANGER, 'Danger (red)'),
-        (CLASS_LINK, 'None (link)'),
+        (CLASS_LINK, 'Link'),
+        (CLASS_BLUE, 'Blue'),
+        (CLASS_INDIGO, 'Indigo'),
+        (CLASS_PURPLE, 'Purple'),
+        (CLASS_PINK, 'Pink'),
+        (CLASS_RED, 'Red'),
+        (CLASS_ORANGE, 'Orange'),
+        (CLASS_YELLOW, 'Yellow'),
+        (CLASS_GREEN, 'Green'),
+        (CLASS_TEAL, 'Teal'),
+        (CLASS_CYAN, 'Cyan'),
+        (CLASS_GRAY, 'Gray'),
     )
 
-
 #
 # ObjectChanges
 #
 
+
 class ObjectChangeActionChoices(ChoiceSet):
 
     ACTION_CREATE = 'create'

netbox/extras/templatetags/custom_links.py

@@ -10,10 +10,10 @@ from utilities.utils import render_jinja2
 
 register = template.Library()
 
-LINK_BUTTON = '<a href="{}"{} class="btn btn-sm btn-{} m-1">{}</a>\n'
+LINK_BUTTON = '<a href="{}"{} class="btn btn-sm btn-{}">{}</a>\n'
 
 GROUP_BUTTON = """
-<div class="dropdown m-1">
+<div class="dropdown">
     <button
         class="btn btn-sm btn-{} dropdown-toggle"
         type="button"

netbox/project-static/styles/netbox.scss

@@ -261,6 +261,33 @@ div.title-container {
   }
 }
 
+// Object list control buttons (Add/Clone/Import/Export)
+.controls {
+  margin-bottom: map.get($spacers, 2);
+
+  // Each group of buttons.
+  .control-group {
+    display: flex;
+    flex-wrap: wrap;
+    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/project-static/styles/theme-dark.scss

@@ -21,6 +21,14 @@ $theme-colors: (
   'danger': $danger,
   'light': $light,
   'dark': $dark,
+  'red': $red-300,
+  'yellow': $yellow-300,
+  'green': $green-300,
+  'blue': $blue-300,
+  'cyan': $cyan-300,
+  'indigo': $indigo-300,
+  'purple': $purple-300,
+  'pink': $pink-300,
 );
 
 $theme-colors: map-merge($theme-colors, $theme-color-addons);

netbox/project-static/styles/theme-light.scss

@@ -4,6 +4,20 @@
 
 $input-border-color: $gray-200;
 
+$theme-colors: map-merge(
+  $theme-colors,
+  (
+    'red': $red-500,
+    'yellow': $yellow-500,
+    'green': $green-500,
+    'blue': $blue-500,
+    'cyan': $cyan-500,
+    'indigo': $indigo-500,
+    'purple': $purple-500,
+    'pink': $pink-500,
+  )
+);
+
 $theme-colors: map-merge($theme-colors, $theme-color-addons);
 
 $light: $gray-200;

netbox/templates/circuits/inc/circuit_termination.html

@@ -9,7 +9,7 @@
                 </a>
             {% endif %}
             {% if termination and perms.circuits.change_circuittermination %}
-                <a href="{% url 'circuits:circuittermination_edit' pk=termination.pk %}" class="btn btn-sm btn-yellow-500 lh-1">
+                <a href="{% url 'circuits:circuittermination_edit' pk=termination.pk %}" class="btn btn-sm btn-yellow lh-1">
                     <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit
                 </a>
                 <a href="{% url 'circuits:circuit_terminations_swap' pk=object.pk %}" class="btn btn-sm btn-primary lh-1">

netbox/templates/dcim/device/base.html

@@ -14,209 +14,183 @@
 {% endblock %}
 
 {% block extra_controls %}
-{% if perms.dcim.change_device %}
-<div class="dropdown m-1">
+    {% if perms.dcim.change_device %}
+        <div class="dropdown">
             <button id="add-device-components" type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                 <i class="mdi mdi-plus-thick" aria-hidden="true"></i> Add Components
             </button>
             <ul class="dropdown-menu" aria-labeled-by="add-device-components">
                 {% if perms.dcim.add_consoleport %}
                     <li>
-            <a
-                class="dropdown-item"
-                href="{% url 'dcim:consoleport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleports' pk=object.pk %}"
-            >
+                        <a class="dropdown-item" href="{% url 'dcim:consoleport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleports' pk=object.pk %}">
                             Console Ports
                         </a>
                     </li>
                 {% endif %}
                 {% if perms.dcim.add_consoleserverport %}
                     <li>
-            <a
-                class="dropdown-item"
-                href="{% url 'dcim:consoleserverport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}">
+                        <a class="dropdown-item" href="{% url 'dcim:consoleserverport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}">
                             Console Server Ports
                         </a>
                     </li>
                 {% endif %}
                 {% if perms.dcim.add_powerport %}
                     <li>
-            <a
-                class="dropdown-item"
-                href="{% url 'dcim:powerport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_powerports' pk=object.pk %}">
+                        <a class="dropdown-item" href="{% url 'dcim:powerport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_powerports' pk=object.pk %}">
                             Power Ports
                         </a>
                     </li>
                 {% endif %}
                 {% if perms.dcim.add_poweroutlet %}
                     <li>
-            <a
-                class="dropdown-item"
-                href="{% url 'dcim:poweroutlet_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}">
+                        <a class="dropdown-item" href="{% url 'dcim:poweroutlet_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}">
                             Power Outlets
                         </a>
                     </li>
                 {% endif %}
                 {% if perms.dcim.add_interface %}
                     <li>
-            <a
-                class="dropdown-item"
-                href="{% url 'dcim:interface_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_interfaces' pk=object.pk %}">
+                        <a class="dropdown-item" href="{% url 'dcim:interface_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_interfaces' pk=object.pk %}">
                             Interfaces
                         </a>
                     </li>
                 {% endif %}
                 {% if perms.dcim.add_frontport %}
                     <li>
-            <a
-                class="dropdown-item"
-                href="{% url 'dcim:frontport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_frontports' pk=object.pk %}">
+                        <a class="dropdown-item" href="{% url 'dcim:frontport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_frontports' pk=object.pk %}">
                             Front Ports
                         </a>
                     </li>
                 {% endif %}
                 {% if perms.dcim.add_rearport %}
                     <li>
-            <a
-                class="dropdown-item"
-                href="{% url 'dcim:rearport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_rearports' pk=object.pk %}">
+                        <a class="dropdown-item" href="{% url 'dcim:rearport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_rearports' pk=object.pk %}">
                             Rear Ports
                         </a>
                     </li>
                 {% endif %}
                 {% if perms.dcim.add_devicebay %}
                     <li>
-            <a
-                class="dropdown-item"
-                href="{% url 'dcim:devicebay_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_devicebays' pk=object.pk %}">
+                        <a class="dropdown-item" href="{% url 'dcim:devicebay_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_devicebays' pk=object.pk %}">
                             Device Bays
                         </a>
                     </li>
                 {% endif %}
                 {% if perms.dcim.add_inventoryitem %}
                     <li>
-            <a
-                class="dropdown-item"
-                href="{% url 'dcim:inventoryitem_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_inventory' pk=object.pk %}">
+                        <a class="dropdown-item" href="{% url 'dcim:inventoryitem_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_inventory' pk=object.pk %}">
                             Inventory Items
                         </a>
                     </li>
                 {% endif %}
             </ul>
-</div>
-{% endif %}
+        </div>
+    {% endif %}
 {% endblock %}
 
 {% block tab_items %}
-<li 
-    role="presentation"
-    class="nav-item">
-    <a
-        href="{% url 'dcim:device' pk=object.pk %}"
-        class="nav-link{% if active_tab == 'device' %} active{% endif %}"
-    >
+    <li role="presentation" class="nav-item">
+        <a href="{% url 'dcim:device' pk=object.pk %}" class="nav-link{% if active_tab == 'device' %} active{% endif %}">
             Device
         </a>
-</li>
-{% with interface_count=object.interfaces_count %}
-{% if interface_count %}
-<li role="presentation" class="nav-item">
+    </li>
+
+    {% with interface_count=object.interfaces_count %}
+        {% if interface_count %}
+            <li role="presentation" class="nav-item">
                 <a class="nav-link {% if active_tab == 'interfaces' %} active{% endif %}" href="{% url 'dcim:device_interfaces' pk=object.pk %}">Interfaces {% badge interface_count %}</a>
-</li>
-{% endif %}
-{% endwith %}
+            </li>
+        {% endif %}
+    {% endwith %}
 
-{% with frontport_count=object.frontports.count %}
-{% if frontport_count %}
-<li role="presentation" class="nav-item">
+    {% with frontport_count=object.frontports.count %}
+        {% if frontport_count %}
+            <li role="presentation" class="nav-item">
                 <a class="nav-link {% if active_tab == 'front-ports' %} active{% endif %}" href="{% url 'dcim:device_frontports' pk=object.pk %}">Front Ports {% badge frontport_count %}</a>
-</li>
-{% endif %}
-{% endwith %}
+            </li>
+        {% endif %}
+    {% endwith %}
 
-{% with rearport_count=object.rearports.count %}
-{% if rearport_count %}
-<li role="presentation" class="nav-item">
+    {% with rearport_count=object.rearports.count %}
+        {% if rearport_count %}
+            <li role="presentation" class="nav-item">
                 <a class="nav-link {% if active_tab == 'rear-ports' %} active{% endif %}" href="{% url 'dcim:device_rearports' pk=object.pk %}">Rear Ports {% badge rearport_count %}</a>
-</li>
-{% endif %}
-{% endwith %}
+            </li>
+        {% endif %}
+    {% endwith %}
 
-{% with consoleport_count=object.consoleports.count %}
-{% if consoleport_count %}
-<li role="presentation" class="nav-item">
+    {% with consoleport_count=object.consoleports.count %}
+        {% if consoleport_count %}
+            <li role="presentation" class="nav-item">
                 <a class="nav-link {% if active_tab == 'console-ports' %} active{% endif %}" href="{% url 'dcim:device_consoleports' pk=object.pk %}">Console Ports {% badge consoleport_count %}</a>
-</li>
-{% endif %}
-{% endwith %}
+            </li>
+        {% endif %}
+    {% endwith %}
 
-{% with consoleserverport_count=object.consoleserverports.count %}
-{% if consoleserverport_count %}
+    {% with consoleserverport_count=object.consoleserverports.count %}
+        {% if consoleserverport_count %}
             <li role="presentation" class="nav-item">
                 <a class="nav-link {% if active_tab == 'console-server-ports' %} active{% endif %}" href="{% url 'dcim:device_consoleserverports' pk=object.pk %}">Console Server Ports {% badge consoleserverport_count %}</a>
             </li>
-{% endif %}
-{% endwith %}
+        {% endif %}
+    {% endwith %}
 
-{% with powerport_count=object.powerports.count %}
-{% if powerport_count %}
-<li role="presentation" class="nav-item">
+    {% with powerport_count=object.powerports.count %}
+        {% if powerport_count %}
+            <li role="presentation" class="nav-item">
                 <a class="nav-link {% if active_tab == 'power-ports' %} active{% endif %}" href="{% url 'dcim:device_powerports' pk=object.pk %}">Power Ports {% badge powerport_count %}</a>
-</li>
-{% endif %}
-{% endwith %}
+            </li>
+        {% endif %}
+    {% endwith %}
 
-{% with poweroutlet_count=object.poweroutlets.count %}
-{% if poweroutlet_count %}
-<li role="presentation" class="nav-item">
+    {% with poweroutlet_count=object.poweroutlets.count %}
+        {% if poweroutlet_count %}
+            <li role="presentation" class="nav-item">
                 <a class="nav-link {% if active_tab == 'power-outlets' %} active{% endif %}" href="{% url 'dcim:device_poweroutlets' pk=object.pk %}">Power Outlets {% badge poweroutlet_count %}</a>
-</li>
-{% endif %}
-{% endwith %}
+            </li>
+        {% endif %}
+    {% endwith %}
 
-{% with devicebay_count=object.devicebays.count %}
-{% if devicebay_count %}
-<li role="presentation" class="nav-item">
+    {% with devicebay_count=object.devicebays.count %}
+        {% if devicebay_count %}
+            <li role="presentation" class="nav-item">
                 <a class="nav-link {% if active_tab == 'device-bays' %} active{% endif %}" href="{% url 'dcim:device_devicebays' pk=object.pk %}">Device Bays {% badge devicebay_count %}</a>
-</li>
-{% endif %}
-{% endwith %}
+            </li>
+        {% endif %}
+    {% endwith %}
 
-{% with inventoryitem_count=object.inventoryitems.count %}
-{% if inventoryitem_count %}
-<li role="presentation" class="nav-item">
+    {% with inventoryitem_count=object.inventoryitems.count %}
+        {% if inventoryitem_count %}
+            <li role="presentation" class="nav-item">
                 <a class="nav-link {% if active_tab == 'inventory' %} active{% endif %}" href="{% url 'dcim:device_inventory' pk=object.pk %}">Inventory {% badge inventoryitem_count %}</a>
-</li>
-{% endif %}
-{% endwith %}
-{% if perms.dcim.napalm_read_device and object.status == 'active' and object.primary_ip and object.platform.napalm_driver %}
-{# NAPALM-enabled tabs #}
-<li role="presentation" class="nav-item">
+            </li>
+        {% endif %}
+    {% endwith %}
+
+    {% if perms.dcim.napalm_read_device and object.status == 'active' and object.primary_ip and object.platform.napalm_driver %}
+        {# NAPALM-enabled tabs #}
+        <li role="presentation" class="nav-item">
             <a class="nav-link{% if active_tab == 'status' %} active{% endif %}" href="{% url 'dcim:device_status' pk=object.pk %}">
                 Status
             </a>
-</li>
-<li role="presentation" class="nav-item">
+        </li>
+        <li role="presentation" class="nav-item">
             <a class="nav-link{% if active_tab == 'lldp-neighbors' %} active{% endif %}" href="{% url 'dcim:device_lldp_neighbors' pk=object.pk %}">
                 LLDP Neighbors
             </a>
-</li>
-<li role="presentation" class="nav-item">
+        </li>
+        <li role="presentation" class="nav-item">
             <a class="nav-link{% if active_tab == 'config' %} active{% endif %}" href="{% url 'dcim:device_config' pk=object.pk %}">
                 Configuration
             </a>
-</li>
-{% endif %}
-{% if perms.extras.view_configcontext %}
-    <li 
-        role="presentation"
-        class="nav-item">
-        <a
-            href="{% url 'dcim:device_configcontext' pk=object.pk %}"
-            class="nav-link{% if active_tab == 'config-context' %} active{% endif %}"
-        >
+        </li>
+    {% endif %}
+    
+    {% if perms.extras.view_configcontext %}
+        <li role="presentation" class="nav-item">
+            <a href="{% url 'dcim:device_configcontext' pk=object.pk %}" class="nav-link{% if active_tab == 'config-context' %} active{% endif %}">
                 Config Context
             </a>
         </li>
-{% endif %}
+    {% endif %}
 {% endblock %}

netbox/templates/dcim/devicetype.html

@@ -12,7 +12,7 @@
 
 {% block extra_controls %}
   {% if perms.dcim.change_devicetype %}
-    <div class="dropdown m-1">
+    <div class="dropdown">
       <button type="button" class="btn btn-primary btn-sm dropdown-toggle"data-bs-toggle="dropdown" aria-expanded="false">
         <i class="mdi mdi-plus-thick" aria-hidden="true"></i> Add Components
       </button>

netbox/templates/dcim/interface.html

@@ -5,7 +5,7 @@
 
 {% block extra_controls %}
   {% if perms.dcim.add_interface and not object.is_virtual %}
-    <a href="{% url 'dcim:interface_add' %}?device={{ object.device.pk }}&parent={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-success m-1">
+    <a href="{% url 'dcim:interface_add' %}?device={{ object.device.pk }}&parent={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-success">
       <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Child Interface
     </a>
   {% endif %}

netbox/templates/dcim/rack.html

@@ -18,14 +18,14 @@
 {% endblock %}
 
 {% block extra_controls %}
-  <button class="btn btn-sm btn-outline-blue-500 m-1 toggle-images" selected="selected">
+  <button class="btn btn-sm btn-outline-primary toggle-images" selected="selected">
     <i class="mdi mdi-file-image-outline"></i> 
     Hide Images
   </button>
-  <a {% if prev_rack %}href="{% url 'dcim:rack' pk=prev_rack.pk %}{% endif %}" class="btn btn-sm btn-primary m-1{% if not prev_rack %} disabled{% endif %}">
+  <a {% if prev_rack %}href="{% url 'dcim:rack' pk=prev_rack.pk %}{% endif %}" class="btn btn-sm btn-primary{% if not prev_rack %} disabled{% endif %}">
     <i class="mdi mdi-chevron-left" aria-hidden="true"></i> Previous
   </a>
-  <a {% if next_rack %}href="{% url 'dcim:rack' pk=next_rack.pk %}{% endif %}" class="btn btn-sm btn-primary m-1{% if not next_rack %} disabled{% endif %}">
+  <a {% if next_rack %}href="{% url 'dcim:rack' pk=next_rack.pk %}{% endif %}" class="btn btn-sm btn-primary{% if not next_rack %} disabled{% endif %}">
     <i class="mdi mdi-chevron-right" aria-hidden="true"></i> Next
   </a>
 {% endblock %}

netbox/templates/dcim/rack_elevation_list.html

@@ -5,16 +5,16 @@
 {% block title %}Rack Elevations{% endblock %}
 
 {% block controls %}
-    <div class="container mb-2 mx-0">
-        <div class="d-flex flex-wrap justify-content-end">
-            <button class="btn btn-sm btn-outline-dark toggle-images m-1" selected="selected">
+    <div class="controls">
+        <div class="control-group">
+            <button class="btn btn-sm btn-outline-dark toggle-images" selected="selected">
                 <span class="mdi mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Images
             </button>
-            <div class="btn-group btn-group-sm m-1" role="group">
+            <div class="btn-group btn-group-sm" role="group">
                 <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='front' %}" class="btn btn-outline-secondary{% if rack_face == 'front' %} active{% endif %}">Front</a>
                 <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='rear' %}" class="btn btn-outline-secondary{% if rack_face == 'rear' %} active{% endif %}">Rear</a>
             </div>
-            <div class="btn-group btn-group-sm m-1" role="group">
+            <div class="btn-group btn-group-sm" role="group">
                 <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request reverse=None %}" class="btn btn-outline-secondary{% if not reverse %} active{% endif %}">Normal</a>
                 <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request reverse='true' %}" class="btn btn-outline-secondary{% if reverse %} active{% endif %}">Reversed</a>
             </div>

netbox/templates/generic/object.html

@@ -29,8 +29,8 @@
 
 {% block controls %}
   {# Clone/Edit/Delete Buttons #}
-  <div class="controls pb-2 mx-0">
-    <div class="d-flex flex-wrap justify-content-end mb-2">
+  <div class="controls">
+    <div class="control-group">
       {% custom_links object %}
       {% plugin_buttons object %}
 

netbox/templates/generic/object_edit.html

@@ -8,11 +8,13 @@
 
 {% block controls %}
   {% if settings.DOCS_ROOT %}
-    <div class="controls pt-1">
+    <div class="controls">
+      <div class="control-group">
         <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#docs_modal" title="Help">
           <i class="mdi mdi-help-circle"></i> Help
         </button>
       </div>
+    </div>
   {% endif %}
 {% endblock controls %}
 

netbox/templates/generic/object_list.html

@@ -7,8 +7,8 @@
 {% block title %}{{ content_type.model_class|meta:"verbose_name_plural"|bettertitle }}{% endblock %}
 
 {% block controls %}
-<div class="controls mb-2 mx-0">
-  <div class="d-flex flex-wrap justify-content-end">
+<div class="controls">
+  <div class="control-group">
     {% block extra_controls %}{% endblock %}
     {% if permissions.add and 'add' in action_buttons %}
         {% add_button content_type.model_class|validated_viewname:"add" %}

netbox/templates/ipam/inc/toggle_available.html

@@ -1,10 +1,11 @@
 {% load helpers %}
+
 {% if show_available is not None %}
-  <div class="btn-group m-1" role="group">
-    <a href="{{ request.path }}{% querystring request show_available='true' %}" class="btn btn-sm btn-outline-blue-500{% if show_available %} active disabled{% endif %}">
+  <div class="btn-group" role="group">
+    <a href="{{ request.path }}{% querystring request show_available='true' %}" class="btn btn-sm btn-outline-primary{% if show_available %} active disabled{% endif %}">
       <i class="mdi mdi-eye"></i> Show Available
     </a>
-    <a href="{{ request.path }}{% querystring request show_available='false' %}" class="btn btn-sm btn-outline-blue-500{% if not show_available %} active disabled{% endif %}">
+    <a href="{{ request.path }}{% querystring request show_available='false' %}" class="btn btn-sm btn-outline-primary{% if not show_available %} active disabled{% endif %}">
       <i class="mdi mdi-eye-off"></i> Hide Available
     </a>
   </div>

netbox/templates/ipam/iprange/ip_addresses.html

@@ -2,7 +2,7 @@
 
 {% block extra_controls %}
   {% if perms.ipam.add_ipaddress and active_tab == 'ip-addresses' and object.first_available_ip %}
-    <a href="{% url 'ipam:ipaddress_add' %}?address={{ object.first_available_ip }}&vrf={{ object.vrf.pk }}&tenant_group={{ object.tenant.group.pk }}&tenant={{ object.tenant.pk }}" class="btn btn-sm btn-primary m-1">
+    <a href="{% url 'ipam:ipaddress_add' %}?address={{ object.first_available_ip }}&vrf={{ object.vrf.pk }}&tenant_group={{ object.tenant.group.pk }}&tenant={{ object.tenant.pk }}" class="btn btn-sm btn-primary">
         <i class="mdi mdi-plus-thick" aria-hidden="true"></i> Add IP Address
     </a>
   {% endif %}

netbox/templates/ipam/prefix/ip_addresses.html

@@ -2,7 +2,7 @@
 
 {% block extra_controls %}
   {% if perms.ipam.add_ipaddress and active_tab == 'ip-addresses' and first_available_ip %}
-    <a href="{% url 'ipam:ipaddress_add' %}?address={{ first_available_ip }}&vrf={{ object.vrf.pk }}&tenant_group={{ object.tenant.group.pk }}&tenant={{ object.tenant.pk }}" class="btn btn-sm btn-primary m-1">
+    <a href="{% url 'ipam:ipaddress_add' %}?address={{ first_available_ip }}&vrf={{ object.vrf.pk }}&tenant_group={{ object.tenant.group.pk }}&tenant={{ object.tenant.pk }}" class="btn btn-sm btn-primary">
         <i class="mdi mdi-plus-thick" aria-hidden="true"></i> Add IP Address
     </a>
   {% endif %}

netbox/templates/ipam/prefix_list.html

@@ -2,7 +2,7 @@
 {% load helpers %}
 
 {% block extra_controls %}
-    <div class="dropdown m-1">
+    <div class="dropdown">
         <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="max_depth" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
             Max Depth{% if "depth__lte" in request.GET %}: {{ request.GET.depth__lte }}{% endif %}
         </button>
@@ -19,7 +19,7 @@
             {% endfor %}
         </ul>
     </div>
-    <div class="dropdown m-1">
+    <div class="dropdown">
         <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="max_length" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
             Max Length{% if "mask_length__lte" in request.GET %}: {{ request.GET.mask_length__lte }}{% endif %}
         </button>

netbox/templates/virtualization/cluster/base.html

@@ -13,35 +13,36 @@
 
 {% block extra_controls %}
   {% if perms.virtualization.change_cluster and perms.virtualization.add_virtualmachine %}
-    <a href="{% url 'virtualization:virtualmachine_add' %}?cluster_id={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-primary m-1">
+    <a href="{% url 'virtualization:virtualmachine_add' %}?cluster_id={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-primary">
       <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Virtual Machine
     </a>
   {% endif %}
+
   {% if perms.virtualization.change_cluster %}
-    <a href="{% url 'virtualization:cluster_add_devices' pk=object.pk %}?site_id={{ object.site.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-primary btn-sm m-1">
+    <a href="{% url 'virtualization:cluster_add_devices' pk=object.pk %}?site_id={{ object.site.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-primary btn-sm">
       <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Assign Device
     </a>
   {% endif %}
 {% endblock %}
 
 {% block tab_items %}
-<li role="presentation" class="nav-item">
+  <li role="presentation" class="nav-item">
     <a href="{{ object.get_absolute_url }}" class="nav-link{% if not active_tab %} active{% endif %}">Cluster</a>
-</li>
+  </li>
 
-{% with virtualmachine_count=object.virtual_machines.count %}
-<li role="presentation" class="nav-item">
+  {% with virtualmachine_count=object.virtual_machines.count %}
+    <li role="presentation" class="nav-item">
       <a href="{% url 'virtualization:cluster_virtualmachines' pk=object.pk %}" class="nav-link{% if active_tab == 'virtual-machines' %} active{% endif %}">
         Virtual Machines {% badge virtualmachine_count %}
       </a>
-</li>
-{% endwith %}
+    </li>
+  {% endwith %}
 
-{% with device_count=object.devices.count %}
-<li role="presentation" class="nav-item">
+  {% with device_count=object.devices.count %}
+    <li role="presentation" class="nav-item">
       <a href="{% url 'virtualization:cluster_devices' pk=object.pk %}" class="nav-link{% if active_tab == 'devices' %} active{% endif %}">
         Devices {% badge device_count %}
       </a>
-</li>
-{% endwith %}
+    </li>
+  {% endwith %}
 {% endblock %}

netbox/templates/virtualization/virtualmachine/base.html

@@ -10,8 +10,8 @@
 
 {% block extra_controls %}
   {% if perms.virtualization.add_vminterface %}
-    <a href="{% url 'virtualization:vminterface_add' %}?virtual_machine={{ object.pk }}&return_url={% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}" class="btn btn-sm btn-primary m-1">
-      <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Interfaces
+    <a href="{% url 'virtualization:vminterface_add' %}?virtual_machine={{ object.pk }}&return_url={% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}" class="btn btn-sm btn-primary">
+      <i class="mdi mdi-plus-thick"></i> Add Interfaces
     </a>
   {% endif %}
 {% endblock %}

netbox/utilities/templates/buttons/add.html

@@ -1,6 +1,9 @@
-<div class="d-flex flex-shrink-1 m-1">
+{% comment %} <div class="d-flex flex-shrink-1">
   <a href="{{ add_url }}" type="button" class="btn btn-sm btn-success">
     <i class="mdi mdi-plus-thick"></i>
     &nbsp;Add
   </a>
-</div>
+</div> {% endcomment %}
+<a href="{{ add_url }}" type="button" class="btn btn-sm btn-success">
+  <i class="mdi mdi-plus-thick"></i> Add
+</a>

netbox/utilities/templates/buttons/clone.html

@@ -1,3 +1,3 @@
-<a href="{{ url }}" class="btn btn-sm btn-success m-1" role="button">
+<a href="{{ url }}" class="btn btn-sm btn-success" role="button">
     <i class="mdi mdi-content-copy" aria-hidden="true"></i>&nbsp;Clone
 </a>

netbox/utilities/templates/buttons/delete.html

@@ -1,3 +1,3 @@
-<a href="{{ url }}" class="btn btn-sm btn-danger m-1" role="button">
+<a href="{{ url }}" class="btn btn-sm btn-danger" role="button">
     <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>&nbsp;Delete
 </a>

netbox/utilities/templates/buttons/edit.html

@@ -1,3 +1,3 @@
-<a href="{{ url }}" class="btn btn-sm btn-warning m-1" role="button">
+<a href="{{ url }}" class="btn btn-sm btn-warning" role="button">
     <span class="mdi mdi-pencil" aria-hidden="true"></span>&nbsp;Edit
 </a>

netbox/utilities/templates/buttons/export.html

@@ -1,5 +1,5 @@
-<div class="dropdown m-1">
-    <button type="button" class="btn btn-sm btn-purple-500 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<div class="dropdown">
+    <button type="button" class="btn btn-sm btn-purple dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <i class="mdi mdi-download"></i>&nbsp;Export
     </button>
     <ul class="dropdown-menu dropdown-menu-end">

netbox/utilities/templates/buttons/import.html

@@ -1,3 +1,3 @@
-<a href="{% url import_url %}" type="button" class="btn btn-sm btn-info m-1">
+<a href="{% url import_url %}" type="button" class="btn btn-sm btn-info">
   <i class="mdi mdi-upload"></i>&nbsp;Import
 </a>