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.

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

[Drawer] Using media queries instead of javascript width detection #6176

Closed
kybarg opened this issue Feb 17, 2017 · 2 comments
Closed

[Drawer] Using media queries instead of javascript width detection #6176

kybarg opened this issue Feb 17, 2017 · 2 comments
Labels
component: drawer This is the name of the generic UI component, not the React module! new feature New feature or request

Comments

@kybarg
Copy link
Contributor

kybarg commented Feb 17, 2017

Problem description

Detecting width with javascript and using it for example setting docked param for drawers preventing it to be rendered on server.
It would be nice to have option to set not only true false but also xl, lg, sm as value.
For example

<Drawer docked='xl' />

renders to

<style>
@media (min-width: 1024px) {
   .docked {
      display: block;
   }
}
</style>
...
<body>
   <div class="drawer docked"></div>
</body>

Versions

  • Material-UI: next
  • React: 15.4.2
  • Browser: chrome
@stunaz
Copy link
Contributor

stunaz commented Feb 17, 2017

Or somehow to get any time this object (from the muiThememaybe?)

{
  xs: true,
  sm: false,
  md:false,
  lg:false,
  xl:false,
}

We could then customized a lot of stuff

@oliviertassinari oliviertassinari added the component: drawer This is the name of the generic UI component, not the React module! label Jun 8, 2017
@oliviertassinari oliviertassinari changed the title Using media queries instead of javascript width detection [Drawer] Using media queries instead of javascript width detection Jun 8, 2017
@oliviertassinari oliviertassinari added the new feature New feature or request label Jul 4, 2017
@mui mui deleted a comment from bora89 Aug 22, 2017
@oliviertassinari
Copy link
Member

This issue can now be seen in the documentation (with SSR and next.js). We could potentially greatly improve the time to first paint by fixing this issue.

@oliviertassinari oliviertassinari mentioned this issue Aug 26, 2017
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: drawer This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@stunaz @oliviertassinari @kybarg