Bootstrap, the framework that drives the style on the web portal, has been upgraded from v3 to v5 as of Beta v0.101. This was necessary due to Ember dropping support for v3 in the near future.
Unfortunately, v5 is not backwards-compatible. That means there are a number of things that had to change in the web portal code. If you’re just using the core code, you don’t have to do anything. Just let me know if something looks out of whack.
If you have custom web portal code and/or significant custom styling, you probably want to hold off on upgrading until you have had a chance to shake out any style issues on your test server. This migration guide should help.
Note! This is not meant to be an all-inclusive list of the changes between Bootstrap v3 and v5, merely the ones that I ran into while migrating the core web portal code.
If you run into trouble, don’t hesitate to ask.
Tab Controls
Tab control classes changed.
Use data-bs-toggle instead of data-toggle.
The list items require the nav-item and nav-link classes, and the list element needs the tablist role. Finally the ‘active’ class goes in the link, not the list item.
Put all together, it should look like this:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"><a data-bs-toggle="tab" class="nav-link active" href="#general">General</a></li>
<li class="nav-item"><a data-bs-toggle="tab" class="nav-link" href="#profile">Profile</a></li>
</ul>
For the tab panes, show is used in place of in
Old: tab-pane fade in active
New: tab-pane fade show active
Buttons
btn-default no longer exists and should be replaced with btn-secondary
CSS Classes Renamed
label is now badge
panel is now card
Be careful if doing a find/replace on these, since the words may appear in places outside of CSS styling.
Rows and Columns
v5 really doesn’t like having a row without a column or vice-versa. The spacing gets weird. Make sure to wrap all your columns in rows.
<div class="row">
<div class="col">Some column</div>
</div>
Tables
Similarly, v5 is stricter about thead and tbody elements. th elements must be inside of the header, and tr elements inside of the body. The proper form is:
<table class="table">
<thead>
<th>Column 1 Heading</th>
<th>Column 2 Heading</th>
</thead>
<tbody>
body rows and columns go here
</tbody>
</table>
Pull Right
The CSS class pull-right is now named float-right.
I got rid of most uses of this in Ares though by making a more standard action buttons class. I advise using this for your page control buttons rather than pull-right/rows/columns.
Old:
<div class="row">
<div class="col col-xs-12">
<div class="pull-right">
<button {{action "save"}} class="btn btn-primary">Save</button>
</div>
</div>
</div>
New, much simpler:
<div class="action-buttons">
<button {{action "save"}} class="btn btn-primary">Save</button>
</div>
Dropdown Menus
The dropdown menu classes changed a bunch in v5. Fortunately there’s now a DropDown widget that will take care of it for you:
<DropdownMenu @id="sceneMenu" @title="Manage Scene">
<li><LinkTo @route="scene-edit" @model={{this.model.id}} class="dropdown-item">Edit Scene</LinkTo></li>
<li><a href="#" {{action 'unshareScene'}} class="dropdown-item">Unshare Scene</a></li>
</DropdownMenu>
Just give it an ID that’s unique to the page, a title, and fill it with li items. Make sure each link inside the li item has the dropdown-item class.
Custom Scene Menus
If you have any custom scene menu items, make sure their links have the dropdown-item class. For example:
<li><a href="#" {{action (mut this.selectSkillRoll) true}} class="dropdown-item">Roll Ability</a></li>
Badge Colors
Badges (formerly known as labels) now use bg-primary instead of label-primary for their formatting. Be advised that Bootstrap gives these classes the !important declaration. So if your color override isn’t working, you may need to add !important to it. For example:
.bg-primary {
background-color: $primary-color !important;
}
Screen Width Controls
The classes that control whether certain elements are hidden/shown at different screen widths are different. See display property for details.
For example, instead of using hidden-lg to hide something on large or higher displays, you’d use d-lg-none.