Make it easy to use the right toolbar sizes (icon button offset) on mobile

[kenchris]

app-toolbar is hardcoded to desktop sizes (64px) and the paper-icon-button offset as well.

Unfortunately this is not so great, as people using app-layout for progressive web apps will get the wrong sizes by default.

On a "mobile" screen it is supposed to be 56px with an offset of 16px.

https://www.google.com/design/spec/layout/structure.html#structure-app-bar

It would be great if we could make it easy for people to switch between these modes, like with a class or attribute.

@robdodson @paulkinlan

[abdonrd]

Totally right! :+1:

[blasten]

@kenchris We tried to avoid using media queries inside layout elements because they can be used in many places and for different purposes. I'd recommend using media queries from outside the element. e.g.

@media (max-width: 400px) {
  app-toolbar {
    height: 56px;
  }
}

Lastly, I do agree that we should have a demo. Feel free to contribute with a responsive demo!

[kenchris]

Yes, I solved this in my own code with media queries, but it's error phrone to do manually and right now we end up in the situation that most people will always use desktop layout. Why not do something like

@media (max-width: 400px) {
  app-toolbar {
    @apply(--mobile-layout);
  }
}

Of course it would be much nicer if I could apply a class instead giving a media query. That is why I would love elements to have classes like "mobile-landscape", "mobile-portrait", "desktop" according to material design guide lines.

If you could do something like the below it would be quite useful:

@media (max-width: 400px) {
  app-toolbar {
    @applyClass("mobile");
  }
}

But I am not sure something like that can be done. The only way to currently do that is super ugly and requires me to iterate all elements from outside:

matchMedia("(max-width: 400px)").onchange(ev => {
  if (ev.matches) {
    document.querySelectorAll('...').forEach(el => {
      el.addClass("mobile")
    })
  }
})

[robdodson]

crazy question... can max-width/min-width be set with a custom property?

[kenchris]

I guess another option would be for you to add a "responsive-width= " or similar attribute, so that authors could set these externally. Unfortunately there seems to be three cases (mobile landscape, portrait and desktop)

[kenchris]

@robdodson yes, I very much believe so.

[blasten]

@robdodson I believe I saw a demo of native custom properties doing that, but I couldn't find it again :( Maybe I dreamed about it? It doesn't seem to work: http://jsbin.com/gulahi/edit?html,output

[robdodson]

Yeah in my post I covered something similar.

:root {
  --gutter: 4px;
}

section {
  margin: var(--gutter);
}

@media (min-width: 600px) {
  :root {
    --gutter: 16px;
  }
}

So I think a solution would be that the elements don't hard code any breakpoints but do use custom properties for all sizing. Then we could have an external stylesheet of recommended breakpoints that demonstrate how to change those values and resize the elements. Developers could then use that stylesheet as is or tweak it and combine it with their own styles. @blasten wdyt?

[kenchris]

@blasten no var doesn't work in media queries, at least yet, though @tabatkins has looked at it, I believe.

https://lists.w3.org/Archives/Public/www-style/2015Apr/0077.html

Custom Media Queries: https://drafts.csswg.org/mediaqueries/#custom-mq

[blasten]

@robdodson It's great for some cases. In fact, we plan to use --gutters in app-grid. Demo: http://output.jsbin.com/vucirix.

However, there are a few elements where having the flexibility of just setting a --gutter is particularly tricky. About a year ago, I had an experimental element (breakpoint-control) https://github.com/PolymerElements/breakpoint-control/blob/master/demo/paper-toolbar/paper-toolbar.html#L70-L93 that tried to do that, but I found a few limitations with this approach.

For example, a lot of complex calc rules. This might be okay, but the main issue was that once you go this path, you pretty much need to change the layout system for all the elements you inserted inside paper-toolbar. For example: paper-icon-button sets its own padding. What would that mean when I set a --gutter? If --gutter: 16px;, then from the user's perspective the icon inside paper-icon-button would be aligned to the left by 16px + padding-left. Similarly, what about the title?

[robdodson]

oh sorry I wasn't talking specifically about the use of a gutter property, just referring to the approach that @kenchris had also previously referred to of having the element rely on custom properties/mixins throughout and then creating an external stylesheet which showed how to change them in media queries.

I think @kenchris's concern is if we don't distribute some kind of sane default then many developers will just leave the desktop styles in place. That default could be distributed as a separate stylesheet which demonstrates how to resize the elements externally.

[blasten]

What do you think @frankiefu, @keanulee ?

[frankiefu]

I like the idea of providing a helper stylesheet (e.g. app-md-styles.html) that contains some of the recommended default Material Design styles.

[joshas]

By using Polymer components I expect styles to match the ones provided in Material Design guidelines and it is very frustrating to do a polish iteration just to find and fix all those small issues by hand. And worst part is that it is being done by more developers. Even most examples has some style fixes, that you notice only when something doesn't look right after copying template code.

[joshas]

There's one more App bar size to be considered "Mobile Landscape: 48dp".