More use of tabs

[daniel-soli]

After one comment about using tabs for showing the nft holders, I came to think about, why not use this also on the accounts details page for showing the transactions in seperate tab. This way the "issue" with jumping to the top would be an issue.

What do you think? Here's how it would look on large and small devices (don't look at the order of tabs):

Small screens:

The heigth of the page would also become much denser. Should ofc also be done in the NFT details page to enhance it there also.

[daniel-soli]

Would love your view on this @modersohn and @fudgebucket27 :)

[modersohn]

Seems like you can't wait to do it.

I see points for it and against it. But I absolutely don't like how the tabs behave on mobile. Very hard to discover, not all visible etc.

What I've learned while doing the NFT grid as a component #193 is that when switching tabs, the render elements that were on the old tab are actually all discarded. So introducing tabs does have unexpected consequences, though I don't see an urgent problem here.

[modersohn]

Have been thinking some more about the tabs. One thing that is pretty impractical is similar to why you added a 2nd bottom pager to the NFT grid - once you scrolled all the way to the end, of .e.g the NFTs, and you decide you now want to see, say transactions, you need to scroll all the way back up to change tabs.

Maybe expandable sections are a better alternative? Have seen this on other sites, but never done myself with blazor.

[daniel-soli]

Yeah, that's a good point. I was thinking about a way to make the tabs stick when on smaller devices, but that would mean a lot of customization to the components and too much work for now.

Did you think of something like this?

[modersohn]

Yeah, the simple expansion panels actually look perfect - that way you wouldn't need to manually close the panel you're done with! And who knows we might even find usages for icons etc.

[daniel-soli]

There's two options here. Multiple expandable panels and only one at a time. One at a time would perhaps be what you described :)

Tried it out and it looks like this:

Closed:

Closed mobile:

Open:

Open Mobile:

Needs perhaps some tweaking with width size of table and cards

[modersohn]

Not bad! How do you like it?

And yeah the panels get very wide, but if we could move the dropdown icon to the left of the text, it wouldn't matter and them being expandable is more obvious.

[daniel-soli]

Damn, it was available in the component already. DisableGutters :)

Edit: Yeah I think that also is possible. I really like them actually :) It was a very nice suggestion and idea!

[modersohn]

OK then, where's the PR? Just kidding, but if you feel like it, please make a PR, ideally with the NFT details page too!

[daniel-soli]

Arrow on the left side. Was a bit more complicated, but doable without much extra :)

I'll add a PR for it with also the NFT details page