Attack cost calculator layout changes and bug fixes

[hypernoob]

Images:

• Before, Mobile
• After, Mobile
• Before, Firefox
• After, Firefox

Notable Changes:

• Correctly display current network name
• Load additional costs from query string
• Fixed step value of exchange rate input
• Fixed input and select widths on firefox
• Improved layout of parameter sections
• Fixed margin and removed z-index of legend
• Format units consistently in the calculation
• Sticky total attack cost to the bottom
• PoW section: typo aquire > acquire

[chappjc]

Looks nice. Will need testing @dnldd, when you get a chance. BTW, please be sure to test with the browser dev console (F12) opened so you can see console warnings and errors.

[dnldd]

Sure thing, will do.

[dnldd]

Changes made look good but I did notice a couple of UX related things. The miner selector on some displays takes up a whole line, it'd be ideal if it was only allowed to take the remaining space on a line or a portion of what's left after the l"Mining device" label.

I also noticed on most screens the "Total Attack Cost" can only be seen after scrolling down. Considering that's the most important figure on the page I think it should be visible at all times. Users will be able to see the changes they make to the attack parameters at a glance instead of having to scroll to bring the element in view. It'd be great to make that element stick to the bottom of the view making it visible regardless of scrolling.

[dnldd]

I think the fields should have their text centered, currently it looks like there is a lot of white space left even when the fields are populated. This is regardless of the screen size.

Do you plan on making the changes suggested for the "Total Attack Cost" in a separate PR? It's currently still hidden until its scrolled to.

[hypernoob]

What's your browser? I tested on Chrome and Firefox. Works fine on both.

[dnldd]

I tested on firefox, check again.

[dnldd]

Hmm, pulled the PR again, ensured cache was disabled, rebuilt dcrdata and I'm still getting this.

[hypernoob]

It seems the content area is too tall for your actual screen so you can't see the sticky unless you scroll down the outer scrollbar.

[dnldd]

Hmm, still not working as expected for me. I can see the modifications you made for Total Attack Cost (py-2 position-sticky summary) but its not taking effect for me, tested on firefox and chrome.

Please try testing on simnet at your end and lets see if you encounter similar issues.

[hypernoob]

Working fine on simnet.

BTW I noticed yours is loading the .scss files instead of the bundled style.css.

[dnldd]

Thanks for that. I was using npm run build initially, switching to npm run watch sorted it out for me.

[dnldd]

Looks good, still think the space taken up by input boxes on some s could be bettered but that can be tinkered with later.