Skip to content
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

[feat] Add vanilla extract and restyle UI #86

Merged
merged 13 commits into from
Nov 8, 2023
Merged

[feat] Add vanilla extract and restyle UI #86

merged 13 commits into from
Nov 8, 2023

Conversation

2Steaks
Copy link
Collaborator

@2Steaks 2Steaks commented Nov 1, 2023

What?

This PR updates the UI for the report package. Included with these changes are the use of css-in-js tool vanilla-extract and removal of bootstrap css

Why?

We want a well designed, print friendly, yet interactive view for the report page.

Checklist

  • I have performed a self-review of my code.
  • I have added tests for my changes.
  • I have run linter locally (go run mage.go lint) and all checks pass.
  • I have run tests locally (go run mage.go test) and all tests pass.
  • I have commented on my code, particularly in hard-to-understand areas.

Before
Screenshot 2023-10-31 at 11 25 00

After
Screenshot 2023-11-01 at 09 34 42
Screenshot 2023-11-01 at 09 34 51
Screenshot 2023-11-01 at 09 35 09

@szkiba please let me know if the design is too basic.

@2Steaks 2Steaks requested a review from szkiba November 1, 2023 09:40
@2Steaks 2Steaks self-assigned this Nov 1, 2023
- Add license headers
- Optimise colours for charts
- optimise Section panels
@2Steaks 2Steaks marked this pull request as ready for review November 1, 2023 10:25
Copy link
Collaborator

@szkiba szkiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the new version. A small note: similar to the first version of the dashboard ui, in my browser (chrome), the font size of the normal text (eg section description) is a bit small.

# Conflicts:
#	dashboard/assets/packages/report/vite.config.ts
- Remove test date from Charts
- Update font sizes
Comment on lines +14 to +22
const dateFormats = [
[3600 * 24 * 365, null, null, null, null, null, null, null, 1],
[3600 * 24 * 28, null, null, null, null, null, null, null, 1],
[3600 * 24, null, null, null, null, null, null, null, 1],
[3600, "{HH}", null, null, null, null, null, null, 1],
[60, "{HH}:{mm}", null, null, null, null, null, null, 1],
[1, ":{ss}", null, null, null, null, null, null, 1],
[0.001, ":{ss}.{fff}", null, null, null, null, null, null, 1]
]
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@szkiba I've messed around with these formats to remove the date, could you take a look at this and confirm whether it's okay?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seem ok for me

@2Steaks 2Steaks requested a review from szkiba November 7, 2023 11:14
- Fix grid gap so that it scales below full width on smaller screens
- Add x axis scrolling for tables that are too wide
@2Steaks 2Steaks merged commit 8cf09a9 into master Nov 8, 2023
9 checks passed
@szkiba szkiba deleted the feat/report-ui branch June 7, 2024 11:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants