-
Notifications
You must be signed in to change notification settings - Fork 174
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
UI: Update to bootstrap 5 and cleanup django templating
This is a squashed commit that encompasses all the work that has gone into updating to bootstrap 5 and django templating cleanup. About boostrap and CSS: - Update bootstrap CSS from 4.6.0 to 5.3.0 and fix broken layout and components as a result of the update - Removed separate light/dark themes via bootstrap-darkly and bootstrap-flatly: bootstrap 5.3 features a new built-in dark theme - Re-worked the dark/light theme selection to match the new bootstrap built-in dark theme including pygments highlighting for pretty-printed output - Removed jquery, it is no longer required with bootstrap - Re-worked implementation of file line highlighting since it relied on jquery - Fixed tooltip implementation (i.e, for task tags) since the implementation in bootstrap had changed About site-wide minor cleanups and improvements: - Font size made generally larger and more consistent - Improved the about and CLI argument modals - Improved display for the report and CLI argument buttons - Improved the playbook report header card - Adjusted search accordions to match new bootstrap theme - Improved size and consistency of many card headers - Improvements to responsiveness of layout at smaller (e.g, mobile) resolutions About django templating: - Large chunks of templating were moved out to partials/tables and partials/search in order to improve readability. - Round of template cleanups and fixes as reported by djlint
- Loading branch information
Showing
47 changed files
with
1,797 additions
and
1,543 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,7 @@ | ||
| Vendored static assets | ||
| ====================== | ||
|
|
||
| Via: https://getbootstrap.com/docs/4.6/getting-started/introduction/ | ||
| Via: https://getbootstrap.com/docs/5.3/getting-started/download/ (https://github.com/twbs/bootstrap/releases/download/v5.3.0/bootstrap-5.3.0-dist.zip) | ||
|
|
||
| - ``js/jquery-3.5.1.slim.min.js``: https://code.jquery.com/jquery-3.5.1.slim.min.js | ||
| - ``js/bootstrap.bundle.min.js``: https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js | ||
|
|
||
| Via: https://bootswatch.com/ | ||
|
|
||
| - ``css/bootstrap-darkly.min.css``: https://bootswatch.com/4/darkly/bootstrap.min.css | ||
| - ``css/bootstrap-flatly.min.css``: https://bootswatch.com/4/flatly/bootstrap.min.css | ||
|
|
||
| We have a local edit of the bootswatch files to remove unnecessary google font imports, see: https://github.com/thomaspark/bootswatch/issues/573 | ||
| - ``bootstrap-5.3.0-dist/css/bootstrap.min.css``: css/bootstrap.min.css | ||
| - ``bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js``: js/bootstrap.bundle.min.js |
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
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
Large diffs are not rendered by default.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| /* Inspired by https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript */ | ||
| /*! | ||
| * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) | ||
| * Copyright 2011-2023 The Bootstrap Authors | ||
| * Licensed under the Creative Commons Attribution 3.0 Unported License. | ||
| */ | ||
|
|
||
| const getStoredTheme = () => localStorage.getItem('theme') | ||
| const setStoredTheme = theme => localStorage.setItem('theme', theme) | ||
|
|
||
| const getPreferredTheme = () => { | ||
| const storedTheme = getStoredTheme() | ||
| if (storedTheme) { | ||
| return storedTheme | ||
| } | ||
|
|
||
| return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' | ||
| } | ||
|
|
||
| const setTheme = theme => { | ||
| if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { | ||
| document.documentElement.setAttribute('data-bs-theme', 'dark') | ||
| } else { | ||
| document.documentElement.setAttribute('data-bs-theme', theme) | ||
| document.getElementById('dark-light-toggle-btn').setAttribute('checked', 'true') | ||
| } | ||
| if (theme === 'light') { | ||
| document.getElementById('dark-light-toggle-btn').removeAttribute('checked') | ||
| document.getElementById("pygments-dark-css").disabled = true; | ||
| document.getElementById("pygments-light-css").disabled = false; | ||
| } else { | ||
| document.getElementById('dark-light-toggle-btn').setAttribute('checked', 'true') | ||
| document.getElementById("pygments-dark-css").disabled = false; | ||
| document.getElementById("pygments-light-css").disabled = true; | ||
| } | ||
| } | ||
|
|
||
| setTheme(getPreferredTheme()) | ||
|
|
||
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { | ||
| const storedTheme = getStoredTheme() | ||
| if (storedTheme !== 'light' && storedTheme !== 'dark') { | ||
| setTheme(getPreferredTheme()) | ||
| } | ||
| }) | ||
|
|
||
| document.getElementById('dark-light-toggle-btn').addEventListener('click',()=>{ | ||
| if (document.documentElement.getAttribute('data-bs-theme') == 'dark') { | ||
| setTheme('light') | ||
| setStoredTheme('light') | ||
| } | ||
| else { | ||
| setTheme('dark') | ||
| setStoredTheme('dark') | ||
| } | ||
| }) |
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
Oops, something went wrong.