-
Notifications
You must be signed in to change notification settings - Fork 39
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
dashboard initial implementation #762
Conversation
digitalimplementer
commented
Dec 26, 2023
•
edited
Loading
edited
- Menu
- Hero
- Token
- Backers
- History
- Traction
- Engineering
- Community
- Team
- Community
- Comparison
- Roadmap
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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. |
@DzhideX are you able to perform a code review at this stage, as quite a lot has already been done? |
Hey @digitalimplementer Nice job , these are some issues that I found Overall
XXS
XS
SM
MD
LG
XL
|
(pasting from Discord) Here are some final thoughts:
|
Which link? |
@bedeho I meant for the anchor element in the bottom left corner in this section (the "Read more ->" link): |
ah ok, lets link to www.jsgenesis.com |
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:
Thanks in advance for your time! |
|