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

[www] A bunch of mostly "Creator"-related UI updates #8390

Merged
merged 5 commits into from
Sep 20, 2018

Conversation

fk
Copy link
Contributor

@fk fk commented Sep 20, 2018

A first round of mostly "Creators" related UI updates — more coming:

  • Make use of the "Showcase" thumbnail component for the "Creators" index view cards, and adjust the card grid to be responsive:
    • Adds box-shadow to image thumbnail, hover effects, vertical whitespace between thumbnail image and title/GitHub icon.
    • Switch to font-weight: normal for location and "Hire/Hiring" badge: image
    • Link "Creators" index view card GitHub icon to the creator's GitHub profile.
    • Let "Creators" index grid fill the whole viewport width, adopting what we do for Site and Starter showcase, switching from fixed to fluid gatsby-image.
    • DRY: Add shared/empty-grid-items to hack around flexbox for Site, Starter, and Creators showcase.
  • Refactor <CtaButton> so that we can re-use it in other places. Aaaaamazing!
    • Expand <CtaButton> component to render as either
      • gatsby-link (default), or href, or button,
      • medium (default), small or large,
      • as primary (default) or secondary button,
      • and optionally with an icon.
    • Use the improved <Button> to render
      • Homepage "button links"; along the way, tried using non-outline button for the main CTA: image
      • „Submit“ button links in Site, Starter, and Creators Showcase
      • „Load More“ button in Site and Starter Showcase
    • Use the shared button styles for the Hubspot newsletter form button.
  • Consolidate a couple showcase sidebar filter styles and change font from "Futura PT" to the system font stack — I find this much easier to scan and read: image

* let creators index grid fill the whole viewport width, adopting what we do for site and starter showcase, switching from fixed to fluid gatsby-image
* link index view card GitHub icon
* DRY: add `shared/empty-grid-items`
Refactor (and rename Cta)Button component so that we can re-use it in
other places. Aaaaamazing!

- expand Button component to render as either gatsby-link (default),
  `href` or `button` (`<Button tag=„href“ />`)
- add `<Button small />`
- use `<Button>` to render
  - „Submit“ links in Site, Starter, and Creators Showcase
  - „Load More“ links Site and Starter Showcase
- use the shared button styles to style the Hubspot newsletter
  form button
@fk fk changed the title [WIP][www] A bunch of mostly "Creator"-related UI updates [www] A bunch of mostly "Creator"-related UI updates Sep 20, 2018
Copy link
Contributor

@KyleAMathews KyleAMathews left a comment

Choose a reason for hiding this comment

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

Looks legit from my quick scan :-)

Merging!

@KyleAMathews KyleAMathews merged commit 663d25e into master Sep 20, 2018
@KyleAMathews KyleAMathews deleted the topics/www-creators-moar branch September 20, 2018 22:49
lipis added a commit to lipis/gatsby that referenced this pull request Sep 21, 2018
* master: (22 commits)
  Adding blog post link to readme (gatsbyjs#8397)
  [www] A bunch of mostly "Creator"-related UI updates (gatsbyjs#8390)
  Add Ramon Chancay Creator (gatsbyjs#8389)
  [www] Update LeKoArts' portfolio starters' info (gatsbyjs#8365)
  Add self to creators. (gatsbyjs#8391)
  Behind the scenes (gatsbyjs#8392)
  Add https://hawaiinational.bank to sites.yml (gatsbyjs#8394)
  Add Marc-Antoine Ruel to community page (gatsbyjs#8378)
  chore(release): Publish
  [gatsby-image] Restore placeholder image transition (gatsbyjs#8350)
  Add www.leyanlo.com to sites.yml (gatsbyjs#8363)
  Add Jest to v2 migration docs (gatsbyjs#8384)
  [www] Fix wire.com Showcase URL (gatsbyjs#8376)
  Update Creator Showcase and Site Showcase (gatsbyjs#8377)
  Created stub article for navigation doc
  Added new navigation docs to sidebar
  www: fix images on audit with lighthouse doc (gatsbyjs#8373)
  Fix link (gatsbyjs#8375)
  Updated links
  using gatsby image in sidebar nav
  ...
pieh added a commit that referenced this pull request Sep 21, 2018
oorestisime pushed a commit to oorestisime/gatsby that referenced this pull request Sep 28, 2018
* Use thumbnail component for creators index view cards

* let creators index grid fill the whole viewport width, adopting what we do for site and starter showcase, switching from fixed to fluid gatsby-image
* link index view card GitHub icon
* DRY: add `shared/empty-grid-items`

* No search for now

* Add key

* One <Button> to rule them all

Refactor (and rename Cta)Button component so that we can re-use it in
other places. Aaaaamazing!

- expand Button component to render as either gatsby-link (default),
  `href` or `button` (`<Button tag=„href“ />`)
- add `<Button small />`
- use `<Button>` to render
  - „Submit“ links in Site, Starter, and Creators Showcase
  - „Load More“ links Site and Starter Showcase
- use the shared button styles to style the Hubspot newsletter
  form button

* Bonus round: Consolidate a couple showcase sidebar filter styles
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