Skip to content

Showed speech bubble and 'filter' on mobile#2194

Merged
Pomax merged 9 commits intomasterfrom
issue-2141-speech-bubble-mobile
Nov 15, 2018
Merged

Showed speech bubble and 'filter' on mobile#2194
Pomax merged 9 commits intomasterfrom
issue-2141-speech-bubble-mobile

Conversation

@mmmavis
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown

@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
background: white;

@media screen and (min-width: 550px) {
@media (min-width: $bp-md) {
Copy link
Copy Markdown
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