Apps: Trim details to the summary, expand shows all

[jacogr]

Goal:

Just show enough information, but encourage clicking for me.

Background:

With Extrinsics display (use this as a trial), we should rather then showing the full documentation, rather only show part. For example, currently we have -

This will be better served with "Set the current time. This call should be invoked exactly once per block. It will panic..." - just a single line, when we expand, we show the full.

Actions:

• Easier said than done. These details are completely managed without JS involvement, so while CC can do text-overflow and ellipsis, this ask may just be impossible with a pure CSS solution
• Investigate - would need to see where it ends up
• With a _clean_ solution, apply to events as well

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__This issue now has a funding of 60.0 DAI (60.0 USD @ $1.0/DAI) attached to it.__

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  
  
  
  • Want to chip in? Add your own contribution here.
  
  
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  
  
  • $94,625.15 more funded OSS Work available on the Gitcoin Issue Explorer
  
  

[gitcoinbot]

@deeayeen Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[deeayeen]

@gitcoinbot

Yes I am currently finding a viable solution.

[gitcoinbot]

@deeayeen Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[pbteja1998]

@jacogr is this still required? If so, can I work on this? I have already applied through gitcoin.

[jacogr]

Still required. A maybe slightly tricky enhancement, but really will help a lot with the overall UI since we use this extensively.

Thanks for the interest, if this ticket returns to Open we will re-look, and will keep it as a bounty.

[pbteja1998]

So, this is not open now?

[deeayeen]

@jacogr
I have stopped working on this as other obligations have come up, someone else can take over 👍

[Web3Foundation]

@pbteja1998 you’ve been approved to start working now

[Web3Foundation]

@pbteja1998 are you still working on this?

[pbteja1998]

Yes, I am still trying to find a way to implement this with css alone. I did not find anything yet.

[pbteja1998]

By the way, the expansion that is happening when clicked, is it done with js or css? I could not find any related js for that.

[jacogr]

All just <details><summary>...header...</summary>... body ...</details>standard HTML - i.e. https://github.com/polkadot-js/apps/blob/master/packages/app-explorer/src/Events.tsx#L57 and https://github.com/polkadot-js/apps/blob/master/packages/app-explorer/src/BlockInfo/Extrinsics.tsx#L65

So the options are -

1. CSS that works on the details/summary combination - if impossible, then 2 below
2. Adding a small Expand component to packages/ui-app and replacing occurrences of detail/summary

[Web3Foundation]

@pbteja1998 thanks for the update, as you can see @jacogr left you some comments, let us know if you need any more help!

[rossbulat]

Just my two cents on this - may be of help to the active worker.

• A CSS implementation may work if ellipses rules are conformed to. The show all toggle would remove height constraints and text-overflow properties

• This JS String modifier would condense the string to the nearest word, but would need an additional calculation on how long that string can be based on container width

[rossbulat]

Other possibly-useful strategies (if JS implementation needed):

• Using a fixed width character font sheet, whereby all characters conform to the same width and therefore easy to calculate where cut off point is. Worth a look on fontsquirrel.com

• Go deeper to ascertain character width ratios on the chosen font to again make that calculation possible.

[gitcoinbot]

@pbteja1998 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[pbteja1998]

@jacogr How is it expanding when clicked on it. Where is the related css code?(Assuming that there is no js involved) I found out the html, but I am still unable to figure out how it is expanding when clicked on it. Is some class is being added to details or summary tag? Because when I inspected the element nothing is being added to the details.

EDIT
I found out that open attribute is being added to details when clicked on it. So wrote the css according to it.
Related PR

[pbteja1998]

@jacogr There was some problem with submitting through gitcoin. Is it possible to just tip me instead through gitcoin?

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work for 60.0 DAI (60.0 USD @ $1.0/DAI) has been submitted by__:

1. @pbteja1998
2. @pbteja1998

@Web3Foundation please take a look at the submitted work:

• PR by @pbteja1998
• PR by @pbteja1998

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $84,967.26 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__The funding of 60.0 DAI (60.0 USD @ $1.0/DAI) attached to this issue has been approved & issued to @pbteja1998.__

• Learn more on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $84,677.41 more funded OSS Work available on the Gitcoin Issue Explorer

[polkadot-js-bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue if you think you have a related problem or query.