Skip to content

Finished initial pass on Dashboard My Stories Page UI Grid View#926

Merged
BrittanyIRL merged 2 commits intomasterfrom
feature/my-stories-ui
Apr 1, 2020
Merged

Finished initial pass on Dashboard My Stories Page UI Grid View#926
BrittanyIRL merged 2 commits intomasterfrom
feature/my-stories-ui

Conversation

@carloskelly13
Copy link
Copy Markdown
Contributor

@carloskelly13 carloskelly13 commented Apr 1, 2020

  • Uses Card Grid UI components for My Stories Layout
  • Adds List Bar component that will toggle the Default Grid View and List View
  • Updates all the metrics for the Cards to be 2:3 ratios
  • PR looks larger because we are renaming files to be consistent with camelCase naming

Screen Shot 2020-03-31 at 8 24 57 PM

Green to show hit target for toggle button since the icon is quite small.

Screen Shot 2020-03-31 at 8 35 22 PM

Screen Shot 2020-03-31 at 8 24 57 PM copy

Screen Shot 2020-03-31 at 8 25 05 PM

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 1, 2020

Size Change: +902 B (0%)

Total Size: 511 kB

Filename Size Change
assets/js/stories-dashboard.js 68.2 kB +902 B (1%)
ℹ️ View Unchanged
Filename Size Change
assets/css/edit-story.css 3.01 kB 0 B
assets/css/stories-dashboard.css 206 B 0 B
assets/js/edit-story.js 440 kB 0 B

compressed-size-action

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Did you experience issues with this otherwise? I thought our SVGO implementation automatically changes these attributes to use currentColor.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Oh I didn't even realize it did that. Yes, we have had to change it to currentColor otherwise it uses the color listed.

@swissspidy swissspidy mentioned this pull request Apr 1, 2020
Copy link
Copy Markdown
Contributor

@BrittanyIRL BrittanyIRL left a comment

Choose a reason for hiding this comment

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

Looks great! I have a few minor things that might be helpful. Looks like there's a recent conflict in package.json. Thank you for the updated names on the grid!

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think making the svg width and height a constant that you can throw in for the multiple use cases here would make updates more straight forward.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I like the idea of an icons metrics constants obj.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

could you add an aria label to this button to give it context for what it is toggling?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

That's a wonderful idea.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

should this be uppercase?

Copy link
Copy Markdown
Contributor

@mariano-formidable mariano-formidable left a comment

Choose a reason for hiding this comment

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

Only one non-blocking naming nit you can take or leave! Excellent work 🎉

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Naming nit you can choose to ignore, but for a second I found myself reading state as a react state variable 😱 Just for clarity sake, do you think it might read better to call it mode and then LIST_STATE would also be LIST_MODE (and all references to it updated appropriately)? That way the verbiage (even when talking about it) won't every be confused with react state?

@carloskelly13 carloskelly13 force-pushed the feature/my-stories-ui branch from 2734dce to 5d33c45 Compare April 1, 2020 17:06
Copy link
Copy Markdown
Contributor

@BrittanyIRL BrittanyIRL left a comment

Choose a reason for hiding this comment

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

Thanks for the quick updates!

@BrittanyIRL BrittanyIRL merged commit 5f2f12f into master Apr 1, 2020
@BrittanyIRL BrittanyIRL deleted the feature/my-stories-ui branch April 1, 2020 17:21
@swissspidy swissspidy added the Type: Enhancement New feature or improvement of an existing feature label Apr 2, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Type: Enhancement New feature or improvement of an existing feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants