Vue-material: A few docs quirks

[plievone]

A couple of quirks in vue-material docs, perhaps it's ok to list them here for starters:

• https://marcosmoura.github.io/vue-material/#/components/button
  
  
  
  • ~Click any of the leftmost buttons labeled "default", and the two buttons with .md-primary switch their disabled state~ Working as intended, there's example code that is not visible in the "code" tab.
  
  
  • ~Perhaps needs a key, or some other modification~
  
  
• https://marcosmoura.github.io/vue-material/#/components/list (and other pages)
  
  
  
  • Avatars are loaded from https://placeimg.com/ which is slow I guess, often I don't see avatars until interacted with the page
  
  
• https://marcosmoura.github.io/vue-material/#/components/tabs
  
  
  
  • Scroll to bottom and click "Disabled", the tab loses its content and cannot be brought back
  
  
• https://marcosmoura.github.io/vue-material/#/components/select
  
  
  
  • ~"Set Pulp Fiction" button works only if you haven't selected any movie yet, and the button is a bit mysterious~ Fixed.
  
  
  • ~"Groups & Multiple" has an empty array below it, seems like something should be listed there.~ Fixed.
  
  
• https://marcosmoura.github.io/vue-material/#/components/table
  
  
  
  • ~Sort doesn't work yet, and all rows in the first example have equal values so sort wouldn't make any difference~ Works ok, there's just not code for this in the examples yet.
  
  
  • ~Should filtering, searching and pagination work already?~ Works ok, there's just not code for this in the examples yet.
  
  
• https://marcosmoura.github.io/vue-material/#/getting-started and https://marcosmoura.github.io/vue-material/#/ui-elements/typography
  
  
  
  • It is quite easy to scroll the page in mobile so that the layout is broken, for example by scrolling past the bottom and a white bar appears.
  
  
  • Also switching between all pages has an unnecessary fading in/out, which jumps these pages on load.
  
  
• Mobile
  
  
  
  • Using cards on all pages makes the site feel very crammed in mobile. Could you use some other dividers by default so that components would be more representative how they are used in mobile?
  
  
  • Also a possibility to disable ripple animations for a more speedier feel would be a plus. You could also consider using fastclick.js or similar to make buttons feel snappy on mobile.
  
  

[Edited to comment out a couple of fixed bugs. Thanks!]

[plievone]

There's also a curious bug where if you navigate to https://marcosmoura.github.io/vue-material/#/components/input with Chrome for Android and scroll downwards, the grey header of the card "Required and Errors" fills the bottom of the page until scrolled enough, then it snaps into correct size (or the card content appears, haven't debugged it further). Same happens on "Tabs" page with "Playground" card, and on "Card" page with "Full Control" card. Couldn't reproduce this on desktop, sorry.

[marcosmoura]

@plievone Let's discuss a little bit about those items:

1 - It was left there on purpose. If someone clicks there will see that the md-button is reactive enough. :)
2 - Yep. This is quite slow. I will change for some other "real" images. Thanks for reporting this. Here I have those images cached so I didn't notice that.
3 - This is new and bad! And is definitively a bug! I will take a look at this guy!
4 - The "Set Pulp Fiction" is also a bug. The md-select is not "listening" to value changes. I will fix that too. That empty array was supposed to show the selections on the multiple field. But with Vue 2.0.6 is broken. Will fix that too
5 - The table itself doesn't do the sort. This is the app logic and/or a backend thing. So basically what the table do is to fire an event telling that the sort header was clicked. You can see this behaviour on the second example. The search and the pagination is also a logic thing. I will create some better examples to show this.
6 - I didn't understand. Can you give some other examples? Maybe some screenshots?
7 - The documentation will be improved on the very next minor release. I will represent better the components and make a way to show all the options with descritive texts. Disable the ripple (globally) is not a good thing. According to Material Design Specs this is the way to "interact" with the element. I will enable a way to disable ripple effects on single components with an option like md-ripple-off or md-no-ink. I don't like the idea to attach the fastclick lib on this project. I like the library but the 300ms is there for a reason: To make the applications easy to zoom (and some other things). Although is good for users to have a "speedier" click on buttons and links this should be optional and is a decision that the developer should take. :)
8 - Yeah. There is some glitches and performance issues to be fixed on this documentation. Like I said I will develop (maybe from scratch) a better documentation website. As I'm developing this alone (for now) I need to create the other essential components and then I will focus on this documentation thing. I will also develop some "application shells" like those from Polymer project: https://elements.polymer-project.org/elements/app-layout

Thank you so much for spending time to test all those pages in desktop and in you mobile phone.

[plievone]

Thanks for a quick response! I will close this issue soon as important parts may be tracked in other issues. A couple of notes:

1. Yeah, was wondering about that, but as "code" tab didn't show the code, it might be common misconception until codepen (or similar) examples are used.
2. Good to hear! There's lot's of empty space there without those images and one may wonder what's up with the layout.
3. Perhaps a separate issue should be opened to track this disable tab bug in the docs.
4. Thanks for speedy fix!
5. Yeah, was thinking the same, but thought to report it as newcomers will just click the headers and other buttons (filtering, pagination etc) and the code is not visible on the "code" tab. Good to hear!
6. I'll try to get you some screenshots from some BrowserStack emulators. The issue is very easy to reproduce.
7. Yes, definitely you should not integrate fastclick.js in the project! Just that the docs may include additional libs if you like. The reason I commonly used fastclick and similar in the past is because on mobile and touch interfaces, the click delay was unnecessary when double click was not used in the project, so just using touchend was perfectly ok and things (double click zooming etc) usually worked as intended I recall. But I haven't tested how the situation is nowadays. As for the ripple effects, perhaps I can just disable them in the build or patch the runtime so that they won't be visible. The reason I'm so hesitant of them is if you try out docs on mobile, the buttons feel especially laggy perhaps partly due to touch delay, and mostly because ripple is so slow (framerate-wise) and it starts at touchend or even after that (or so it seems), exaggerating the laggy feel as there's a visible indicator for the lag due to ripple. I like fast interfaces where animations guide attention to important parts. For the ripple to work as an intended proxy for physical touch effect, it should start on touchstart or never :) in my projects (I haven't used material specs before this), so I'm seeking to opt-in instead of opt-out, but it's ok like this.
8. I understand, it's good to take your time and prioritize things. Representative docs are quite important for adoption for quick drive-by testers, potentially increasing the number of PR contributors for the project.

[plievone]

Here are a couple of screenshots for (6) on Android. Just scrolled downwards past the bottom, and the page shifted upwards, hiding the header and leaving a white bar at the bottom. The situation persists until scrolled to the top and past the top, when page returns to normal. This happens only on "Getting started" and "Typography" pages, both on main content and sidebar (when component list is expanded so that its height is large enough).