[mobile ux] Merge search and filter epic to master

[Matt-Yorkley]

What? Why?

Covers epic #4601

This PR is merging the mobile-ux-filters feature branch into master.

What should we test?

All six issues in #4601

Release notes

Major updates to search and filter UX in shops, on all devices

[Matt-Yorkley]

Rebased to resolve conflicts...

[Matt-Yorkley]

I manually approved some CSS linting issues with CodeClimate here. It looks like CodeClimate only runs on the master branch, so it was not linting any of the previous PRs submitted to the feature branch before now. The 3 categories of issues were:

• "prefer single quotes". We use double quotes in almost all places, eg @include "mixins" and we've decided elsewhere in the codebase to prefer double quotes.
• "nesting too deep (4 / 3) ". I think this will require a huge refactor in some cases. If we want to do this we should probably wait until after mobile UX is finished?
• the third category related to the recent refactoring of our breakpoint definitions into variables. Now that it's in an @include statement, CodeClimate complains that @include statements should come before properties in the ordering, and wants every single use of breakpoints to be moved around. I don't think this is a good idea in this specific case, it'll make things much less clear.

Maybe we can run an automated CSS linting and refactoring tool on all of it after we've finished mobile? There are several very good tools that can do that (like rubocop's autocorrect, but for CSS).

[daniellemoorhead]

There are conflicts @Matt-Yorkley - if you could resolve these and then stage this on AU today then @yukoosawa can have a look at it during her time and then I can take a look on Friday. 🙏

Yuko, Baw Baw is up on AU staging so you can use them as your test shop.

[Matt-Yorkley]

@daniellemoorhead @yukoosawa merge conflicts resolved. I'll stage it now, It'll be ready in 15 minutes or so 👍

[daniellemoorhead]

Dammit, this has conflicts again @Matt-Yorkley 😞

[Matt-Yorkley]

Yeah... with multiple devs all touching the same CSS files in different PRs, it'll be a carnival of merge conflicts.

I'll have a look at rebasing it now 👍

[Matt-Yorkley]

Okay @daniellemoorhead the conflicts are resolved 👍

[daniellemoorhead]

Second round of testing (full notes in testing document):

For #4603:

• All failing tests in notes are from @yukoosawa so I'll leave her to test those and respond.

For #4604:

• Help words in the search field still cut off, they need to be shortened to just say "Search..." like in the new design.
• The filter button doesn't change colour on hover (see notes for what it should do).
• Search bar now doesn't span the window (see screenshots in notes).
• Plus failing notes from @yukoosawa to be tested.

For #4602

• Hitting 'search' button on keyboard doesn't shut the keyboard.
• Two cancel buttons are displaying on desktop (see screenshots in notes).
• Plus failing notes from @yukoosawa to be tested.

For #4605:

• All failing tests in notes are from @yukoosawa so I'll leave her to test those and respond.

For #4669:

• All failing tests in notes are from @yukoosawa so I'll leave her to test those and respond.

@Matt-Yorkley it might be worth either waiting till @yukoosawa has done her second round of testing, because she's likely to have some things that also still require tweaks (I assume you checked the testing notes and worked through her comments?).

[Matt-Yorkley]

Ah, since other Mobile PRs have been merged and the branch has been rebased, things are suddenly broken. 😭

This will probably keep happening until we have only one dev on Mobile at a time...

[Matt-Yorkley]

Okay @daniellemoorhead and @yukoosawa I've fixed things up a bit. Notes:

• Help words in the search field still cut off, they need to be shortened to just say "Search..." like in the new design.

This is updated, it's just that the new translations have not been made and will not be in staging, so you won't see the changes yet. You can actually hack this by going to this link first to see the site using the base language file: https://staging.openfoodnetwork.org.au/?locale=en

• The filter button doesn't change colour on hover (see notes for what it should do).

It does, I promise!

• Search bar now doesn't span the window (see screenshots in notes).

Fixed 👍

• Hitting 'search' button on keyboard doesn't shut the keyboard.

Not fixed. I have no idea how to hack the UX on the built-in iPhone keyboard, and I don't have an iPhone. Can we move this to another issue and have someone else take a look at it?

• Two cancel buttons are displaying on desktop (see screenshots in notes).

Fixed 👍

• I assume you checked the testing notes and worked through her comments?

Yes, I think it's all covered.

[daniellemoorhead]

Awesome @Matt-Yorkley <https://github.com/Matt-Yorkley> 👏 I'll make sure this gets merged before the others, as soon as @yukoosawa <https://github.com/yukoosawa> has a look.

…

On Wed, 13 May 2020 at 03:16, Matt-Yorkley ***@***.***> wrote: Okay @daniellemoorhead <https://github.com/daniellemoorhead> and @yukoosawa <https://github.com/yukoosawa> I've fixed things up a bit. Notes: - *Help words in the search field still cut off, they need to be shortened to just say "Search..." like in the new design.* This is updated, it's just that the new translations have not been made and will not be in staging, so you won't see the changes yet. You can actually hack this by going to this link first to see the site using the base language file: https://staging.openfoodnetwork.org.au/?locale=en - *The filter button doesn't change colour on hover (see notes for what it should do).* It does, I promise! [image: ch-ch-ch-ch-changeeees] <https://user-images.githubusercontent.com/9029026/81724068-0f35cf00-9484-11ea-8357-7aff8f4bf74d.gif> - *Search bar now doesn't span the window (see screenshots in notes).* Fixed 👍 - *Hitting 'search' button on keyboard doesn't shut the keyboard.* Not fixed. I have no idea how to hack the UX on the built-in iPhone keyboard, and I don't have an iPhone. Can we move this to another issue and have someone else take a look at it? - *Two cancel buttons are displaying on desktop (see screenshots in notes).* Fixed 👍 - *I assume you checked the testing notes and worked through her comments?* Yes, I think it's all covered. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5330 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACTRDPHFCALHZRCSJEYBY6LRRF775ANCNFSM4MT3OFIA> .

-- Open Food Network Australia www.openfoodnetwork.org.au Our software platform <https://about.openfoodnetwork.org.au/software-platform/> - User Guide <https://openfoodnetwork.org/user-guide/> - Our services <https://about.openfoodnetwork.org.au/open-food-services/> - Sign up to our newsletter <http://eepurl.com/bYYCDj> *Open Food Network respectfully acknowledges the traditional custodians of the unceded lands on which we meet, work and live. We pay our respects to their Elders, past, present and emerging and acknowledge their deep spiritual relationship to country.*

[yukoosawa]

Second round of testing!

---

As this is my [epic] round last chance review, I have one last UI tweak:

• Reduce top/bottom padding around search field + filter button [mobile & tablet only]. Should be 0.5em/8px so it matches the OC selector bar above it.

---

✅ #4603

✅ #4604:

❌ #4602

• Hitting 'search' button on keyboard doesn't shut the keyboard.

@daniellemoorhead Do you want to make a call on this based on Matt's comments re: not knowing how to fix this? I've tested on iPhone 6S (running older iOS 11), iPad mini 3 (running older iOS 12), and iPhone 11 Pro (running iOS 13) and for all 3 devices tapping the 'search' button doesn't close the keyboard.

✅ #4605:

✅ #4669:

[daniellemoorhead]

• Hitting 'search' button on keyboard doesn't shut the keyboard.
  Not fixed. I have no idea how to hack the UX on the built-in iPhone keyboard, and I don't have an iPhone. Can we move this to another issue and have someone else take a look at it?

I'll write another card for this, let someone else take it (maybe @mkllnk who has an iphone, or @luisramos0 also has one).

@Matt-Yorkley -> everything else is OH EM GEE GOOD TO GO!

[luisramos0]

👏 👏 👏