improve styles and documentation

netbox/templates/home.html

@@ -1,6 +1,7 @@
-{% extends 'layout.html' %} {% load helpers %} {%block title %} Home
-{%endblock%} {% block content %}
-
+{% extends 'layout.html' %}
+{% load helpers %}
+{% block title_container %}{% endblock %}
+{% block content %}
 <div class="stats-container">
   <div class="row row-cols-auto masonry">
     {% for section in stats %}
@@ -51,5 +52,4 @@
     </div>
   </div>
 </div>
-
 {% endblock %}

netbox/templates/layout.html

@@ -37,11 +37,10 @@
           {% search_options %} {% include './profile_button.html' %}
         
       </nav>
-
+      
       <div class="px-4">
-        <div
-          class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"
-        >
+        {% block title_container %}
+        <div class="title-container">
           <div id="content-title">
             <h1 class="h2 w-100">{% block title %}{% endblock %}</h1>
             {% block breadcrumb_main %}{% endblock %}
@@ -49,6 +48,7 @@
 
           {% block controls %}{% endblock %}
         </div>
+        {% endblock %}
         <div id="content" class="container-fluid p-0 m-0">
           {% block tabs %}{% endblock %}
           {% block content %}{% endblock %}

netbox/templates/users/preferences.html

@@ -4,11 +4,11 @@
 {% block title %}User Preferences{% endblock %}
 
 {% block usercontent %}
-<form method="post" action="">
+<form method="post" action="" id="preferences-update">
     {% csrf_token %}
     <div class="field-group mb-3">
         <h4>Color Mode</h4>
-        <p class="lead text-muted">Set your preferred UI color mode</p>
+        <p class="lead text-muted">Set preferred UI color mode</p>
         {% with color_mode=preferences|get_key:'ui.colormode'%}
         <div class="form-check form-check-inline">
             <input class="form-check-input" type="radio" name="ui.colormode" id="color-mode-preference-dark" value="dark"{% if color_mode == 'dark'%} checked{% endif %}>
@@ -22,18 +22,18 @@
     </div>
     <div class="row">
         <div class="col">
-            <button type="submit" class="btn btn-success" name="_update">
+            <button type="submit" class="btn btn-primary" name="_update">
                 Save
             </button>
         </div>
     </div>
 {% if preferences %}
-<div class="field-group">
+<div class="field-group mb-3">
     <h4>Other Preferences</h4>
     <table class="table table-striped">
         <thead>
             <tr>
-                <th><input type="checkbox" class="toggle" title="Toggle all"></th>
+                <th><input type="checkbox" class="toggle form-check-input" title="Toggle All"></th>
                 <th>Preference</th>
                 <th>Value</th>
             </tr>
@@ -41,7 +41,7 @@
         <tbody>
             {% for key, value in preferences.items %}
                 <tr>
-                    <td class="min-width"><input type="checkbox" name="pk" value="{{ key }}"></td>
+                    <td class="min-width"><input class="form-check-input" type="checkbox" name="pk" value="{{ key }}"></td>
                     <td><samp>{{ key }}</samp></td>
                     <td><samp>{{ value }}</samp></td>
                 </tr>
@@ -53,7 +53,7 @@
     </button>
 </div>
 {% else %}
-    <h3 class="text-muted text-center">No preferences found</h3>
+    <h3 class="text-muted text-center">No Preferences Found</h3>
 {% endif %}
 </form>
 {% endblock %}