Fixes #6976: Improve handling of printing layouts/styling

netbox/project-static/bundle.js

@@ -79,6 +79,7 @@ async function bundleStyles() {
       'netbox-external': 'styles/_external.scss',
       'netbox-light': 'styles/_light.scss',
       'netbox-dark': 'styles/_dark.scss',
+      'netbox-print': 'styles/_print.scss',
       rack_elevation: 'styles/_rack_elevation.scss',
       cable_trace: 'styles/_cable_trace.scss',
       graphiql: 'netbox-graphiql/graphiql.scss',

netbox/project-static/styles/_print.scss

@@ -0,0 +1,18 @@
+// Entry for netbox-print.css. Force light-mode theming when printing.
+
+@media print {
+  // Force black and white background/foreground colors when printing.
+  :root {
+    --nbx-body-bg: #fff !important;
+    --nbx-body-color: #000 !important;
+  }
+
+  html,
+  html[data-netbox-color-mode='dark'],
+  html[data-netbox-color-mode='light'] {
+    @import './theme-light';
+    @import './bootstrap';
+    @import './select';
+    @import './netbox';
+  }
+}

netbox/project-static/styles/netbox.scss

@@ -274,6 +274,12 @@ div.title-container {
 .controls {
   margin-bottom: map.get($spacers, 2);
 
+  @media print {
+    // Never print controls. Use this over the .noprint utility so plugin authors don't need to
+    // remember to add the class.
+    display: none !important;
+  }
+
   // Each group of buttons.
   .control-group {
     display: flex;
@@ -400,6 +406,15 @@ main.layout {
   max-height: 100vh;
   overflow-x: auto;
   overflow-y: hidden;
+
+  // Override styles when printing. Fixes issue where only the first page is visible when printing.
+  @media print {
+    position: static !important;
+    display: block !important;
+    height: 100%;
+    overflow-x: visible !important;
+    overflow-y: visible !important;
+  }
 }
 
 main.login-container {
@@ -521,6 +536,12 @@ div.content-container {
   div.content {
     flex: 1;
   }
+
+  // Make the content full-width when printing.
+  @media print {
+    width: 100% !important;
+    margin-left: 0 !important;
+  }
 }
 
 // Prevent scrolling of body content when nav menu is open on mobile.
@@ -556,7 +577,7 @@ span.color-label {
 
   .card-header {
     padding: $card-cap-padding-x;
-    color: $body-color;
+    color: var(--nbx-body-color);
     border-bottom: none;
   }
 
@@ -576,6 +597,11 @@ span.color-label {
     border-top: 1px solid $card-border-color;
     opacity: $hr-opacity;
   }
+
+  // Remove shadow when printing.
+  @media print {
+    box-shadow: unset !important;
+  }
 }
 
 .form-floating {
@@ -864,6 +890,29 @@ div.card > div.card-header > div.table-controls {
   padding: $spacer;
   background-color: $tab-content-bg;
   border-bottom: 1px solid $nav-tabs-border-color;
+
+  // Remove background and border when printing.
+  @media print {
+    background-color: var(--nbx-body-bg) !important;
+    border-bottom: none !important;
+  }
+}
+
+// Override masonry-layout styles when printing.
+.masonry {
+  @media print {
+    position: static !important;
+    display: block !important;
+    height: unset !important;
+  }
+  .masonry-item {
+    @media print {
+      position: static !important;
+      top: unset !important;
+      left: unset !important;
+      display: block !important;
+    }
+  }
 }
 
 // Object hierarchy indicators.

netbox/project-static/styles/utilities.scss

@@ -23,3 +23,22 @@ table td {
     vertical-align: middle;
   }
 }
+
+// Hide element when printing.
+.noprint {
+  @media print {
+    display: none !important;
+    visibility: hidden !important;
+  }
+}
+
+// Only show element when printing, otherwise hide.
+.printonly {
+  display: none !important;
+  visibility: hidden !important;
+
+  @media print {
+    display: block !important;
+    visibility: visible !important;
+  }
+}

netbox/templates/base/base.html

@@ -68,6 +68,12 @@
       href="{% static 'netbox-dark.css'%}"
       onerror="window.location='{% url 'media_failure' %}?filename=netbox-dark.css'"
     />
+    <link
+      rel="stylesheet"
+      media="print"
+      href="{% static 'netbox-print.css'%}"
+      onerror="window.location='{% url 'media_failure' %}?filename=netbox-print.css'"
+    />
     <link rel="icon" type="image/png" href="{% static 'netbox.ico' %}" />
 
     {# Javascript #}

netbox/templates/base/layout.html

@@ -15,8 +15,13 @@
       {# Body #}
       <div class="content-container">
 
+        {# Netbox Logo, only visible when printing #}
+        <div class="p-2 printonly">
+          <img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" width="200px" />
+        </div>
+
         {# Top bar #}
-        <nav class="navbar navbar-light sticky-top flex-md-nowrap ps-6 p-3 search container-fluid">
+        <nav class="navbar navbar-light sticky-top flex-md-nowrap ps-6 p-3 search container-fluid noprint">
 
             {# Mobile Navigation #}
             <div class="nav-mobile">
@@ -102,9 +107,9 @@ <h1 class="h2 w-100">{% block title %}{% endblock title %}</h1>
         {# Page footer #}
         <footer class="footer container-fluid">
           <div class="row align-items-center justify-content-between mx-0">
-            
+
             {# Docs & Community Links #}
-            <div class="col-sm-12 col-md-auto fs-4">
+            <div class="col-sm-12 col-md-auto fs-4 noprint">
               <nav class="nav justify-content-center justify-content-lg-start">
                 {# Documentation #}
                 <a type="button" class="nav-link" href="{% static 'docs/' %}" target="_blank">
@@ -139,7 +144,7 @@ <h1 class="h2 w-100">{% block title %}{% endblock title %}</h1>
                 </a>
               </nav>
             </div>
-            
+
             {# System Info #}
             <div class="col-sm-12 col-md-auto text-center text-lg-end text-muted">
               <span class="d-block d-md-inline">{% annotated_now %} {% now 'T' %}</span>

netbox/templates/base/sidenav.html

@@ -1,7 +1,7 @@
 {% load nav %}
 {% load static %}
 
-<nav class="sidenav" id="sidenav" data-simplebar>
+<nav class="sidenav noprint" id="sidenav" data-simplebar>
   <div class="sidenav-header">
 
   {# Brand #}