Clean up dashboard widgets

netbox/templates/base/layout.html

@@ -115,46 +115,43 @@ Blocks:
     <div class="page-wrapper">
 
       {# Page header #}
-      <div class="page-header mt-2 d-print-none">
+      <div class="container-xl mt-2 d-print-none">
-        <div class="container-xl">
+        {% if config.BANNER_TOP %}
+          <div class="text-center mx-3">
+            {{ config.BANNER_TOP|safe }}
+          </div>
+        {% endif %}
 
-          {% if config.BANNER_TOP %}
+        {% if settings.DEBUG and not settings.DEVELOPER %}
-            <div class="text-center mx-3">
+          <div class="alert alert-warning text-center mx-3" role="alert">
-              {{ config.BANNER_TOP|safe }}
+            <strong><i class="mdi mdi-alert"></i> {% trans "Debug mode is enabled" %}.</strong>
+            {% trans "Performance may be limited. Debugging should never be enabled on a production system" %}.
+          </div>
+        {% endif %}
+
+        {% if config.MAINTENANCE_MODE and config.BANNER_MAINTENANCE %}
+          <div class="alert alert-warning text-center mx-3" role="alert">
+            <h5><i class="mdi mdi-alert"></i> {% trans "Maintenance Mode" %}</h5>
+            {{ config.BANNER_MAINTENANCE|escape }}
+          </div>
+        {% endif %}
+
+        {% block header %}
+          <div class="row align-items-center">
+
+            {# Title #}
+            <div class="col">
+              <h2 class="page-title">{% block title %}{% endblock title %}</h2>
+              {% block subtitle %}{% endblock %}
             </div>
-          {% endif %}
 
-          {% if settings.DEBUG and not settings.DEVELOPER %}
+            {# Controls #}
-            <div class="alert alert-warning text-center mx-3" role="alert">
+            <div class="col-auto ms-auto d-print-none">
-              <strong><i class="mdi mdi-alert"></i> {% trans "Debug mode is enabled" %}.</strong>
+              {% block controls %}{% endblock controls %}
-              {% trans "Performance may be limited. Debugging should never be enabled on a production system" %}.
             </div>
-          {% endif %}
 
-          {% if config.MAINTENANCE_MODE and config.BANNER_MAINTENANCE %}
+          </div>
-            <div class="alert alert-warning text-center mx-3" role="alert">
+        {% endblock header %}
-              <h5><i class="mdi mdi-alert"></i> {% trans "Maintenance Mode" %}</h5>
-              {{ config.BANNER_MAINTENANCE|escape }}
-            </div>
-          {% endif %}
-
-          {% block header %}
-            <div class="row align-items-center">
-
-              {# Title #}
-              <div class="col">
-                <h2 class="page-title">{% block title %}{% endblock title %}</h2>
-                {% block subtitle %}{% endblock %}
-              </div>
-
-              {# Controls #}
-              <div class="col-auto ms-auto d-print-none">
-                {% block controls %}{% endblock controls %}
-              </div>
-
-            </div>
-          {% endblock header %}
-        </div>
       </div>
       {# /Page header #}
 

netbox/templates/extras/dashboard/widget.html

@@ -9,32 +9,30 @@
     gs-id="{{ widget.id }}"
 >
   <div class="card grid-stack-item-content">
-    <div class="card-header text-center text-{{ widget.fg_color }} bg-{{ widget.color|default:"secondary" }} p-1">
+    <div class="card-header text-{{ widget.fg_color }} bg-{{ widget.color|default:"secondary" }} px-2 py-1 d-flex flex-row">
-      <div class="float-start ps-1">
+      <a href="#"
-        <a href="#"
+        hx-get="{% url 'extras:dashboardwidget_config' id=widget.id %}"
-          hx-get="{% url 'extras:dashboardwidget_config' id=widget.id %}"
+        hx-target="#htmx-modal-content"
-          hx-target="#htmx-modal-content"
+        data-bs-toggle="modal"
-          data-bs-toggle="modal"
+        data-bs-target="#htmx-modal"
-          data-bs-target="#htmx-modal"
+      >
-        >
+        <i class="mdi mdi-cog text-{{ widget.fg_color }}"></i>
-          <i class="mdi mdi-cog text-{{ widget.fg_color }}"></i>
+      </a>
-        </a>
+      <div class="card-title flex-fill text-center">
+        {% if widget.title %}
+          <span class="fs-4 fw-bold">{{ widget.title }}</span>
+        {% endif %}
       </div>
-      <div class="float-end pe-1">
+      <a href="#"
-        <a href="#"
+        hx-get="{% url 'extras:dashboardwidget_delete' id=widget.id %}"
-          hx-get="{% url 'extras:dashboardwidget_delete' id=widget.id %}"
+        hx-target="#htmx-modal-content"
-          hx-target="#htmx-modal-content"
+        data-bs-toggle="modal"
-          data-bs-toggle="modal"
+        data-bs-target="#htmx-modal"
-          data-bs-target="#htmx-modal"
+      >
-        >
+        <i class="mdi mdi-close text-{{ widget.fg_color }}"></i>
-          <i class="mdi mdi-close text-{{ widget.fg_color }}"></i>
+      </a>
-        </a>
-      </div>
-      {% if widget.title %}
-        <strong>{{ widget.title }}</strong>
-      {% endif %}
     </div>
-    <div class="card-body p-2 overflow-auto">
+    <div class="card-body p-2 pt-1 overflow-auto">
       {% render_widget widget %}
     </div>
   </div>

netbox/templates/extras/dashboard/widgets/bookmarks.html

@@ -3,7 +3,7 @@
 {% if bookmarks %}
   <div class="list-group list-group-flush">
     {% for bookmark in bookmarks %}
-      <a href="{{ bookmark.object.get_absolute_url }}" class="list-group-item list-group-item-action">
+      <a href="{{ bookmark.object.get_absolute_url }}" class="list-group-item list-group-item-action px-1 py-2">
         {{ bookmark.object }}
       </a>
     {% endfor %}

netbox/templates/extras/dashboard/widgets/objectcounts.html

@@ -1,20 +1,20 @@
 {% load i18n %}
+
 {% if counts %}
   <div class="list-group list-group-flush">
     {% for model, count, url in counts %}
-      {% if count != None %}
+      <a href="{{ url }}" class="list-group-item list-group-item-action px-1 py-2">
-        <a href="{{ url }}" class="list-group-item list-group-item-action">
+        <div class="d-flex w-100 justify-content-between align-items-center">
-          <div class="d-flex w-100 justify-content-between align-items-center">
-            {{ model|meta:"verbose_name_plural"|bettertitle }}
-            <h6 class="mb-1">{{ count }}</h6>
-          </div>
-        </a>
-      {% else %}
-        <div class="list-group-item list-group-item-action d-flex w-100 justify-content-between align-items-center">
           {{ model|meta:"verbose_name_plural"|bettertitle }}
-          <h6 class="mb-1" title="{% trans "No permission" %}"><i class="mdi mdi-lock-outline"></i></h6>
+          {% if count is None %}
+            <span title="{% trans "No permission" %}">
+              <i class="mdi mdi-lock-outline"></i>
+            </span>
+          {% else %}
+            <strong>{{ count }}</strong>
+          {% endif %}
         </div>
-      {% endif %}
+      </a>
     {% endfor %}
   </div>
 {% endif %}

netbox/templates/extras/dashboard/widgets/rssfeed.html

@@ -2,9 +2,9 @@
 {% if feed and not feed.bozo %}
   <div class="list-group list-group-flush">
     {% for entry in feed.entries %}
-      <div class="list-group-item px-1">
+      <div class="list-group-item px-1 py-2">
-        <h6><a href="{{ entry.link }}">{{ entry.title }}</a></h6>
+        <a href="{{ entry.link }}" class="text-body">{{ entry.title }}</a>
-        <div>
+        <div class="text-secondary">
           {{ entry.summary|safe }}
         </div>
       </div>