Widened page layout; improved mobile rendering

netbox/project-static/css/base.css

@@ -13,7 +13,7 @@ body {
 }
 .container {
     width: auto;
-    max-width: 1340px;
+    max-width: 1600px;
 }
 .wrapper {
     min-height: 100%;
@@ -35,7 +35,8 @@ footer p {
     margin: 20px 0;
 }
 
-@media (max-width: 1200px) {
+/* Collapse the nav menu on displays less than 1200px wide */
+@media (max-width: 1199px) {
     .navbar-header {
         float: none;
     }
@@ -58,7 +59,7 @@ footer p {
         max-height: none;
     }
     .navbar-nav {
-        float: none!important;
+        float: none !important;
         margin-top: 7.5px;
     }
     .navbar-nav>li {
@@ -90,8 +91,12 @@ tfoot td {
 }
 
 /* Paginator */
+div.paginator {
+    margin-bottom: 20px;
+}
 nav ul.pagination {
     margin-top: 0;
+    margin-bottom: 8px !important;
 }
 
 /* Racks */

netbox/templates/circuits/circuit.html

@@ -5,14 +5,14 @@
 
 {% block content %}
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
         <ol class="breadcrumb">
             <li><a href="{% url 'circuits:circuit_list' %}">Circuits</a></li>
             <li><a href="{% url 'circuits:circuit_list' %}?provider={{ circuit.provider.slug }}">{{ circuit.provider }}</a></li>
             <li>{{ circuit.cid }}</li>
         </ol>
     </div>
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
         <form action="{% url 'circuits:circuit_list' %}" method="get">
             <div class="input-group">
                 <input type="text" name="q" class="form-control" />
@@ -40,6 +40,7 @@
     {% endif %}
 </div>
 <h1>{{ circuit.provider }} - {{ circuit.cid }}</h1>
+{% include 'inc/created_updated.html' with obj=circuit %}
 <div class="row">
 	<div class="col-md-6">
         <div class="panel panel-default">
@@ -107,7 +108,6 @@
         {% with circuit.get_custom_fields as custom_fields %}
             {% include 'inc/custom_fields_panel.html' %}
         {% endwith %}
-        {% include 'inc/created_updated.html' with obj=circuit %}
 	</div>
 	<div class="col-md-6">
         <div class="panel panel-default">

netbox/templates/circuits/provider.html

@@ -6,13 +6,13 @@
 
 {% block content %}
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
         <ol class="breadcrumb">
             <li><a href="{% url 'circuits:provider_list' %}">Providers</a></li>
             <li>{{ provider }}</li>
         </ol>
     </div>
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
         <form action="{% url 'circuits:provider_list' %}" method="get">
             <div class="input-group">
                 <input type="text" name="q" class="form-control" />
@@ -46,6 +46,7 @@
     {% endif %}
 </div>
 <h1>{{ provider }}</h1>
+{% include 'inc/created_updated.html' with obj=provider %}
 <div class="row">
 	<div class="col-md-6">
         <div class="panel panel-default">
@@ -120,7 +121,6 @@
                 {% endif %}
             </div>
         </div>
-        {% include 'inc/created_updated.html' with obj=provider %}
 	</div>
 	<div class="col-md-6">
         <div class="panel panel-default">

netbox/templates/dcim/device.html

@@ -8,7 +8,7 @@
 {% block content %}
 {% include 'dcim/inc/_device_header.html' with active_tab='info' %}
 <div class="row">
-	<div class="col-md-6">
+	<div class="col-md-5 col-lg-6">
         <div class="panel panel-default">
             <div class="panel-heading">
                 <strong>Device</strong>
@@ -301,9 +301,8 @@
                 <div class="panel-body text-muted">None found</div>
             {% endif %}
         </div>
-        {% include 'inc/created_updated.html' with obj=device %}
 	</div>
-	<div class="col-md-6">
+	<div class="col-md-7 col-lg-6">
         {% if device_bays or device.device_type.is_parent_device %}
             {% if perms.dcim.delete_devicebay %}
                 <form method="post" action="{% url 'dcim:devicebay_bulk_delete' pk=device.pk %}">

netbox/templates/dcim/inc/_device_header.html

@@ -1,5 +1,5 @@
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
     {% if device.rack %}
         <ol class="breadcrumb">
             <li><a href="{% url 'dcim:site' slug=device.rack.site.slug %}">{{ device.rack.site }}</a></li>
@@ -13,7 +13,7 @@
         </ol>
     {% endif %}
     </div>
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
         <form action="{% url 'dcim:device_list' %}" method="get">
             <div class="input-group">
                 <input type="text" name="q" class="form-control" placeholder="Search devices" />
@@ -41,6 +41,7 @@
 {% endif %}
 </div>
 <h1>{{ device }}</h1>
+{% include 'inc/created_updated.html' with obj=device %}
 <ul class="nav nav-tabs" style="margin-bottom: 20px">
     <li role="presentation"{% if active_tab == 'info' %} class="active"{% endif %}><a href="{% url 'dcim:device' pk=device.pk %}">Info</a></li>
     <li role="presentation"{% if active_tab == 'inventory' %} class="active"{% endif %}><a href="{% url 'dcim:device_inventory' pk=device.pk %}">Inventory</a></li>

netbox/templates/dcim/rack.html

@@ -6,14 +6,14 @@
 
 {% block content %}
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
         <ol class="breadcrumb">
             <li><a href="{% url 'dcim:rack_list' %}">Racks</a></li>
             <li><a href="{% url 'dcim:rack_list' %}?site={{ rack.site.slug }}">{{ rack.site }}</a></li>
             <li>{{ rack }}</li>
         </ol>
     </div>
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
         <form action="{% url 'dcim:rack_list' %}" method="get">
             <div class="input-group">
                 <input type="text" name="q" class="form-control" placeholder="Search racks" />
@@ -53,6 +53,7 @@
     {% endif %}
 </div>
 <h1>Rack {{ rack.name }}</h1>
+{% include 'inc/created_updated.html' with obj=rack %}
 <div class="row">
 	<div class="col-md-6">
         <div class="panel panel-default">
@@ -188,7 +189,6 @@
                 {% endif %}
             </div>
         </div>
-        {% include 'inc/created_updated.html' with obj=rack %}
 	</div>
     <div class="row col-md-6">
        <div class="col-md-6 col-sm-6 col-xs-12">

netbox/templates/dcim/site.html

@@ -7,13 +7,13 @@
 
 {% block content %}
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
         <ol class="breadcrumb">
             <li><a href="{% url 'dcim:site_list' %}">Sites</a></li>
             <li>{{ site }}</li>
         </ol>
     </div>
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
         <form action="{% url 'dcim:site_list' %}" method="get">
             <div class="input-group">
                 <input type="text" name="q" class="form-control" placeholder="Search sites" />
@@ -47,6 +47,7 @@
     {% endif %}
 </div>
 <h1>{{ site.name }}</h1>
+{% include 'inc/created_updated.html' with obj=site %}
 <div class="row">
 	<div class="col-md-7">
         <div class="panel panel-default">
@@ -126,7 +127,6 @@
                 {% endif %}
             </div>
         </div>
-        {% include 'inc/created_updated.html' with obj=site %}
     </div>
     <div class="col-md-5">
         <div class="panel panel-default">

netbox/templates/home.html

@@ -3,7 +3,7 @@
 
 {% block content %}
 <div class="row home-search" style="padding: 15px 0px 20px">
-	<div class="col-md-3">
+	<div class="col-sm-6 col-md-3">
 		<form action="{% url 'dcim:device_list' %}" method="get">
 			<div class="input-group">
 				<input type="text" name="q" placeholder="Search devices" class="form-control" />
@@ -17,7 +17,7 @@
 		</form>
 		<p></p>
 	</div>
-	<div class="col-md-3">
+	<div class="col-sm-6 col-md-3">
 		<form action="{% url 'ipam:prefix_list' %}" method="get">
 			<div class="input-group">
 				<input type="text" name="q" placeholder="Search prefixes" class="form-control" />
@@ -31,7 +31,7 @@
 		</form>
 		<p></p>
 	</div>
-	<div class="col-md-3">
+	<div class="col-sm-6 col-md-3">
 		<form action="{% url 'ipam:ipaddress_list' %}" method="get">
 			<div class="input-group">
 				<input type="text" name="q" placeholder="Search IPs" class="form-control" />
@@ -45,7 +45,7 @@
 		</form>
 		<p></p>
 	</div>
-	<div class="col-md-3">
+	<div class="col-sm-6 col-md-3">
 		<form action="{% url 'circuits:circuit_list' %}" method="get">
 			<div class="input-group">
 				<input type="text" name="q" placeholder="Search circuits" class="form-control" />
@@ -61,7 +61,7 @@
 	</div>
 </div>
 <div class="row">
-    <div class="col-md-4">
+    <div class="col-sm-6 col-md-4">
         <div class="panel panel-default">
             <div class="panel-heading">
                 <strong>Organization</strong>
@@ -106,7 +106,7 @@
             </div>
         </div>
     </div>
-    <div class="col-md-4">
+    <div class="col-sm-6 col-md-4">
         <div class="panel panel-default">
             <div class="panel-heading">
                 <strong>IPAM</strong>
@@ -157,7 +157,7 @@
             </div>
         </div>
     </div>
-    <div class="col-md-4">
+    <div class="col-sm-6 col-md-4">
         {% if perms.secrets %}
             <div class="panel panel-default">
                 <div class="panel-heading">

netbox/templates/ipam/aggregate.html

@@ -5,14 +5,14 @@
 
 {% block content %}
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
         <ol class="breadcrumb">
             <li><a href="{% url 'ipam:aggregate_list' %}">Aggregates</a></li>
             <li><a href="{% url 'ipam:aggregate_list' %}?rir={{ aggregate.rir.slug }}">{{ aggregate.rir }}</a></li>
             <li>{{ aggregate }}</li>
         </ol>
     </div>
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
         <form action="{% url 'ipam:aggregate_list' %}" method="get">
             <div class="input-group">
                 <input type="text" name="q" class="form-control" placeholder="Search aggregates" />
@@ -40,6 +40,7 @@
     {% endif %}
 </div>
 <h1>{{ aggregate }}</h1>
+{% include 'inc/created_updated.html' with obj=aggregate %}
 <div class="row">
 	<div class="col-md-6">
         <div class="panel panel-default">
@@ -79,7 +80,6 @@
                 </tr>
             </table>
         </div>
-        {% include 'inc/created_updated.html' with obj=aggregate %}
     </div>
     <div class="col-md-6">
         {% with aggregate.get_custom_fields as custom_fields %}

netbox/templates/ipam/inc/prefix_header.html

@@ -1,5 +1,5 @@
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
         <ol class="breadcrumb">
             <li><a href="{% url 'ipam:prefix_list' %}">Prefixes</a></li>
             {% if prefix.vrf %}
@@ -8,7 +8,7 @@
             <li>{{ prefix }}</li>
         </ol>
     </div>
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
         <form action="{% url 'ipam:prefix_list' %}" method="get">
             <div class="input-group">
                 <input type="text" name="q" class="form-control" placeholder="Search prefixes" />
@@ -42,6 +42,7 @@
     {% endif %}
 </div>
 <h1>{{ prefix }}</h1>
+{% include 'inc/created_updated.html' with obj=prefix %}
 <ul class="nav nav-tabs" style="margin-bottom: 20px">
     <li role="presentation"{% if active_tab == 'prefix' %} class="active"{% endif %}><a href="{% url 'ipam:prefix' pk=prefix.pk %}">Prefix</a></li>
     <li role="presentation"{% if active_tab == 'ip-addresses' %} class="active"{% endif %}><a href="{% url 'ipam:prefix_ipaddresses' pk=prefix.pk %}">IP Addresses</a></li>

netbox/templates/ipam/ipaddress.html

@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
         <ol class="breadcrumb">
             <li><a href="{% url 'ipam:ipaddress_list' %}">IP Addresses</a></li>
             {% if ipaddress.vrf %}
@@ -14,7 +14,7 @@
             <li>{{ ipaddress }}</li>
         </ol>
     </div>
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
         <form action="{% url 'ipam:ipaddress_list' %}" method="get">
             <div class="input-group">
                 <input type="text" name="q" class="form-control" placeholder="Search IPs" />
@@ -42,6 +42,7 @@
     {% endif %}
 </div>
 <h1>{{ ipaddress }}</h1>
+{% include 'inc/created_updated.html' with obj=ipaddress %}
 <div class="row">
 	<div class="col-md-6">
         <div class="panel panel-default">
@@ -136,7 +137,6 @@
         {% with ipaddress.get_custom_fields as custom_fields %}
             {% include 'inc/custom_fields_panel.html' %}
         {% endwith %}
-        {% include 'inc/created_updated.html' with obj=ipaddress %}
 	</div>
 	<div class="col-md-6">
         {% with heading='Parent Prefixes' %}

netbox/templates/ipam/prefix.html

@@ -104,7 +104,6 @@
         {% with prefix.get_custom_fields as custom_fields %}
             {% include 'inc/custom_fields_panel.html' %}
         {% endwith %}
-        {% include 'inc/created_updated.html' with obj=prefix %}
         <br />
 	</div>
 	<div class="col-md-7">

netbox/templates/ipam/vlan.html

@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
         <ol class="breadcrumb">
             <li><a href="{% url 'ipam:vlan_list' %}">VLANs</a></li>
             <li><a href="{% url 'ipam:vlan_list' %}?site={{ vlan.site.slug }}">{{ vlan.site }}</a></li>
@@ -15,7 +15,7 @@
             <li>{{ vlan.name }} ({{ vlan.vid }})</li>
         </ol>
     </div>
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
     <form action="{% url 'ipam:vlan_list' %}" method="get">
         <div class="input-group">
             <input type="text" name="q" class="form-control" placeholder="Search VLANs" />
@@ -43,6 +43,7 @@
     {% endif %}
 </div>
 <h1>VLAN {{ vlan.display_name }}</h1>
+{% include 'inc/created_updated.html' with obj=vlan %}
 <div class="row">
 	<div class="col-md-6">
         <div class="panel panel-default">
@@ -113,7 +114,6 @@
         {% with vlan.get_custom_fields as custom_fields %}
             {% include 'inc/custom_fields_panel.html' %}
         {% endwith %}
-        {% include 'inc/created_updated.html' with obj=vlan %}
 	</div>
 	<div class="col-md-6">
         <div class="panel panel-default">

netbox/templates/ipam/vrf.html

@@ -5,13 +5,13 @@
 
 {% block content %}
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
         <ol class="breadcrumb">
             <li><a href="{% url 'ipam:vrf_list' %}">VRFs</a></li>
             <li>{{ vrf }}</li>
         </ol>
     </div>
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
         <form action="{% url 'ipam:vrf_list' %}" method="get">
             <div class="input-group">
                 <input type="text" name="q" class="form-control" placeholder="Search VRFs" />
@@ -39,6 +39,7 @@
     {% endif %}
 </div>
 <h1>{{ vrf }}</h1>
+{% include 'inc/created_updated.html' with obj=vrf %}
 <div class="row">
 	<div class="col-md-6">
         <div class="panel panel-default">
@@ -85,7 +86,6 @@
         {% with vrf.get_custom_fields as custom_fields %}
             {% include 'inc/custom_fields_panel.html' %}
         {% endwith %}
-        {% include 'inc/created_updated.html' with obj=vrf %}
 	</div>
 	<div class="col-md-6">
         <div class="panel panel-default">

netbox/templates/paginator.html

@@ -2,11 +2,10 @@
 
 {# Custom pagination controls to render nicely with Bootstrap CSS. smart_pages requires EnhancedPaginator. #}
 
-<div class="row">
-    <div class="col-md-7">
+<div class="paginator pull-right">
     {% if table.paginator.num_pages > 1 %}
         <nav>
-            <ul class="pagination">
+            <ul class="pagination pull-right">
                 {% if table.page.has_previous %}
                     <li><a href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}">&laquo;</a></li>
                 {% endif %}
@@ -23,8 +22,7 @@
             </ul>
         </nav>
     {% endif %}
-    </div>
-    <div class="col-md-5 text-right text-muted">
+    <div class="text-right text-muted">
         Showing {{ table.page.start_index }}-{{ table.page.end_index }} of {{ total }}
         {% if total == 1 %}
             {{ table.data.verbose_name }}
@@ -32,4 +30,4 @@
             {{ table.data.verbose_name_plural }}
         {% endif %}
     </div>
-</div>
+</div>

netbox/templates/secrets/secret.html

@@ -29,6 +29,7 @@
     {% endif %}
 </div>
 <h1>{{ secret }}</h1>
+{% include 'inc/created_updated.html' with obj=secret %}
 <div class="row">
 	<div class="col-md-6">
         <div class="panel panel-default">
@@ -58,7 +59,6 @@
                 </tr>
             </table>
         </div>
-        {% include 'inc/created_updated.html' with obj=secret %}
 	</div>
 	<div class="col-md-6">
         {% if secret|decryptable_by:request.user %}

netbox/templates/tenancy/tenant.html

@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
         <ol class="breadcrumb">
             <li><a href="{% url 'tenancy:tenant_list' %}">Tenants</a></li>
             {% if tenant.group %}
@@ -14,7 +14,7 @@
             <li>{{ tenant }}</li>
         </ol>
     </div>
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
         <form action="{% url 'tenancy:tenant_list' %}" method="get">
             <div class="input-group">
                 <input type="text" name="q" class="form-control" placeholder="Name" />
@@ -42,6 +42,7 @@
     {% endif %}
 </div>
 <h1>{{ tenant }}</h1>
+{% include 'inc/created_updated.html' with obj=tenant %}
 <div class="row">
 	<div class="col-md-7">
         <div class="panel panel-default">
@@ -86,7 +87,6 @@
                 {% endif %}
             </div>
         </div>
-        {% include 'inc/created_updated.html' with obj=tenant %}
 	</div>
 	<div class="col-md-5">
         <div class="panel panel-default">

netbox/templates/users/_user.html

@@ -0,0 +1,22 @@
+{% extends '_base.html' %}
+
+{% block content %}
+<div class="row">
+    <div class="col-sm-12 col-md-8 col-md-offset-2">
+        <h1>{% block title %}{% endblock %}</h1>
+    </div>
+</div>
+<div class="row">
+    <div class="col-sm-3 col-md-2 col-md-offset-2">
+        <ul class="nav nav-pills nav-stacked">
+            <li{% ifequal active_tab "profile" %} class="active"{% endifequal %}><a href="{% url 'users:profile' %}">Profile</a></li>
+            <li{% ifequal active_tab "change_password" %} class="active"{% endifequal %}><a href="{% url 'users:change_password' %}">Change Password</a></li>
+            <li{% ifequal active_tab "userkey" %} class="active"{% endifequal %}><a href="{% url 'users:userkey' %}">User Key</a></li>
+            <li{% ifequal active_tab "recent_activity" %} class="active"{% endifequal %}><a href="{% url 'users:recent_activity' %}">Recent Activity</a></li>
+        </ul>
+    </div>
+	<div class="col-sm-9 col-md-6">
+        {% block usercontent %}{% endblock %}
+	</div>
+</div>
+{% endblock %}

netbox/templates/users/change_password.html

@@ -1,46 +1,30 @@
-{% extends '_base.html' %}
+{% extends 'users/_user.html' %}
 {% load form_helpers %}
 
 {% block title %}Change Password{% endblock %}
 
-{% block content %}
-<div class="row">
-    <div class="col-md-8 col-md-offset-2">
-        <h1>Change Password</h1>
-    </div>
-</div>
-<div class="row">
-    <div class="col-md-2 col-md-offset-2">
-        {% include 'users/inc/profile_nav.html' with active_tab="change_password" %}
-    </div>
-	<div class="col-md-6">
-        <form action="." method="post" class="form form-horizontal">
-            {% csrf_token %}
-            {% if form.non_field_errors %}
-                <div class="panel panel-danger">
-                    <div class="panel-heading"><strong>Errors</strong></div>
-                    <div class="panel-body">
-                        {{ form.non_field_errors }}
-                    </div>
-                </div>
-            {% endif %}
-            <div class="panel panel-default">
-                <div class="panel-heading"><strong>Password</strong></div>
+{% block usercontent %}
+    <form action="." method="post" class="form form-horizontal">
+        {% csrf_token %}
+        {% if form.non_field_errors %}
+            <div class="panel panel-danger">
+                <div class="panel-heading"><strong>Errors</strong></div>
                 <div class="panel-body">
-                    {% render_field form.old_password %}
-                    {% render_field form.new_password1 %}
-                    {% render_field form.new_password2 %}
+                    {{ form.non_field_errors }}
                 </div>
             </div>
-            <div class="row">
-                <div class="form-group">
-                    <div class="col-md-12 text-center">
-                        <button type="submit" name="_update" class="btn btn-primary">Update</button>
-                        <a href="{% url 'users:profile' %}" class="btn btn-default">Cancel</a>
-                    </div>
-                </div>
+        {% endif %}
+        <div class="panel panel-default">
+            <div class="panel-heading"><strong>Password</strong></div>
+            <div class="panel-body">
+                {% render_field form.old_password %}
+                {% render_field form.new_password1 %}
+                {% render_field form.new_password2 %}
             </div>
-        </form>
-    </div>
-</div>
+        </div>
+        <div class="text-right">
+            <button type="submit" name="_update" class="btn btn-primary">Update</button>
+            <a href="{% url 'users:profile' %}" class="btn btn-default">Cancel</a>
+        </div>
+    </form>
 {% endblock %}

netbox/templates/users/inc/profile_nav.html

@@ -1,6 +0,0 @@
-<ul class="nav nav-pills nav-stacked">
-    <li{% ifequal active_tab "profile" %} class="active"{% endifequal %}><a href="{% url 'users:profile' %}">Profile</a></li>
-    <li{% ifequal active_tab "change_password" %} class="active"{% endifequal %}><a href="{% url 'users:change_password' %}">Change Password</a></li>
-    <li{% ifequal active_tab "userkey" %} class="active"{% endifequal %}><a href="{% url 'users:userkey' %}">User Key</a></li>
-    <li{% ifequal active_tab "recent_activity" %} class="active"{% endifequal %}><a href="{% url 'users:recent_activity' %}">Recent Activity</a></li>
-</ul>

netbox/templates/users/profile.html

@@ -1,31 +1,19 @@
-{% extends '_base.html' %}
+{% extends 'users/_user.html' %}
 {% load helpers %}
 
 {% block title %}User Profile{% endblock %}
 
-{% block content %}
-<div class="row">
-    <div class="col-md-8 col-md-offset-2">
-        <h1>User Profile</h1>
-    </div>
-</div>
-<div class="row">
-    <div class="col-md-2 col-md-offset-2">
-        {% include 'users/inc/profile_nav.html' with active_tab="profile" %}
-    </div>
-	<div class="col-md-6">
-        <small class="text-muted">User login</small>
-        <h5>{{ request.user.username }}</h5>
-        <small class="text-muted">Full name</small>
-        <h5>{{ request.user.first_name }} {{ request.user.last_name }}</h5>
-        <small class="text-muted">Email</small>
-        <h5>{{ request.user.email }}</h5>
-        <small class="text-muted">Registered</small>
-        <h5>{{ request.user.date_joined }}</h5>
-        <small class="text-muted">Groups</small>
-        <h5>{{ request.user.groups.all|join:', ' }}</h5>
-        <small class="text-muted">Admin access</small>
-        <h5>{{ request.user.is_staff|yesno|capfirst }}</h5>
-	</div>
-</div>
+{% block usercontent %}
+    <small class="text-muted">User login</small>
+    <h5>{{ request.user.username }}</h5>
+    <small class="text-muted">Full name</small>
+    <h5>{{ request.user.first_name }} {{ request.user.last_name }}</h5>
+    <small class="text-muted">Email</small>
+    <h5>{{ request.user.email }}</h5>
+    <small class="text-muted">Registered</small>
+    <h5>{{ request.user.date_joined }}</h5>
+    <small class="text-muted">Groups</small>
+    <h5>{{ request.user.groups.all|join:', ' }}</h5>
+    <small class="text-muted">Admin access</small>
+    <h5>{{ request.user.is_staff|yesno|capfirst }}</h5>
 {% endblock %}

netbox/templates/users/recent_activity.html

@@ -1,35 +1,22 @@
-{% extends '_base.html' %}
-{% load form_helpers %}
+{% extends 'users/_user.html' %}
 
 {% block title %}Recent Activity{% endblock %}
 
-{% block content %}
-<div class="row">
-    <div class="col-md-8 col-md-offset-2">
-        <h1>Recent Activity</h1>
-    </div>
-</div>
-<div class="row">
-    <div class="col-md-2 col-md-offset-2">
-        {% include 'users/inc/profile_nav.html' with active_tab="recent_activity" %}
-    </div>
-	<div class="col-md-6">
-        <table class="table table-hover">
-            <thead>
+{% block usercontent %}
+    <table class="table table-hover">
+        <thead>
+            <tr>
+                <th>Time</th>
+                <th>Action</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for action in recent_activity %}
                 <tr>
-                    <th>Time</th>
-                    <th>Action</th>
+                    <td>{{ action.time|date:'SHORT_DATETIME_FORMAT' }}</td>
+                    <td>{{ action.icon }} {{ action.message|safe }}</td>
                 </tr>
-            </thead>
-            <tbody>
-                {% for action in recent_activity %}
-                    <tr>
-                        <td>{{ action.time|date:'SHORT_DATETIME_FORMAT' }}</td>
-                        <td>{{ action.icon }} {{ action.message|safe }}</td>
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-	</div>
-</div>
+            {% endfor %}
+        </tbody>
+    </table>
 {% endblock %}

netbox/templates/users/userkey.html

@@ -1,46 +1,33 @@
-{% extends '_base.html' %}
-{% load form_helpers %}
+{% extends 'users/_user.html' %}
 
 {% block title %}User Key{% endblock %}
 
-{% block content %}
-<div class="row">
-    <div class="col-md-8 col-md-offset-2">
-        <h1>User Key</h1>
-    </div>
-</div>
-<div class="row">
-    <div class="col-md-2 col-md-offset-2">
-        {% include 'users/inc/profile_nav.html' with active_tab="userkey" %}
-    </div>
-	<div class="col-md-6">
-        {% if userkey %}
-            <h4>
-                Your user key is:
-                {% if userkey.is_active %}
-                    <span class="label label-success">Active</span>
-                {% else %}
-                    <span class="label label-danger">Inactive</span>
-                {% endif %}
-            </h4>
-            <p>Your public key is below.</p>
-            <pre>{{ userkey.public_key }}</pre>
-            <div class="pull-right">
-                <a href="{% url 'users:userkey_edit' %}" class="btn btn-warning">
-                    <span class="fa fa-pencil" aria-hidden="true"></span>
-                    Edit user key
-                </a>
-            </div>
-            {% include 'inc/created_updated.html' with obj=userkey %}
-        {% else %}
-            <p>You don't have a user key on file.</p>
-            <p>
-                <a href="{% url 'users:userkey_edit' %}" class="btn btn-primary">
-                    <span class="fa fa-plus" aria-hidden="true"></span>
-                    Create a User Key
-                </a>
-            </p>
-        {% endif %}
-	</div>
-</div>
+{% block usercontent %}
+    {% if userkey %}
+        <h4>
+            Your user key is:
+            {% if userkey.is_active %}
+                <span class="label label-success">Active</span>
+            {% else %}
+                <span class="label label-danger">Inactive</span>
+            {% endif %}
+        </h4>
+        <p>Your public key is below.</p>
+        <pre>{{ userkey.public_key }}</pre>
+        <div class="pull-right">
+            <a href="{% url 'users:userkey_edit' %}" class="btn btn-warning">
+                <span class="fa fa-pencil" aria-hidden="true"></span>
+                Edit user key
+            </a>
+        </div>
+        {% include 'inc/created_updated.html' with obj=userkey %}
+    {% else %}
+        <p>You don't have a user key on file.</p>
+        <p>
+            <a href="{% url 'users:userkey_edit' %}" class="btn btn-primary">
+                <span class="fa fa-plus" aria-hidden="true"></span>
+                Create a User Key
+            </a>
+        </p>
+    {% endif %}
 {% endblock %}

netbox/templates/users/userkey_edit.html

@@ -1,71 +1,58 @@
-{% extends '_base.html' %}
+{% extends 'users/_user.html' %}
 {% load static from staticfiles %}
 {% load form_helpers %}
 
 {% block title %}User Key{% endblock %}
 
-{% block content %}
-<div class="row">
-    <div class="col-md-8 col-md-offset-2">
-        <h1>User Key</h1>
-    </div>
-</div>
-<div class="row">
-    <div class="col-md-2 col-md-offset-2">
-        {% include 'users/inc/profile_nav.html' with active_tab="userkey" %}
-    </div>
-	<div class="col-md-6">
-        {% if userkey.is_active %}
-            <div class="alert alert-danger" role="alert">
-                <strong>Warning:</strong> Changing your public key will require your user key to be re-activated by another
-                user. You will be unable to retrieve any secrets until your key has been reactivated.
-            </div>
-        {% endif %}
-        <form action="." method="post" class="form">
-            {% csrf_token %}
+{% block usercontent %}
+    {% if userkey.is_active %}
+        <div class="alert alert-danger" role="alert">
+            <strong>Warning:</strong> Changing your public key will require your user key to be re-activated by another
+            user. You will be unable to retrieve any secrets until your key has been reactivated.
+        </div>
+    {% endif %}
+    <form action="." method="post" class="form">
+        {% csrf_token %}
+        <div class="form-group">
+            {% render_field form.public_key %}
+        </div>
+        <div class="row">
             <div class="form-group">
-                {% render_field form.public_key %}
+                <div class="col-sm-6 col-md-6">
+                    <button type="button" class="btn btn-info" id="generate_keypair">Generate a New Key Pair</button>
+                </div>
+                <div class="col-sm-6 col-md-6 text-right">
+                    <button type="submit" name="_update" class="btn btn-primary">Save</button>
+                    <a href="{% url 'users:userkey' %}" class="btn btn-default">Cancel</a>
+                </div>
             </div>
-            <div class="row">
-                <div class="form-group">
-                    <div class="col-md-6">
-                        <button type="button" class="btn btn-info" id="generate_keypair">Generate a New Key Pair</button>
+        </div>
+    </form>
+    <div class="modal fade" id="new_keypair_modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-md" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="new_keypair_modal_title">
+                        New RSA Key Pair
+                    </h4>
+                </div>
+                <div class="modal-body">
+                    <strong>New Public Key</strong>
+                    <div class="form-group">
+                        <textarea class="form-control" id="new_pubkey" style="height: 250px;"></textarea>
                     </div>
-                    <div class="col-md-6 text-right">
-                        <button type="submit" name="_update" class="btn btn-primary">Save</button>
-                        <a href="{% url 'users:userkey' %}" class="btn btn-default">Cancel</a>
+                    <strong>New Private Key</strong>
+                    <div class="form-group">
+                        <textarea class="form-control" id="new_privkey" style="height: 250px;"></textarea>
                     </div>
                 </div>
-            </div>
-        </form>
-	</div>
-</div>
-
-<div class="modal fade" id="new_keypair_modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-md" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title" id="new_keypair_modal_title">
-                    New RSA Key Pair
-                </h4>
-            </div>
-            <div class="modal-body">
-                <strong>New Public Key</strong>
-                <div class="form-group">
-                    <textarea class="form-control" id="new_pubkey" style="height: 250px;"></textarea>
-                </div>
-                <strong>New Private Key</strong>
-                <div class="form-group">
-                    <textarea class="form-control" id="new_privkey" style="height: 250px;"></textarea>
+                <div class="modal-footer text-center">
+                    <button type="button" class="btn btn-danger" id="use_new_pubkey" data-dismiss="modal">I have saved my new private key</button>
                 </div>
             </div>
-            <div class="modal-footer text-center">
-                <button type="button" class="btn btn-danger" id="use_new_pubkey" data-dismiss="modal">I have saved my new private key</button>
-            </div>
         </div>
     </div>
-</div>
 {% endblock %}
 
 {% block javascript %}

netbox/templates/utilities/obj_table.html

@@ -31,3 +31,4 @@
 {% else %}
     {% render_table table table_template|default:'table.html' %}
 {% endif %}
+<div class="clearfix"></div>

netbox/users/views.py

@@ -56,6 +56,7 @@ def logout(request):
 def profile(request):
 
     return render(request, 'users/profile.html', {
+        'active_tab': 'profile',
     })
 
 
@@ -75,6 +76,7 @@ def change_password(request):
 
     return render(request, 'users/change_password.html', {
         'form': form,
+        'active_tab': 'change_password',
     })
 
 
@@ -88,6 +90,7 @@ def userkey(request):
 
     return render(request, 'users/userkey.html', {
         'userkey': userkey,
+        'active_tab': 'userkey',
     })
 
 
@@ -114,6 +117,7 @@ def userkey_edit(request):
     return render(request, 'users/userkey_edit.html', {
         'userkey': userkey,
         'form': form,
+        'active_tab': 'userkey',
     })
 
 
@@ -121,5 +125,6 @@ def userkey_edit(request):
 def recent_activity(request):
 
     return render(request, 'users/recent_activity.html', {
-        'recent_activity': request.user.actions.all()[:50]
+        'recent_activity': request.user.actions.all()[:50],
+        'active_tab': 'recent_activity',
     })