Update bootstrap & add light mode #324
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Boostrap version changed from 3.3.1 to 5.3.3 Add bootstrap-icons font
Bootstrap icon classes have changed from glyphicon to bi. Rename everything.
Bootstrap icon classes have changed from glyphicon to bi. Rename everything.
Bootstrap navbar classes have changed with the new version --> update them for main navbar
Instead we want to use bootstrap classes when it's possible (it will allow to use boostrap light themes)
With new version of bootstrap, the active class has to be added to nav-link and not not nav-item element
Stats tab had id "incidents-nav", renamed it to stats-nav
- Add nav-item & nav-link classes as needed by new bootstrap - Pretty stars icon for starred events :D
With new bootstrap version : - href have to be data-bs-target - data-toggle have to be data-bs-toggle
Add bootstrap classes nav-item & nav-link for details_tab.html files
Add css & html class for incident details page top bar
- Add the right bootstrap classes to form columns (for width) - fix close button class (btn-close instead of close) - replace data-dismiss by data-bs-dismiss - Replace img-responsiv by img-fluid
Add bootstrap class for padding (p-4)
Custom css for links, compatible with the bootstrap data-bs-theme for color
We need to use bootstrap classes for incident widget colors, to be compatible with data-bs-theme = Light / dark
Use bs class to be compatible with data-bs-theme
Add whitespace between button & text for action supmenu
Add bs class for footer color, to be compatible with data-db-theme
Bootstrap class to hide items has changed
Use btn-sm instead
Update to new bootstrap version : - Replace data-dismiss by data-bs-dismiss - class close is now btn-close - close button is displayed on the right of the modal header
Margins are not automatically set for new bootstrap forms --> add mb-3 everywhere
Repace custom css height by bootstrap class (lh-1) --> the text isn't cut anymore
Add bs class modal-lg
- Bootstrap panel is deprecated, use card instead - Use bs class for colors, to be compatible with data-bs-theme - Add some space between cards
Add bs class to display field name & value on the same line in sendemail form
Fix spacing, borders, etc
With new bootstrap version : - data-toggle is now data-bs-toggle - data-target is now data-bs-target
Fields added when we check is_incident on new inc form were hidden : we needed to replace "collapse in" by "collapse show" with new bootstrap version
hidden deprecated with new bootstrap version
We needed to add type="button" for cancel button, otherwise it posts the form
- We need to use bootstrap class to have a yellow background for new nugget item - Adapt js to display nuggets tab : now we have a "button" and not a "a" anymore
User bi instead of glyphicon
Use bs classes for widget colors + button + spacing
So we create a custom one, using boostrap vars so it's compatible with data-bs-mode
We don't want to add "active" class to stats tab dropdown items --> We add active class only to the first element
light_mode is a choicefield which allows the user to choose between light and dark mode interface
The user can choose here his preferred light mode (default = light)
Apply data-bs-theme based on the user choice (see user.profile.light_mode)
New bootstrap version --> data-target is now data-bs-target, data-toggle is data-bs-toggle
We need it to not submit the form when cancelling
Upgrade select2 to latest version
Adapt select2 to boostrap light mode (compatible with dark mode by using bootstrap var for colors)
- Add new theme option to select2
- Add new bootstrap theme option to select2 - When needed, add new css classes - Reset form when a todo is submitted
- Add new bootstrap theme option to select2 - When needed, add new css classes
Adapt attributes & sandbox dashboards : - Add new bootstrap theme option to select2 - When needed, add new css classes
Add text-break css class for attributes values
Add text-break css class for too long strings in: - Incident subjects (in main dashboard & inc details page) - Incident description - Comments - Artifacts
Custom CSS to make EasyMDE play nice with Bootstrap colors
We want grey instead of ugly white / black
- Add popper js file - Replace attr "data-original-title" by "data-bs-original-title"
- Use bootstrap attrs for tooltip instead of sticky_tooltip function - Enable the tooltips as explained here : https://getbootstrap.com/docs/5.2/components/tooltips/#enable-tooltips
- bind artifact click when document is ready - center emailform using bootstrap classes - use data-bs-toggle instead of data-toggle - add the right css class for pills display (see https://getbootstrap.com/docs/5.2/components/navs-tabs/#pills)
- import popper - use data-bs-toggle instead of data-toggle - enable tooltips as described here https://getbootstrap.com/docs/5.2/components/tooltips/#enable-tooltips
- Adapt to bootstrap light mode - Clean comments
Add type="button" to avoid submitting the form by clicking on cancel, that's not what we want
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Update boostrap version from 3.3.1 to 5.3.3
Add light / dark mode option