8000 _media doesn't evaluate dynamically · Issue #799 · lowdefy/lowdefy · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

_media doesn't evaluate dynamically #799

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.

Sign up for GitHub

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

Jump to bottom
Open
Radiergummi opened this issue Aug 25, 2021 · 8 comments
Open

_media doesn't evaluate dynamically #799

Radiergummi opened this issue Aug 25, 2021 · 8 comments
Labels
Feature New feature or request

Comments

@Radiergummi
Copy link
Contributor
Radiergummi commented Aug 25, 2021 •
edited
Loading

The _media operator returns information about the current screen dimensions, but doesn't update them if the size changes during client runtime.
Ideally, the data would change if the window is resized, so block visibility could be controlled by media queries, similar to CSS.

There's mainly two ways this can be achieved in modern browsers:

  1. The resize event:
    Listening to the event (ideally debounced), we can set the current screen dimensions after the window has been resized.
  2. The matchMedia() function:
    Using matchMedia, we can attach CSS media queries to the window object and add event listeners that will be triggered if the query starts to match, or doesn't match any longer. This allows to set named breakpoints (eg. sm, lg, etc.) in the application state.

By implementing those features combined, we could have up-to-date media query information available.
@Radiergummi Radiergummi added the Bug Something isn't working label Aug 25, 2021
@Gervwyk Gervwyk added Feature New feature or request and removed Bug Something isn't working labels Aug 25, 2021
@Gervwyk
Copy link
Member
Gervwyk commented Aug 25, 2021

In order to update block definitions, operators must also be reevaluated in engine. This can be done by calling context.update(); in the event. We need to consider where is the best place to register event listeners, I'm sure there would be other event listeners to add in the future besides resize. Perhaps the Events class should include a addEventListener method? Not sure, @SamTolmay?

@SamTolmay
Copy link
Member

I agree, but I don't think that should be part of the Events class, since that handles block events where this is more of an engine thing. We also need to be tracking which page is currently being rendered so we don't update the other pages. This could just be a check in context.update() though.

@Gervwyk
Copy link
Member
Gervwyk commented Aug 25, 2021

True also there is an events class for every block, so not what we are looking for. Maybe this should be implemented from Context component inside of renderer?

@Radiergummi
Copy link
Contributor Author

Maybe another solution for responsive layouts would be to have additional, size-dependent layout subkeys?

layout:
  span: 24
  md:
    span:
      12
  lg:
    span:
      8

The above example would simply add the layout classes with some kind of CSS media query, similar to how TailwindCSS does it. What do you think?

@SamTolmay
Copy link
Member
SamTolmay commented Aug 25, 2021 •
edited
Loading

This is already a feature that we forgot to document properly 😅. You can see #685 for reference.

At least this means the schema we have is intuitive

@Radiergummi
Copy link
Contributor Author

Haha alright that makes my life easier instantly, thank you 😄

@Gervwyk
Copy link
Member
Gervwyk commented Aug 25, 2021 •
edited
Loading

Btw, all styles are implemented as emotion classes. So you can use media queries like so:

id: bl
type: Box
style:
  '@media (min-width: 420px)':
     background: red
...

However, we also implement standard breakpoints as a shorthand for styles:

id: bl
type: Box
style:
  md:
     background: red
...

See mediaToCssObject for implementation.

@Gervwyk
Copy link
Member
Gervwyk commented Aug 25, 2021

Sorry, updated / corrected the previous comment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Feature New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Radier 2DC9 gummi @Gervwyk @SamTolmay
0