feat: Moving form and result to two cols

[ImTheCodeFarmer]

Still a WIP but moving the form and results to two columns. Need to clean the code a bit and take care of the case where the result is really short. This causes a large gap between the form and result.

Chad's checklist of things to get looking 💯

• Error messages – try incrementing here http://localhost:3000/#/v2.counter.raendev.testnet/Increment
• View methods with short return values http://localhost:3000/#/v2.tenk.testnet/Admins
• View methods with long, unwrappable return values http://localhost:3000/#/v2.tenk.testnet/NftMetadata
• View methods with long wrappable return values http://localhost:3000/#/rec.raendev.near/GetRecommendations
• View methods with short inputs and tiny return values
  • http://localhost:3000/#/v2.tenk.testnet/TotalCost?data=%257B%2522args%2522%253A%257B%2522minter%2522%253A%2522chadoh.testnet%2522%252C%2522num%2522%253A1%257D%257D
  • http://localhost:3000/#/v2.tenk.testnet/Whitelisted?data=%257B%2522args%2522%253A%257B%2522account_id%2522%253A%2522chadoh.testnet%2522%257D%257D
• Change methods when not signed in (in addition to making sure it looks generally, make sure "Forbidden" error message width matches other content) http://localhost:3000/#/v2.tenk.testnet/NftApprove
• Change methods with short input & output (this is the only one I sign into out of all the links here http://localhost:3000/#/v2.counter.raendev.testnet/Decrement)
• Make sure this one doesn't jump on load – not sure what makes it different from the others http://localhost:3000/#/v2.tenk.testnet/RemainingAllowance
• Double-check home page http://localhost:3000/
• Double-check contract landing (no method selected) http://localhost:3000/#/v2.counter.raendev.testnet

[github-actions]

PR Preview Action v1.1.1
🚀 Deployed preview to https://raendev.github.io/admin/pr-preview/pr-47/
on branch gh-pages at 2022-09-30 15:04 UTC

[willemneal]

@jhammond2012 @chadoh It seems that the preview isn't working for me in brave or firefox.

[chadoh]

Can't figure out why the PR Preview isn't showing up, but I was able to look at it locally. It's looking pretty good. My biggest current concerns are:

• most pages are now too wide, since the --max-width variable is used by container, which is used all over, such as on the home page
• feels pretty jumpy. for example, flashes of wide content before content finishes loading, followed by a repaint to narrow layout. even in the best cases, this feels a little disorienting to me. This might be hard to fix in the general case; I'm up to have a call to chat through possible solutions.

[ImTheCodeFarmer]

@chadoh I moved the container class around a little bit so I could dynamically add wide to the class. Have a look at let me know if you feel this solution is okay.

[chadoh]

This one still jumps at first page load: http://localhost:3000/#/v2.tenk.testnet/RemainingAllowance

[chadoh]

I added a list of things to check to the PR description, and checked off the ones that look good to me.

The jumping is much more tolerable in this version, since it happens less, and only at more expectable times. Still noticing it here and there though, as mentioned above.

You'll notice various issues as you click through. Some of the biggest ones currently worth noting:

• loading wheel no longer shown during network request
• error messages not shown at all

[chadoh]

why so many yarn.lock changes? no corresponding package.json changes are present

[ImTheCodeFarmer]

why so many yarn.lock changes? no corresponding package.json changes are present

That's a good question. Did you use NPM before instead? I haven't installed/changed anything regarding that. Only ran yarn install

[chadoh]

@jhammond2012 ah, right, this repo is not using yarn. I tried to find the old commit where we switched to npm. At the time it fixed a deploy bug; I think it might have been related to PR Preview deploys when using Gatsby or something like that.

We're not using that stack anymore and could probably switch back to Yarn, but let's do that in its own PR and remove the yarn.lock file for now.