starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

[PR #6253] [MERGED] #5893: Upgrade Bootstrap, Remove jQuery, Improve Layout #13110

New Issue
Closed
opened 2025-12-29 22:25:28 +01:00 by adam · 0 comments
adam commented 2025-12-29 22:25:28 +01:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/netbox-community/netbox/pull/6253
Author: @thatmattlove
Created: 4/23/2021
Status: ✅ Merged
Merged: 4/27/2021
Merged by: @jeremystretch

Base: feature ← Head: feature

📝 Commits (10+)

  • 9b89afd begin bootstrap 5 migration, update templates
  • 1d9e55c implement layout changes
  • ec38ec8 restructure home stats for new layout
  • 94c25b0 update templates & rendering for bootstrap 5
  • 6fe2f83 scaffold new ui directory
  • fcd7b42 remove legacy libraries
  • 2799d71 add ui dependencies
  • 3b120c0 add styles
  • 912cd22 add javascript
  • 4c60a60 bootstrap 5 template updates

📊 Changes

1063 files changed (+28772 additions, -177819 deletions)

View changed files

📝 .gitignore (+2 -0)
📝 README.md (+10 -6)
➕ docs/media/cable-dark.png (+0 -0)
➕ docs/media/cable-light.png (+0 -0)
➕ docs/media/home-dark.png (+0 -0)
➕ docs/media/home-light.png (+0 -0)
➕ docs/media/prefixes-dark.png (+0 -0)
➕ docs/media/prefixes-light.png (+0 -0)
➕ docs/media/rack-dark.png (+0 -0)
➕ docs/media/rack-light.png (+0 -0)
➕ docs/media/screenshot-cable.png (+0 -0)
➕ docs/media/screenshot-home.png (+0 -0)
➕ docs/media/screenshot-prefixes.png (+0 -0)
➕ docs/media/screenshot-rack.png (+0 -0)
➖ docs/media/screenshot1.png (+0 -0)
➖ docs/media/screenshot2.png (+0 -0)
➖ docs/media/screenshot3.png (+0 -0)
➕ docs/screenshots/index.md (+36 -0)
📝 mkdocs.yml (+16 -0)
📝 netbox/circuits/views.py (+1 -1)

...and 80 more files

📄 Description

Fixes: #5893

Major Change Summary

Implement Package Manager & Bundle Toolchain for JS/CSS Dependencies

Rather than check in JavaScript and CSS dependency libraries to the repo and call each of them in HTML templates, dependencies are managed by Yarn. To add a dependency, run yarn add <package> from netbox/netbox/project-static. ParcelJS is then used to bundle and minify all used dependencies into a single file.

In order to avoid breaking changes in a minor release, the compiled dist files from Parcel are still checked in to the repo. In the future, a build process will be implemented so that compiled JavaScript and CSS files are generated when running upgrade.sh.

Upgrade Bootstrap to Version 5

This is a major change for all HTML templates used by Netbox. Most significantly, commonly used classes such as panel, pull-right and btn-xs from Bootstrap 3 no longer exist in Bootstrap 5. Any plugins using legacy Bootstrap 3 templates need to be updated to new Bootstrap 5 classes.

Remove jQuery

Because jQuery was dropped in Bootstrap 5 and is generally considered to be a legacy library that is no longer necessary with modern JavaScript, jQuery has been completely dropped. All previous JavaScript template blocks and flat files have been migrated to TypeScript, which is transpiled and compiled to vanilla JavaScript ES5 for consistent browser support.

This change also affects plugins that relied on jQuery. While jQuery is no longer in global scope, it may still be used in plugins by loading the library in a <script/> tag. For example:

<script type="text/javascript" src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>

However, this does add a reliance on internet connectivity in order to load. Alternatively, plugins using jQuery can be migrated to vanilla JavaScript (the {% block javascript %} is still honored). See You Might Not Need jQuery for comparisons between the two.

Remove Select2

Select2, a jQuery plugin for creating API-backed select elements, has been removed from Netbox as part of the jQuery removal. SlimSelect, which is well-typed and does not rely on jQuery, has been implemented as a replacement.

Improve Layout

Most notably, a dashboard-like side navigation layout has been implemented.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/netbox-community/netbox/pull/6253 **Author:** [@thatmattlove](https://github.com/thatmattlove) **Created:** 4/23/2021 **Status:** ✅ Merged **Merged:** 4/27/2021 **Merged by:** [@jeremystretch](https://github.com/jeremystretch) **Base:** `feature` ← **Head:** `feature` --- ### 📝 Commits (10+) - [`9b89afd`](https://github.com/netbox-community/netbox/commit/9b89afd6dcdb1408934a5676d8d6a9bcdc44206d) begin bootstrap 5 migration, update templates - [`1d9e55c`](https://github.com/netbox-community/netbox/commit/1d9e55ca6e0a7bc0b1e5254d3ac6e18accd63541) implement layout changes - [`ec38ec8`](https://github.com/netbox-community/netbox/commit/ec38ec80046d84acf401e85419b2c6cf83f239dc) restructure home stats for new layout - [`94c25b0`](https://github.com/netbox-community/netbox/commit/94c25b0ff4e0dcd4ee2737ced53b81bc9c3dde0c) update templates & rendering for bootstrap 5 - [`6fe2f83`](https://github.com/netbox-community/netbox/commit/6fe2f83435f0146c111b4f466b42076f23206415) scaffold new ui directory - [`fcd7b42`](https://github.com/netbox-community/netbox/commit/fcd7b4294122a6153d9f0f5a948caeee931fb864) remove legacy libraries - [`2799d71`](https://github.com/netbox-community/netbox/commit/2799d71e935965648961a5f52452aa7108e9cd6f) add ui dependencies - [`3b120c0`](https://github.com/netbox-community/netbox/commit/3b120c0372a884068a7d4687c097014a2003666c) add styles - [`912cd22`](https://github.com/netbox-community/netbox/commit/912cd220cc5c7977fea270a89c6e23abab546575) add javascript - [`4c60a60`](https://github.com/netbox-community/netbox/commit/4c60a602b958a4e342406be9d460c5d3a635b1eb) bootstrap 5 template updates ### 📊 Changes **1063 files changed** (+28772 additions, -177819 deletions) <details> <summary>View changed files</summary> 📝 `.gitignore` (+2 -0) 📝 `README.md` (+10 -6) ➕ `docs/media/cable-dark.png` (+0 -0) ➕ `docs/media/cable-light.png` (+0 -0) ➕ `docs/media/home-dark.png` (+0 -0) ➕ `docs/media/home-light.png` (+0 -0) ➕ `docs/media/prefixes-dark.png` (+0 -0) ➕ `docs/media/prefixes-light.png` (+0 -0) ➕ `docs/media/rack-dark.png` (+0 -0) ➕ `docs/media/rack-light.png` (+0 -0) ➕ `docs/media/screenshot-cable.png` (+0 -0) ➕ `docs/media/screenshot-home.png` (+0 -0) ➕ `docs/media/screenshot-prefixes.png` (+0 -0) ➕ `docs/media/screenshot-rack.png` (+0 -0) ➖ `docs/media/screenshot1.png` (+0 -0) ➖ `docs/media/screenshot2.png` (+0 -0) ➖ `docs/media/screenshot3.png` (+0 -0) ➕ `docs/screenshots/index.md` (+36 -0) 📝 `mkdocs.yml` (+16 -0) 📝 `netbox/circuits/views.py` (+1 -1) _...and 80 more files_ </details> ### 📄 Description ### Fixes: #5893 ### Major Change Summary #### Implement Package Manager & Bundle Toolchain for JS/CSS Dependencies Rather than check in JavaScript and CSS dependency libraries to the repo and call each of them in HTML templates, dependencies are managed by [Yarn](https://yarnpkg.com/). To add a dependency, run `yarn add <package>` from `netbox/netbox/project-static`. [ParcelJS](https://parceljs.org/) is then used to bundle and minify all _used_ dependencies into a single file. In order to avoid breaking changes in a minor release, the compiled dist files from Parcel are still checked in to the repo. In the future, a build process will be implemented so that compiled JavaScript and CSS files are generated when running `upgrade.sh`. #### Upgrade Bootstrap to Version 5 This is a major change for all HTML templates used by Netbox. Most significantly, commonly used classes such as `panel`, `pull-right` and `btn-xs` from Bootstrap 3 no longer exist in Bootstrap 5. Any plugins using legacy Bootstrap 3 templates need to be updated to new [Bootstrap 5](https://getbootstrap.com/) classes. #### Remove jQuery Because jQuery was dropped in Bootstrap 5 and is generally considered to be a legacy library that is no longer necessary with modern JavaScript, jQuery has been completely dropped. All previous JavaScript template blocks and flat files have been migrated to [TypeScript](https://www.typescriptlang.org/), which is transpiled and compiled to vanilla JavaScript ES5 for consistent browser support. This change also affects plugins that relied on jQuery. While jQuery is no longer in global scope, it may still be used in plugins by loading the library in a `<script/>` tag. For example: ```html <script type="text/javascript" src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script> ``` However, this does add a reliance on internet connectivity in order to load. Alternatively, plugins using jQuery can be migrated to vanilla JavaScript (the `{% block javascript %}` is still honored). See [You Might Not Need jQuery](http://youmightnotneedjquery.com/) for comparisons between the two. ##### Remove Select2 [Select2](https://select2.org/), a jQuery plugin for creating API-backed select elements, has been removed from Netbox as part of the jQuery removal. [SlimSelect](https://slimselectjs.com/), which is well-typed and does not rely on jQuery, has been implemented as a replacement. #### Improve Layout Most notably, a dashboard-like side navigation layout has been implemented. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2025-12-29 22:25:28 +01:00
adam closed this issue 2025-12-29 22:25:28 +01:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#13110
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?