Various CSS and layout tweaks

netbox/extras/constants.py

@@ -22,7 +22,7 @@ DEFAULT_DASHBOARD = [
     {
         'widget': 'extras.ObjectCountsWidget',
         'width': 4,
-        'height': 2,
+        'height': 5,
         'title': 'Organization',
         'config': {
             'models': [
@@ -35,7 +35,7 @@ DEFAULT_DASHBOARD = [
     {
         'widget': 'extras.ObjectCountsWidget',
         'width': 4,
-        'height': 3,
+        'height': 8,
         'title': 'IPAM',
         'config': {
             'models': [
@@ -51,7 +51,7 @@ DEFAULT_DASHBOARD = [
     {
         'widget': 'extras.NoteWidget',
         'width': 4,
-        'height': 2,
+        'height': 4,
         'title': 'Welcome!',
         'color': 'green',
         'config': {
@@ -65,7 +65,7 @@ DEFAULT_DASHBOARD = [
     {
         'widget': 'extras.ObjectCountsWidget',
         'width': 4,
-        'height': 2,
+        'height': 4,
         'title': 'Circuits',
         'config': {
             'models': [
@@ -78,7 +78,7 @@ DEFAULT_DASHBOARD = [
     {
         'widget': 'extras.RSSFeedWidget',
         'width': 4,
-        'height': 4,
+        'height': 8,
         'title': 'NetBox News',
         'config': {
             'feed_url': 'http://netbox.dev/rss/',
@@ -89,7 +89,7 @@ DEFAULT_DASHBOARD = [
     {
         'widget': 'extras.ObjectCountsWidget',
         'width': 4,
-        'height': 3,
+        'height': 6,
         'title': 'DCIM',
         'config': {
             'models': [
@@ -104,7 +104,7 @@ DEFAULT_DASHBOARD = [
     {
         'widget': 'extras.ObjectCountsWidget',
         'width': 4,
-        'height': 2,
+        'height': 4,
         'title': 'Virtualization',
         'config': {
             'models': [
@@ -116,7 +116,7 @@ DEFAULT_DASHBOARD = [
     {
         'widget': 'extras.ObjectListWidget',
         'width': 12,
-        'height': 5,
+        'height': 10,
         'title': 'Change Log',
         'color': 'blue',
         'config': {

netbox/extras/dashboard/widgets.py

@@ -133,7 +133,7 @@ class NoteWidget(DashboardWidget):
         )
 
     def render(self, request):
-        return render_markdown(self.config.get('content'))
+        return render_markdown(self.config.get('content'), "mt-3")
 
 
 @register_widget

netbox/project-static/src/dashboard.ts

@@ -35,7 +35,7 @@ export function initDashboard(): void {
 
   // Initialize the grid
   let grid = GridStack.init({
-    cellHeight: 100,
+    cellHeight: 48,
     disableDrag: true,
     disableResize: true,
     draggable: {

netbox/project-static/styles/netbox.scss

@@ -109,6 +109,20 @@ table td > .progress {
   }
 }
 
+// Remove scrollbars from grid stack cards on Explorer and Firefox
+.grid-stack-item-content > .card-body:not(:has(.htmx-container)) {
+  /* Internet Explorer 10+ */
+  -ms-overflow-style: none;
+  /* Firefox */
+  scrollbar-width: none;
+}
+
+// Remove scrollbars from grid stack cards on Safari and Chrome
+.grid-stack-item-content > .card-body:not(:has(.htmx-container))::-webkit-scrollbar {
+  display: none;
+}
+
+// Cards
 .card > .table.table-flush {
   margin-bottom: 0;
   overflow: hidden;
@@ -662,6 +676,14 @@ span.color-label {
   }
 }
 
+// Override the default GridStack style for the resize handle.
+.ui-resizable-se {
+  bottom: 0 !important;
+  right: 0 !important;
+  background-image: none !important;
+}
+
+// Floating forms
 .form-floating {
   position: relative;
 
@@ -744,7 +766,7 @@ textarea.form-control[name='csv'] {
   font-family: $font-family-monospace;
 }
 
-.card:not(:only-of-type) {
+.card:not(:only-of-type) + div:not(.ui-resizable-handle) {
   margin-bottom: $spacer;
 }
 

netbox/templates/extras/dashboard/widget.html

@@ -9,7 +9,7 @@
     gs-id="{{ widget.id }}"
 >
   <div class="card grid-stack-item-content">
-    <div class="card-header text-center text-light bg-{% if widget.color %}{{ widget.color }}{% else %}secondary{% endif %} p-1">
+    <div class="card-header text-center text-light {% if widget.color %}bg-{{ widget.color }} {% endif %}p-1">
       <div class="float-start ps-1">
         <a href="#"
           hx-get="{% url 'extras:dashboardwidget_config' id=widget.id %}"
@@ -27,10 +27,10 @@
         ><i class="mdi mdi-close text-gray"></i></a>
       </div>
       {% if widget.title %}
-        <strong>{{ widget.title }}</strong>
+        <h6 class="card-header">{{ widget.title }}</h6>
       {% endif %}
     </div>
-    <div class="card-body p-2 overflow-auto">
+    <div class="card-body overflow-auto mb-4">
       {% render_widget widget %}
     </div>
   </div>

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

@@ -7,13 +7,13 @@
         <a href="{% url model|viewname:"list" %}" class="list-group-item list-group-item-action">
           <div class="d-flex w-100 justify-content-between align-items-center">
             {{ model|meta:"verbose_name_plural"|bettertitle }}
-            <h6 class="mb-1">{{ count }}</h6>
+            <h5 class="mb-1">{{ count }}</h5>
           </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="No permission"><i class="mdi mdi-lock-outline"></i></h6>
+          <h5 class="mb-1" title="No permission"><i class="mdi mdi-lock-outline"></i></h5>
         </div>
       {% endif %}
     {% endfor %}

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

@@ -1,11 +1,11 @@
 {% if htmx_url and has_permission %}
-  <div class="htmx-container" hx-get="{{ htmx_url }}" hx-trigger="load"></div>
+  <div class="htmx-container mt-3" hx-get="{{ htmx_url }}" hx-trigger="load"></div>
 {% elif htmx_url %}
-  <div class="text-muted text-center">
+  <div class="text-muted text-center mt-3">
     <i class="mdi mdi-lock-outline"></i> No permission to view this content.
   </div>
 {% else %}
-  <div class="text-danger text-center">
+  <div class="text-danger text-center mt-3">
     <i class="mdi mdi-alert"></i> Unable to load content. Invalid view name: <span class="font-monospace">{{ viewname }}</span>
   </div>
 {% endif %}

netbox/templates/home.html

@@ -23,8 +23,9 @@
 {% block title %}Home{% endblock %}
 
 {% block content-wrapper %}
+<div class="px-3">
   {# Render the user's customized dashboard #}
-  <div class="grid-stack" id="dashboard">
+  <div class="row grid-stack" id="dashboard">
     {% for widget in dashboard %}
       {% include 'extras/dashboard/widget.html' %}
     {% endfor %}
@@ -64,6 +65,7 @@
       </div>
     </div>
   </div>
+</div>
 {% endblock content-wrapper %}
 
 {% block modals %}