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

Showed speech bubble and 'filter' on mobile #2194

Merged
merged 9 commits into from
Nov 15, 2018

Conversation

mmmavis
Copy link
Collaborator

@mmmavis mmmavis commented Nov 15, 2018

Closes #2141

  • show speech bubble on mobile
  • show 'filter' text on mobile

Extra

I had to do the following adjustments to make sure things don't get cropped on mobile.

  • mobile: I shrank the emoji to 46px*46px (based on Sketch file)
  • mobile: I shrank the speech bubble so the bubble doesn't get cropped.
  • mobile: I vertically aligned the "filter" text and bubble with emoji.

@cadecairos cadecairos temporarily deployed to foundation-mofostaging-pr-2194 November 15, 2018 02:09 Inactive
@mmmavis mmmavis temporarily deployed to foundation-mofostaging-pr-2194 November 15, 2018 02:09 Inactive
@mmmavis mmmavis changed the title Showed speech bubble and 'filter' on mobile (WIP) Showed speech bubble and 'filter' on mobile Nov 15, 2018
@mmmavis mmmavis temporarily deployed to foundation-mofostaging-pr-2194 November 15, 2018 04:30 Inactive
@mmmavis mmmavis temporarily deployed to foundation-mofostaging-pr-2194 November 15, 2018 04:33 Inactive
display: initial;
@media (min-width: $bp-md) {
top: calc(#{$filter-bubble-dimension} / 2 + 2px);
right: calc(2 * #{$filter-bubble-dimension} - 1.5em);
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Using interpolation #{} makes sure calc() works for mixed units calculations.

@mmmavis mmmavis changed the title (WIP) Showed speech bubble and 'filter' on mobile Showed speech bubble and 'filter' on mobile Nov 15, 2018
Copy link

@kristinashu kristinashu left a comment

Choose a reason for hiding this comment

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

Awesome! It looks great Mavis.

@mmmavis mmmavis requested review from Pomax and removed request for alanmoo November 15, 2018 17:03
@@ -45,7 +41,7 @@
justify-content: center;
background: white;

@media screen and (min-width: 550px) {
@media (min-width: $bp-md) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I'm changing these to $bp-md so responsive design breakpoints can be consistent with mockups

@Pomax Pomax temporarily deployed to foundation-mofostaging-pr-2194 November 15, 2018 21:19 Inactive
@Pomax Pomax temporarily deployed to foundation-mofostaging-pr-2194 November 15, 2018 21:26 Inactive
@Pomax Pomax temporarily deployed to foundation-mofostaging-pr-2194 November 15, 2018 21:33 Inactive
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.

4 participants