Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature_request(breakpoints): orientation breakpoint #26

Open
Kristinita opened this issue Aug 18, 2022 · 1 comment
Open

feature_request(breakpoints): orientation breakpoint #26

Kristinita opened this issue Aug 18, 2022 · 1 comment

Comments

@Kristinita
Copy link

Kristinita commented Aug 18, 2022

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
Copy link
Owner

jerrylow commented Mar 8, 2023

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants