dashboard initial implementation

[digitalimplementer]

• Menu
• Hero
• Token
• Backers
• History
• Traction
• Engineering
• Community
• Team
• Community
• Comparison
• Roadmap

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
joystream-org	✅ Ready (Inspect)	Visit Preview	Feb 29, 2024 0:05am
joystream-org-storybook	✅ Ready (Inspect)	Visit Preview	Feb 29, 2024 0:05am
joystream-org-translation	✅ Ready (Inspect)	Visit Preview	Feb 29, 2024 0:05am

[bedeho]

Does not look right.

[digitalimplementer]

When working on token section I sticked to mobile-first and bem approaches. I ensured the markup is semantic and code is reusable. For instance, I created reusable components to represent info in widgets, tables, etc. To simplify styling of components I used such SCSS features as variables, mixins, functions (created those in a separate directory (styles/layout/dashboard). I ensured components have prop types specified. To implement complex features I used libraries that're already present in the project like recharts, react-responsive, pure-react-carousel. Token price chart includes area and bar charts combined. They have common x axis and separate y axises (bar chart's y axis is hidden) to represent info properly. The chart has custom active dot (active dot is represented by circle and line svgs, line is equal to chart's width and needed to intersect with tooltip's vertical line) and tooltip components. As for token release schedule chart, it is an area chart that has static reference line and custom legend in addition. As for token minting chart, it is a pie chart with custom labels and legend. It has support of mouseenter and mouseleave events applying conditional styling using classnames library. All charts have custom styling, functions to format tick labels, custom labels, tooltips, cursors, etc. As for the carousel, it has different quantity of visible slides specified according to media rules. It also has logic implemented to show or hide buttons to change slides. And the last but not least section feature is a table. I made it reusable so that it accepts columns (column must have accessor key specified), data and a classname to adjust styling if needed (it's populated than to table with classnames library) as props. Look forward to your feedback.

[bedeho]

@DzhideX are you able to perform a code review at this stage, as quite a lot has already been done?

[msmadeline]

Hey @digitalimplementer Nice job , these are some issues that I found

Overall

• Seems like you deleted the "+smth last month" copy from twitter and telegram - telegram is fine but you need to make the main data so (22k etc) and logo be in the same line because now it looks a little bit off

• there seem to be an issue with the pacing between numbers in a contributions widget, Can we improve it?

XXS

• Something is wrong with the color of the numbers in a token price widget

• On this breakpoint there’s no need for the placement card

• In the minting widget - the numbers are slightly going out of the widget, maybe they should be a little smaller like 12px

• Something is wrong in the open events section - the “today”copy is not visible and the card is cutting in the off place - you can barely see the information in the card and when you scroll using the button it’s even more off - I think it’s better to remove the fade and the button and just let user scroll the cards carousel If they want

XS

• The same issue with th color of the numbers in a token price widget
• Inside the exchange cards there is wrong padding - it’s suppose to be 16 px

• In the videos uploaded widget the numbers on the left are too close to the end of the widget. It makes it look like there is no padding. Can we change that?

• There’s no “today” events, did we drop it or smth?

SM

• Wrong text size of the procentage data in the supply staked for validation and APR on staking cards - should be 42px

• In the videos uploaded widget there is the same issue with numbers going beyond the widget. Maybe we should align numbers to the left

MD

• till weird spacing between numbers under the contributions widget

• In the councl card the “View past councils “ button shuld be under the term length info - so aligned to right

LG

• In the minting widget - there’s to much space under the chart data pins. Also you can make the chart bigget at this point?

• Also there is overall wrong padding on the entire page - on the right side it's less than 32 px

• There is wrong layout of the information in the enginenring card

XL

• The same issue with the button in the council card
• Same here with the minting widget
• Same with the layout of the github stats card content
• In the council card there is something wrong with the padding inside the button and also with the positioning of the button - should be more aligned to the right

[DzhideX]

(pasting from Discord)

Here are some final thoughts:

• Traction cards really should use M when they go over 1 million in value.
• Contribution graph is still wrong. The months are ordered but now the days aren’t.
• Working groups carousel still needs a bit work, the last one is hard to scroll to (maybe a hidden element might be a fix idea?). Can we also remove all WGs here which don’t have a lead, workers and where budget == 0?
• What link do we want to use in Jsgenesis section @bedeho?

[bedeho]

What link do we want to use in Jsgenesis section @bedeho?

Which link?

[DzhideX]

@bedeho I meant for the anchor element in the bottom left corner in this section (the "Read more ->" link):

[bedeho]

ah ok, lets link to www.jsgenesis.com

[digitalimplementer]

Hey @DzhideX! I've addressed the issues you raised. As for "Comparison" table, as I see, there is no dynamic data to populate the table with, so I've just changed the value of Joystream's FDV and provided the skeleton for the section.

Hey @msmadeline! There are a couple of things I'd like to clarify:

• "Contributions" x-axis ticks are formatted according to Figma. To address the issue of large gaps between ticks, I added a value of "30" to the daysToShow parameter;
• I'm not quite sure I understand, could you clarify what "placement cards" mean?
• "Exchange" options (xs bp) have 13.75px inline gap between data container and border; if padding-inline is set to 16px at 425px, the layout breaks. So, I set padding-inline to 16px from 435px;
• "Today" events were not visible because there were no events that day;
• could you elaborate on padding issue at lg bp? It seems it's 32px (screenshot);
• since "Minting" chart is in a grid, it has the same height as "Token allocation" table. Increasing the height of the chart container seems not to be influencing the size of the chart, so to address the issue of large gap between the chart and the legend I set margin-top: auto for legend container;
• could not reproduce the problem of "View past councils" button text wrapping after changing the position of button. Let me know please if the problem persists;
• could you elaborate on "Comparison" table. Should I wait for you to change some text properties in the design file or just increase the font-size to 14px, for example?

Thanks in advance for your time!

[msmadeline]

@digitalimplementer

Contributions" x-axis ticks are formatted according to Figma. To address the issue of large gaps between ticks, I added a value of "30" to the daysToShow parameter;

• Yes but arent they wrong still? There is a random "Feb" in the middle of it. which I think should be at the end of the line. If we can't do anything about the gap between, then I guess it's fine but maybe we can at least put the numbers in a right order? Correct me If my thinking is wrong

I'm not quite sure I understand, could you clarify what "placement cards" mean?

• I meant the "placeholder cards" sorry

"Exchange" options (xs bp) have 13.75px inline gap between data container and border; if padding-inline is set to 16px at 425px, the layout breaks. So, I set padding-inline to 16px from 435px;

• When it comes to the exchange cards. In the screenshot you can see that the content is going outside the card from the bottom of it - that's the issue there. The card have to hug the content properly

could you elaborate on padding issue at lg bp? It seems it's 32px (screenshot)

• Yes the lg padding seems fine now. Maybe something broke on my side before

since "Minting" chart is in a grid, it has the same height as "Token allocation" table. Increasing the height of the chart container seems not to be influencing the size of the chart, so to address the issue of large gap between the chart and the legend I set margin-top: auto for legend container;

• Ok I understand that, Overall it seems fine

could not reproduce the problem of "View past councils" button text wrapping after changing the position of button. Let me know please if the problem persists;

• The positioning of the button is good now but still there's a problem that the copy should be in one line

could you elaborate on "Comparison" table. Should I wait for you to change some text properties in the design file or just increase the font-size to 14px, for example?

• I though we just droped it. But If we keep it then I need to try it out first in figma. Please work on the columns I show on the screenshot. I think they should be a bit higher maybe like 20px height. Right now they are not huggin the data properly