jerrylow/basictable

feature_request(breakpoints): orientation breakpoint

Opened this issue · 1 comments

Kristinita commented

1. Summary

It would be nice, if would be possible to have this behavior:

If page orientation is landscape:

    table will look normal (possibly use @media screen and (orientation landscape) CSS)

else orientation is portrait:

    table will look stacked (possibly use @media screen and (orientation portrait) CSS)

2. Argumentation

2.1. Non-use specific px breakpoints

In my site, I don’t use specific px breakpoints. I use media queries for landscape and portrait orientation.

Orientation

For landscape orientation, I use media query:

@media screen and (orientation landscape)

For portrait:

@media screen and (orientation portrait)

2.2. Argumentation of non-use specific px breakpoints

  1. In my experience, landscape and portrait orientation media queries are sufficient for most cases of responsive design. Perhaps it will be enough for Basic Table usage too.
  2. I don’t like the logic of specific px breakpoints. A breakpoint px value that works well in one case may not work so well in another case, and a different breakpoint value will be more successful.
  3. In process of time, device sizes are changing, and web developers have to change px breakpoints.
  4. Dealing with specific px breakpoints can be time-consuming.

3. Example of desired behavior

If user initialize Basic Table use this code:

new basictable('table', breakpoint: 'orientation')

Basic Table will have the behavior as in my Summary.

Thanks.

jerrylow commented

@Kristinita was wondering if the alternative is to use the CSS Controls version on https://www.jerrylow.com/basictable/demo/vanilla-js.html, is there something I'm missing, just cross checking with your list in Argumentation of non-use specific px breakpoints