Material Design spec for SC Next

[sujato]

Okay, looks good to me, not that I really understand!

To address your questions:

@Vimala

in your mockup you have the “About SC” at the bottom of the nav-bar. But would that not better fit under the “more-vert” in the top right corner of the toolbar together with other static pages?

I think it could be either. The main difference, as I see it, is that the “more-vert” menu is primarily for actions, eg. changing language, making a donation, downloading something. Whereas the “nav drawer” is mainly for navigation i.e. going to places. True, I also included acknowledgements under the menu, so it is not fully consistent. I put that there to make it more prominent, but it is just a suggestion.

But these differences are not clear cut. Even in the MD guidelines there is ambiguity here: the example for a menu usage includes Help and Settings, but the exact same things are also mentioned in the guidelines for the nav drawer. So basically they can go in either place.

One concern would be that there are not too many items in the “more-vert” column.

I feel like the bottom of the nav drawer is really used for the kind of legal/technical/occasional pages that are typically relegated to the page footer.

Anyway, I’m happy with how it is in the spec, but if you want to try another way, try it and we can see.

@Vimala

do I understand it correctly that when you open a (sub)division in the nav-bar, 2 things have to happen: 1. the nav-bar opens up to show all the suttas (or subdivision) AND 2. the viewport changes to a division-page. So you then have the suttas listed in both the nav-bar and the division-page.

I didn’t really think this through, but I think the answer is no, they should be independent. The basic idea is this:

@sujato

Items that represent tabular pages are shown as links. Clicking the link will open the relevant table, while clicking the expander will open the next nesting level

That is to say, there are two separate actions, affected by (1) the linked title of the division or text, and (2) the expander. If we do as you suggest, then clicking the linked title will duplicate the function of the expander, which doesn’t seem right.

I guess the more general question is, should the nav drawer reflect the current state of the main page, or are they independent? The MD approach seems to be that they are independent. So on material.io, I can open or shut any level of navigation in the nav drawer, without affecting the actual page.

Does this seem reasonable?

@Vimala

access css or js in the Polymer elements. I guess this is still a learning curve and one I hope @Sujato can help with

Sorry, I know nothing about this!

@Vimala

with the menu the only thing to turn off the auto-focus on the first available element is to insert a blank div with the same class name just before

Yeah, that sounds gnarly. But again, as a general rule, assume that the people behind MD know what they’re doing. If they think auto-focus on the first element is a good thing, so be it. Who knows, Google maybe sat a room full of people down to do A/B testing on that one point.

I guess the idea is that it saves a click, which is great for those with really busy lifestyles!

Anyway, we should just do everything the default way as much as possible to start, then later on we can tweak if necessary.

[Vimala]

@sujato

If they think auto-focus on the first element is a good thing, so be it.

But it does not work properly with all the submenus we have in the expander - it gets confused on what to focus on. And it does not save clicks because you still need to click on it to select it. The only thing the auto-focus does is to highlight the first item, not select it.

[sujato]

Oh, okay, I was thinking of the more-vert menu. In that case, sorry, i have no idea.

[blake]

I’ll comment some more later, but right now I just want to mention that with respect to making the pages live on-line for prototyping purposes, one possibility is “Github pages”, you go to the repository settings and under Github Pages set it to use master branch and github will then serve the site for you. That saves the need for a separate deployment step other than pushing. It also takes care of HTTPS.

Polymer sites can be easily served in this manner because they don’t require a build step (you can do one to reduce the file size but it’s not necessary) , all that is needed is to make sure links are relative rather than absolute.

[sujato]

I always wondered how that worked. I just tried forking the repo and publishing it; it’s not functional but at least it exists!

https://sujato.github.io/polymer-mockup-sc/

[Vimala]

I’ll try later with the latest version.

[Vimala]

@blake

all that is needed is to make sure links are relative rather than absolute.

I’m afraid I get the same thing as Bhante. It only loads the index.html and not the Polymer elements. I take it that the trick is in the links, but I think those are relative i.e. relative to the page where you are on.

For @Sujato: this is what it is supposed to look like with the elements loaded.

[blake]

@Vimala

It only loads the index.html and not the Polymer elements. I take it that the trick is in the links, but I think those are relative i.e. relative to the page where you are on.

Atm the links are like : href="/bower_components/..., that’s an absolute link so it points to the wrong place. Removing the initial slash (or replacing it with ../../ for content in subfolders of src) should make it work. The polymer elements themselves use relative links internally.

[sujato]

I got the nav drawer working!

[Vimala]

Yes, so do I and also the header bar. But struggling with the page load.
https://samanerivimala.github.io/polymer-mockup-sc/

PS. Dont look at the font! It obviously does not know Skolar

[sujato]

Great, yes I can see it! Always so good to see something come to life.

[Vimala]

I cannot get it to autoload the first page, but if you go to the more-vert and click on languages, you will see what it is supposed to look like at startup.
Only the more-vert buttons work, not the rest yet.

And if you do re-load when you see the homepage, then it will keep changing the epigraphs so that works too.
It does not work if you keep clicking on languages because then it checks and sees the page is already loaded and it does not do it again.

[sujato]

@Vimala

if you go to the more-vert and click on languages

I just get a 404 error …

[Vimala]

try an incognito browser. Stuff stays in your cache.

[sujato]

Cool, there it is.

[Vimala]

It works fine on android tablet but not happy with it on my phone.maybe that’s just github.

[sujato]

What’s the problem there?

I would guess that, when we shift to Polymer 2.0, there will be all kinds of little shifts and gotchas in behavior, so it’s probably not worth fixing all the little details yet.

[Vimala]

I have implemented the paper-tree menu we discussed yesterday on https://samanerivimala.github.io/polymer-mockup-sc/#!/home but I don’t like it very much.

The code is pretty easy but it has none of the nice functionality of the official Polymer paper-menu. I also had a lot of problems with the css which is now very hacky. So I have to do a lot more work on it. Maybe I can make my own element instead.

Could you also have a quick look at DN2 and DN8 and the positioning of the div. I’m terrible at positioning!

[sujato]

Yes, I see what you mean.

I know it’s not Polymer, but the nav drawer here does pretty much exactly what we want:

Mengembangkan untuk Android  |  Developer Android  | ...

The top level has only one nesting level, but further down the hierarchy you’ll find double nesting, eg.:

Android Things  |  Android Developers

I notice that a lot of the issues we’ve encountered are discussed in Github, without resolution:

Issues · googlearchive/paper-menu

Maybe they’re focused on the 2.0 release.

@Vimala

Could you also have a quick look at DN2 and DN8 and the positioning of the div.

Sorry, I’m not sure what you’re referring to here.

[Vimala]

New version updated here: https://samanerivimala.github.io/polymer-mockup-sc/

It loads the 4 static pages (most of it anyway) and the Digha Nikaya page only.
I will start working on making that sutta-list a bit more up to scratch.