Upgrade to bootstrap 4 - #62
Conversation
|
@codyrancher I wasn't too bothered about the colours, but looking at it again, I will try and make the button colours the same. I'll also look at the styling of the headers in the panel as they have lost their boldness. I removed logout as on my Rancher it didn't do anything and I don't think we want to log the user out from this UI. |
Sounds good, if you change your mind feel free to merge. I'll do another pass if more changes land. |
|
@codyrancher Updated with more consistent styling - screenshot added |

Summary
Upgrades Bootstrap from 3.4.1 to 4.6.2, swaps the removed Glyphicons for
@rancher/icons, and cleans up the resulting Bootstrap-4 compatibility issues (class renames, dropdown/input-group markup, modal sizing).We'll need to update Rancher to pick up version
1.2.0once this is merged and published.FYI: Choose Bootstrap 4 rather than 5 because this is less change at this point.
Changes
ui-dashboardrather thanuifor the path.Detail:
bootstrap.bundle.jsso Popper is included for dropdowns/tooltips).@rancher/icons2.0.63: removed allglyphicon-*references, mapped each to the closest rancher-icons glyph (icon icon-*). Font files are copied intodist/<v>/fonts/andstyle.cssis concatenated into the SCSS pipeline.font-display: blockis stripped so a font-load failure shows a fallback glyph instead of nothing.templates/*.hbs,partials/*.hbs):col-xs-*→col-*btn-default→btn-secondary,btn-xs→btn-sminput-group-addon/input-group-btn→ v4input-group-prepend/input-group-appendwith.input-group-text<ul><li><a>to<div><a class="dropdown-item">;pull-right→dropdown-menu-rightlogoutoption/method are kept for the embedding host contract)src/HTMLApi.js): also setmax-widthwhen sizing.modal-dialog— v4's defaultmax-width: 500pxwas capping the intended 750px. Footer buttons nowbtn btn-sm btn-secondary(v4 has nobtn-default).templates/modal.hbsfooter switched fromtext-align: centertojustify-content: centersince.modal-footeris now a flexbox.src/HTMLApi.js,vendor/JSONFormatter.js): collapse toggle usesicon icon-plus/icon icon-minusinstead of glyphicons.styles/main.scss): dropped the Glyphicons@font-face, added a.wellcompat shim, added a.iconbase rule (display: inline-block; line-height: 1; vertical-align: -0.125em) so icons align with adjacent text.scripts/build): switched tobootstrap.bundle.js, wired in rancher-icons, unset the deprecatednpm_config_*env vars inherited from an outernpm run(silencesUnknown env configwarnings), and passes--no-fundtonpm install.Screenshots