#534 | Redesign - Block page

[Viterbo]

Fixes #534

Description

This PR implements the new design for the Block page, including two tabs that can be parametrized in the URL.

This PR also includes the Base redesign PR from @ezra-sg.

Test scenarios

• Visit this block page on the overview tab
  • on that view, click on Prev and Next buttons to the side of the height block number
    • the block should change
• Visit another Block but on the transactions tab
• Change the language in the menu and check all texts are (at least) present

Screenshots

|||

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have cleaned up the code in the areas my change touches
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings
• I have removed any unnecessary console messages
• I have included all english text to the translation file and/or created a new issue with the required translations for the currently supported languages
• I have tested for mobile functionality and responsiveness
• I have added appropriate test coverage

[netlify]

✅ Deploy Preview for teloscan-redesign ready!

Name	Link
🔨 Latest commit	581fc8b
🔍 Latest deploy log	https://app.netlify.com/sites/teloscan-redesign/deploys/65d7ddb8fc67380008ddd4c3
😎 Deploy Preview	https://deploy-preview-542--teloscan-redesign.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[ezra-sg]

nice work! I think a few changes are needed:

• i think the css class names in BlockPage.vue are off, instead of p-block i think they should be c-block (sorry 😭) to match other components
• there should be a singular and plural version for the text "X transactions in this block", like where there is 1 it should say "1 transaction in this block"
• can you make the info icons (for the tooltips) and the labels gray instead of black/white? i think especially in light mode they look a little intense
• instead of 2 separate cards for the parts of the page, i think they should be one card with an <hr> line separating them
  
• we need to decide how we want to have tabs appear with the redesign. this one is up for discussion because we have no designs for it. I personally think they should be styled to look more like other block explorers, like this but using our colors, what do you think?
  

[ezra-sg]

also lets default to the plain english text (like "an hour ago") for timestamp rather than the long form

[donnyquixotic]

also lets default to the plain english text (like "an hour ago") for timestamp rather than the long form

If we use time ago, I suggest we have both:

[donnyquixotic]

@Viterbo please refactor BlockPage.vue to use setup attribute (<script lang='ts' setup>). See https://github.com/telosnetwork/teloscan/pull/540/files for refactor example and telos wallet for other component examples.

[pmjanus]

Really nice job, addressing the feedback from Ez and Don:

1. Lets go with both time ago and formated timestamp for timestamp as Don linked:
   
2. Let's test the site on mobile and make sure that it has proper positioning of text and icons according to space (let's do mobile first development)
   
3. Agree with Ezra we should divide with

   ---

   the second card can be added if we run out of space , unneeded right now.
4. I think we can have less conspicuous chevrons for block navigation, and we can also place them on the header block, so it is consistent with how we will place them to navigate transactions for the same user. I am not against the functionality being repeated for both familiarity and internal consistency, thoughts?