Mobile app / Prepare webviews

[adjogima]

https://github.com/basecamp/fizzy/pull/2177 put the structure in place, this PR actually makes some changes targeted at the Android and iOS apps. I'm applying changes to mobile web as well so let's discuss if we do want it that way or not. Desktop should look unchanged.

---

First stop, the header

with bigger icon buttons and actions always above title 👇

Before	After

---

Next, card perma

with a bit less background and a horizontal layout for the column picker 👇

Before	After

The column picker is automatically centered on the current column, so when the page loads, you're getting this 👇

---

Pins

making /my/pins usable. It's only used by the native apps as we have dedicated tabs instead of alway-on-screen-stacks 👇

Before	After

This is mostly done by moving existing styles.

For example, instead of applying some styles based on a .card being in a .tray:

.tray {
  .card { [some style] }
}

apply based on being in a .tray__item:

.tray__item {
  .card { [some style] }
}

Or instead of applying some style based on being a .tray__item in .tray--pins:

.tray--pins {
  .tray__item { [some style] }
}

apply based on being a .tray__item--pin:

.tray__item--pin {
  [some style]
}

This allows us to pick up the tray formatting of pinned tickets in /my/pins, like we do with the tray formatting of notifications in /notifications

---

Search

making /search usable. Like /my/pins it's only used by the native apps, search being its own tab instead of an alway-on-screen bar 👇

Before	After

I also took the liberty to slightly alter search results in the bottom bar 👇

Before	After

Again, this is mostly done by repurposing existing stuff.

---

Web views

the rest is hiding stuff we don't want in the native apps 👇

Mobile Web	Native Apps

[andyra]

Good stuff!

Before you merge, I'm going to pitch in and make a small change to get this text to be full width. It's in a grid cell right now, and I think just dropping it onto its own row is the way to go.

[andyra]

That's better:

Before	After

[adjogima]

Sweet! Thanks @andyra

[adjogima]

I'm excluding mobile devices from loading the navigable list controller. It's a keyboard thing. I should still load on a touch screen laptop. Not on tablets with a hardware keyboard attached though which is not ideal but we can revisit.