Skip to content

Conversation

bgptr
Copy link
Contributor

@bgptr bgptr commented Feb 24, 2022

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:

  • 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 paths in 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 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
      before
      Screenshot 2022-02-24 at 22 40 23
      Screenshot 2022-02-24 at 22 40 50
      Screenshot 2022-02-24 at 22 41 15
      after
      Screenshot 2022-02-24 at 22 46 14
      Screenshot 2022-02-24 at 22 46 19
      Screenshot 2022-02-24 at 22 46 24

    • background-color of tabs on the NewWalletForm and Create button's color in light mode.
      before
      Screenshot 2022-02-24 at 22 38 37
      after
      Screenshot 2022-02-24 at 22 44 10

@chappjc
Copy link
Member

chappjc commented Feb 25, 2022

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 lockfileVersion 2 since npm 7 (I'm on 8 now). This is the main reason for the huge deletion count in your current diff.

The first step when making changes to npm deps is to start with the package.json and package-lock.json as on master and do an npm clean-install (npm ci) rather than npm install so that it installs the versions from the package-lock.json file into node_modules. Doing npm install first when there is no node_modules folder yet will fetch latest from the internet of whatever satisfies package.json (too much) and install those instead of what's in package-lock.json.

git restore --source master package.json package-lock.json
npm clean-install                         # populate node_modules as per package-lock.json
git add package.json package-lock.json    # checkpoint

Then to update just one package, three approaches:

  • Just edit the package.json manually then do npm i to update the package-lock.json.
  • Use ncu (i.e. ncu --target latest -f bootstrap -u) followed by npm i to apply. The ncu approach is usually most useful when updating multiple packages across major versions.
  • npm install bootstrap@5.1.3 -D, which updates package.json and package-lock.json in one shot. I'd do this.

Note that with the local node_modules folder populated after doing npm clean-install at the beginning, doing npm install subsequently will minimally update the package-lock.json rather than trying to get the latest acceptable versions of everything from the npmjs registry.

$  npm install bootstrap@5.1.3 -D --no-fund

added 1 package, removed 2 packages, changed 1 package, and audited 686 packages in 1s

found 0 vulnerabilities

$  git diff --stat
 client/webserver/site/package-lock.json | 68 ++++++++++++++++++++++++++------------------------------------------
 client/webserver/site/package.json      |  2 +-
 2 files changed, 27 insertions(+), 43 deletions(-)

$  git add package.json package-lock.json

Finally, follow it up with an npm dedup. It may change nothing, but I always do this before committing.

You are welcome to do some other dep updates selectively, but they should be in a separate commit. npm out says there's a few patch updates, but nothing looks required right now.

@chappjc
Copy link
Member

chappjc commented Feb 25, 2022

Thanks for resolving the misplaced "X" buttons too! Does the fix apply to the unlock dialog as well? i.e. #1441

@bgptr
Copy link
Contributor Author

bgptr commented Feb 25, 2022

@chappjc

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:

image

Copy link
Member

@JoeGruffins JoeGruffins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just saw one part that looked different, the DCR here and for market orders:

image

Tested with:
node v17.6.0
npm 8.5.2

@bgptr
Copy link
Contributor Author

bgptr commented Mar 3, 2022

@JoeGruffins thanks for the review. Fixed the mentioned misplacement issue.

Copy link
Member

@buck54321 buck54321 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few things I noticed.

  1. The Balances table has extra borders between the rows.
  2. Checkboxes are no longer aligned
  3. Checkbox color has changed

new -> old
image

@bgptr
Copy link
Contributor Author

bgptr commented Mar 3, 2022

Thanks for the review @buck54321, nice catches. I've fixed them.

bgptr added 7 commits March 5, 2022 10:44
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
@bgptr bgptr force-pushed the upgrade-bs-to-5 branch from 94bdd91 to 746f958 Compare March 5, 2022 09:51
@buck54321
Copy link
Member

added .form-label to form labels which are now required.

What do you mean "required"?

Copy link
Member

@buck54321 buck54321 left a 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.

@bgptr
Copy link
Contributor Author

bgptr commented Mar 5, 2022

It's a breaking change. I read it in the migration guide:
image

It means margin-bottom: 0.5rem;

@chappjc chappjc merged commit 24db41e into decred:master Mar 14, 2022
@chappjc chappjc added this to the 0.5 milestone Apr 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ui: update to bootstrap 5
4 participants