Skip to content

HoC.com - Update UI on activity tiles - #48080

Merged
breville merged 2 commits into
stagingfrom
hoc-activity-tiles-ui-update
Sep 14, 2022
Merged

HoC.com - Update UI on activity tiles#48080
breville merged 2 commits into
stagingfrom
hoc-activity-tiles-ui-update

Conversation

@kelbyhawn

@kelbyhawn kelbyhawn commented Sep 13, 2022

Copy link
Copy Markdown
Contributor

Make the activity tiles look like more cohesive units on https://hourofcode.com/us/learn

  • Add a border
  • Round corners
  • Update spacing

Relevant info: Asana task


Before

Before

After

After

@kelbyhawn
kelbyhawn requested review from a team and breville September 14, 2022 16:26
@breville
breville merged commit 2025f83 into staging Sep 14, 2022
@breville
breville deleted the hoc-activity-tiles-ui-update branch September 14, 2022 23:40
@breville

Copy link
Copy Markdown
Member

Just to capture what we discussed:

  • The vertical spacing between tiles can match the horizontal spacing.
  • Ideally, we wouldn't need grey borders around the tile images, especially since some images already have their own borders. In the past, for similar tiles, we've been able to limit the grey border to the text area below. However, since some tutorials have white backgrounds, it seems we'll need to draw the grey border around all images.
  • Currently, the majority of tiles have a lot of whitespace below the text. A few tutorials have multi-line "detail strings" (as generated here) but our idea is to truncate them and to work with @ericfershtman to reduce them to something shorter in the gsheet. This way, we can adjust the tile size to suit the majority of tutorials.

For reference, grey border only around text:
Screen Shot 2022-09-14 at 4 36 12 PM

Grey border around image:
Screen Shot 2022-09-14 at 4 36 20 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants