#6372: Implement layout improvements

netbox/project-static/_external.scss

@@ -1,4 +1,4 @@
 // Entry for all 3rd party library imports that do not rely on Bootstrap or NetBox styles.
-
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 @import '@mdi/font/css/materialdesignicons.min.css';
 @import 'flatpickr/dist/flatpickr.css';

netbox/project-static/dist/rack_elevation.css

@@ -1,2 +1,2 @@
-*{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:.875rem}rect{box-sizing:border-box}text{text-anchor:middle;dominant-baseline:middle}svg .rack{background-color:#f3f4f6;fill:none;stroke:#111827;stroke-width:2px}svg .slot{fill:#f3f4f6;stroke:#6b7280}svg .slot:hover{fill:#f9fafb}svg .slot+.add-device{fill:none}svg .slot .add-device:hover,svg .slot:hover+.add-device{fill:#3b82f6}svg .slot .add-device:hover+.slot{fill:#fff}svg .slot.reserved:hover[class],svg .slot.reserved[class]{fill:url(#reserved)}svg .slot.occupied:hover[class],svg .slot.occupied[class]{fill:url(#occupied)}svg .slot.blocked:hover[class],svg .slot.blocked[class]{fill:url(#blocked)}svg .slot.blocked:hover+.add-device{fill:none}svg .unit{margin:0;padding:5px 0;fill:#9ca3af;font-size:.875rem;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}svg .hidden{visibility:hidden}svg[data-netbox-color-mode=dark] .rack{background-color:#1f2937}svg[data-netbox-color-mode=dark] .slot{fill:#374151;stroke:#9ca3af}svg[data-netbox-color-mode=dark] .slot:hover{fill:#4b5563}svg[data-netbox-color-mode=dark] .slot+.add-device{fill:none}svg[data-netbox-color-mode=dark] .add-device:hover,svg[data-netbox-color-mode=dark] .slot:hover+.add-device{fill:#93c5fd}svg[data-netbox-color-mode=dark] .add-device:hover+.slot{fill:#000}
+*{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:.875rem}rect{box-sizing:border-box}text{text-anchor:middle;dominant-baseline:middle}svg .rack{background-color:#f3f4f6;fill:none;stroke:#111827;stroke-width:2px}svg .slot{fill:#f3f4f6;stroke:#6b7280}svg .slot:hover{fill:#f9fafb}svg .slot+.add-device{fill:none}svg .slot .add-device:hover,svg .slot:hover+.add-device{fill:#3b82f6}svg .slot .add-device:hover+.slot{fill:#fff}svg .slot.reserved:hover[class],svg .slot.reserved[class]{fill:url(#reserved)}svg .slot.occupied:hover[class],svg .slot.occupied[class]{fill:url(#occupied)}svg .slot.blocked:hover[class],svg .slot.blocked[class]{fill:url(#blocked)}svg .slot.blocked:hover+.add-device{fill:none}svg .unit{margin:0;padding:5px 0;fill:#9ca3af;font-size:.875rem;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}svg .hidden{visibility:hidden}svg[data-netbox-color-mode=dark] .rack{background-color:#1f2937}svg[data-netbox-color-mode=dark] .slot{fill:#374151;stroke:#9ca3af}svg[data-netbox-color-mode=dark] .slot:hover{fill:#4b5563}svg[data-netbox-color-mode=dark] .slot+.add-device{fill:none}svg[data-netbox-color-mode=dark] .add-device:hover,svg[data-netbox-color-mode=dark] .slot:hover+.add-device{fill:#93c5fd}svg[data-netbox-color-mode=dark] .add-device:hover+.slot{fill:#000}
 /*# sourceMappingURL=/static/rack_elevation.css.map */

netbox/project-static/netbox.scss

@@ -98,6 +98,21 @@ table td > .progress {
   min-width: 6rem;
 }
 
+span.profile-button .dropdown-menu {
+  transition: opacity 0.2s ease-in-out;
+  display: block !important;
+  right: 0;
+  left: auto;
+  margin-top: 0.5rem;
+  box-shadow: $box-shadow;
+  &:not(.show) {
+    opacity: 0;
+  }
+  &.show {
+    opacity: 1;
+  }
+}
+
 div#advanced-search-content div.card div.card-body div.col:not(:last-child) {
   margin-right: 1rem;
 }
@@ -362,6 +377,12 @@ div.content-container {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+
+  @include media-breakpoint-up(md) {
+    margin-left: $sidebar-width;
+  }
+
   div.content {
     flex: 1;
   }
@@ -383,27 +404,36 @@ div.content-container {
   z-index: 100; /* Behind the navbar */
   border-right: 1px solid $border-color;
   background-color: var(--nbx-sidebar-bg);
+  max-height: 100%;
+  width: 100%;
+
+  @include media-breakpoint-up(md) {
+    width: 100%;
+    max-width: $sidebar-width;
+  }
 
   @media (max-width: map.get($grid-breakpoints, 'md')) {
     top: 8.125rem;
   }
 
   div.accordion-item {
-    div.accordion-collapse {
-      &.collapse.show,
-      &.collapsing {
-        background-color: $accordion-body-active-bg;
-      }
-    }
-    & > a.accordion-button.nav-link {
-      &:hover {
-        color: $accordion-button-active-color;
-        background-color: $accordion-button-active-bg;
-      }
-      &:focus {
-        border-color: unset;
+    border: unset;
+
+    & > a.accordion-button {
+      &:not(.collapsed) {
         box-shadow: unset;
       }
+      &.nav-link {
+        border-radius: $border-radius;
+        &:hover {
+          color: $accordion-button-active-color;
+          background-color: $accordion-button-active-bg;
+        }
+        &:focus {
+          border-color: unset;
+          box-shadow: unset;
+        }
+      }
     }
   }
 

netbox/project-static/package.json

@@ -20,6 +20,7 @@
     "parcel-bundler": "1.12.3",
     "query-string": "^6.14.1",
     "sass": "^1.32.8",
+    "simplebar": "^5.3.4",
     "slim-select": "^1.27.0"
   },
   "devDependencies": {

netbox/project-static/src/colorMode.ts

@@ -1,8 +1,5 @@
 import { getElements, isTruthy } from './util';
 
-type ColorMode = 'light' | 'dark';
-type ColorModePreference = ColorMode | 'none';
-
 const COLOR_MODE_KEY = 'netbox-color-mode';
 const TEXT_WHEN_DARK = 'Light Mode';
 const TEXT_WHEN_LIGHT = 'Dark Mode';

netbox/project-static/src/global.d.ts

@@ -169,3 +169,14 @@ interface ObjectWithGroup extends APIObjectBase {
 declare const messages: string[];
 
 type FormControls = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+type ColorMode = 'light' | 'dark';
+type ColorModePreference = ColorMode | 'none';
+type ConfigContextFormat = 'json' | 'yaml';
+
+type UserPreferences = {
+  ui: {
+    colorMode: ColorMode;
+    showRackImages: boolean;
+  };
+};

netbox/project-static/src/index.ts

@@ -1,4 +1,5 @@
 import 'babel-polyfill';
 import '@popperjs/core';
 import 'bootstrap';
+import 'simplebar';
 import './netbox';

netbox/project-static/src/netbox.ts

@@ -9,6 +9,7 @@ import { initClipboard } from './clipboard';
 import { initDateSelector } from './dateSelector';
 import { initTableConfig } from './tableConfig';
 import { initInterfaceTable } from './tables';
+import { initSideNav } from './sidenav';
 
 function init() {
   for (const init of [
@@ -23,6 +24,7 @@ function init() {
     initClipboard,
     initTableConfig,
     initInterfaceTable,
+    initSideNav,
   ]) {
     init();
   }

netbox/project-static/src/sidenav.ts

@@ -0,0 +1,22 @@
+import { getElement, getElements } from './util';
+
+const breakpoints = {
+  sm: 540,
+  md: 720,
+  lg: 960,
+  xl: 1140,
+};
+
+function toggleBodyPosition(position: HTMLBodyElement['style']['position']): void {
+  for (const element of getElements('body')) {
+    element.style.position = position;
+  }
+}
+
+export function initSideNav() {
+  const element = getElement<HTMLAnchorElement>('sidebarMenu');
+  if (element !== null && document.body.clientWidth < breakpoints.lg) {
+    element.addEventListener('shown.bs.collapse', () => toggleBodyPosition('fixed'));
+    element.addEventListener('hidden.bs.collapse', () => toggleBodyPosition('relative'));
+  }
+}

netbox/project-static/theme-base.scss

@@ -235,11 +235,13 @@ $theme-color-addons: (
   'pink-900': $pink-900,
 );
 
-$font-family-sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-  Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-  'Segoe UI Symbol', 'Noto Color Emoji';
+$font-family-sans-serif: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+  'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 $font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
   'Courier New', monospace;
 
 $accordion-padding-y: 0.8125rem;
 $accordion-padding-x: 0.8125rem;
+
+$sidebar-width: 280px;

netbox/project-static/yarn.lock

@@ -1070,6 +1070,11 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
   integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
 
+"@juggle/resize-observer@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
+  integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
+
 "@mdi/font@^5.9.55":
   version "5.9.55"
   resolved "https://registry.yarnpkg.com/@mdi/font/-/font-5.9.55.tgz#41acd50b88073ded7095fc3029d8712b6e12f38e"
@@ -2022,6 +2027,11 @@ camelcase@^5.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+can-use-dom@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
+  integrity sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -2388,6 +2398,11 @@ core-js@^2.4.0, core-js@^2.5.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
+core-js@^3.0.1:
+  version "3.15.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.15.1.tgz#6c08ab88abdf56545045ccf5fd81f47f407e7f1a"
+  integrity sha512-h8VbZYnc9pDzueiS2610IULDkpFFPunHwIpl8yRwFahAEEdSpHlTy3h3z3rKq5h11CaUdBEeRViu9AYvbxiMeg==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4820,6 +4835,11 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@@ -6957,6 +6977,18 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+simplebar@^5.3.4:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-5.3.4.tgz#7de8d4a07ed3c6612644f4dbc04a8427fdf038ef"
+  integrity sha512-2mCaVdiroCKmXuD+Qfy+QSE32m5BMuZ4ssHvRD1QEPYH95Re/kox7j/Wy0Hje8Uo7LY7O6JK3XSNJmesGlsP8Q==
+  dependencies:
+    "@juggle/resize-observer" "^3.3.1"
+    can-use-dom "^0.1.0"
+    core-js "^3.0.1"
+    lodash.debounce "^4.0.8"
+    lodash.memoize "^4.1.2"
+    lodash.throttle "^4.1.1"
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"