-
Notifications
You must be signed in to change notification settings - Fork 127
[ui] update to bootstrap 5 #1487
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
Good stuff @bgptr. The npm update workflow is something that I should document though, because there is a process to follow to minimize extraneous updates. But the first thing is that you'll need to update npm because we've been on The first step when making changes to npm deps is to start with the package.json and package-lock.json as on
Then to update just one package, three approaches:
Note that with the local node_modules folder populated after doing
Finally, follow it up with an You are welcome to do some other dep updates selectively, but they should be in a separate commit. |
Thanks for resolving the misplaced "X" buttons too! Does the fix apply to the unlock dialog as well? i.e. #1441 |
Thanks for the instructions and sorry for the improper update. (The main problem was that I'm on node 14. It's best for decrediton dev now.) I've fixed the misplaced close icon on unlock dialog too: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@JoeGruffins thanks for the review. Fixed the mentioned misplacement issue. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the review @buck54321, nice catches. I've fixed them. |
This diff updates bootstrap from ^4.6.1 to ^5.1.1 using decred#1148 and https://getbootstrap.com/docs/5.0/migration/ as reference. Changes: - renamed utilities: - .ml-* to .ms-* - .mr-* to .me-* - .float-right* to .float-end* - .pl-* to .ps-* - .pr-* to .pe-* - .text-left to .text-start - .text-right to .text-end - updated bs import pathes in client/webserver/site/src/css/application.scss and expanded with a new line ~bootstrap/scss/utilities/api because there is a change in file structure in bs 5. For example, without this line the d-flex --- utility is not defined. - added .form-label to form labels which are now required. - media-breakpoint-down() uses now the breakpoint itself instead of the next breakpoint in client/webserver/site/src/css/market.scss. - checkboxes (and radio boxes) are now customs by default. Since they set SVG data as background-image, and because it violates the following Content Security Policy directive: img-src 'self' I updated it to img-src 'self' data: in client/webserver/webserver.go. As an alternative approach, we could force back the inputs to be shown as native eg: with appearance: auto;. - fixed a few layout issues not related to the bs update: - layout of 'Authorize Export' and 'Disable Account' modals - Add button top margin and modal close button on the add new wallet form. - background color of tabs on the NewWalletForm and Create button's color in light mode.
+ fix bg of checkboxes in dark mode + ditch unwanted bs table border + fix alignment of the time-in-force checkbox + fix alignment of the remember password checkbox
What do you mean "required"? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great! I'm not so sure that we need the form-label
class everywhere, but it's working as is.
This diff updates bootstrap from
^4.6.1
to^5.1.3
using decred/dcrdata#1872 and https://getbootstrap.com/docs/5.0/migration/ as reference.Closes #1148
Changes:
.ml-*
to.ms-*
.mr-*
to.me-*
.float-right*
to.float-end*
.pl-*
to.ps-*
.pr-*
to.pe-*
.text-left
to.text-start
.text-right
to.text-end
client/webserver/site/src/css/application.scss
and expanded with a new item:~bootstrap/scss/utilities/api
, because there is a change in file structure in bs 5. For example, without this import thed-flex
utility is not defined..form-label
to form labels which are now required.media-breakpoint-down()
uses now the breakpoint itself instead of the next breakpoint inclient/webserver/site/src/css/market.scss
.background-image
, and because it violates the following Content Security Policy directive:img-src 'self'
I updated it toimg-src 'self' data:
inclient/webserver/webserver.go
. As an alternative approach, we could force back the inputs to be shown as native eg: withappearance: auto;
.layout of 'Authorize Export' and 'Disable Account' modals






before
after
background-color of tabs on the NewWalletForm and Create button's color in light mode.


before
after