-
-
Notifications
You must be signed in to change notification settings - Fork 33
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
How can I define grid template area for portrait mode? [Help Required] #240
Comments
Hi, @noushad-pp. That's the right place to ask. By default, responsive props in Atomic Layout use Bootstrap 4 breakpoints (xs, sm, md, lg, xl). As you may already know, those are described using media queries targeting a device's width. This means that by default there is no behavior to target a device's orientation.
In order to assign responsive props based on device's orientation, you would have to create such breakpoint manually using // src/index.js
import Layout, { defaultOptions } from 'atomic-layout'
// Make sure to call this once, ideally on the root level of your app.
// This can be called before "ReactDOM.render()", for example.
Layout.configure({
breakpoints: {
// Include the default breakpoints to still apply
...defaultOptions.breakpoints,
// A custom breakpoint name.
// Naming it "portrait" to be intuitive, but can be about any string.
portrait: {
// Media query definition. In our case just device's orientation.
orientation: 'portrait'
}
}
})
By doing so, you create your custom responsive props suffix called Whenever you suffix a prop name with that suffix a prop value will be applied only when the media query is met (in our case when // src/MyComponent.jsx
import React from 'react'
import { Composition } from 'atomic-layout'
const MyComponent = () => (
<Composition areas="left right" areasPortrait="left center right">
{(Areas) => (
<React.Fragment>
<Areas.Left>I am rendered always.</Areas.Left>
<Areas.Center>I should be rendered only on portrait orientation.</Areas.Center>
<Areas.Right>I am rendered always as well.</Areas.Right>
</React.Fragment>
)}
</Composition>
) I hope this explanation helps. Let me know if you still have any questions. Please update to |
Awesome. Thanks for your time and effort into this detailed explanation. const isPortrait = window.screen.orientation.type.includes('portrait') || window.innerHeight > window.innerWidth;
const areasLandscape = `
media text
`;
const areasPortrait = `
media
text
`;
const areas = isPortrait ? areasPortrait : areasLandscape; |
Defining portrait breakpoint as mentioned above is causing This doesnt work in landscape mode const MyComponent = () => (
<Composition areas="left right" areasPortrait="left center right">
{(Areas) => (
<React.Fragment>
<Areas.Left>I am rendered always.</Areas.Left>
<Areas.Center>I should be rendered only on portrait orientation.</Areas.Center>
<Areas.Right>I am rendered always as well.</Areas.Right>
</React.Fragment>
)}
</Composition>
) This works import Layout, { defaultOptions } from 'atomic-layout'
Layout.configure({
breakpoints: {
...defaultOptions.breakpoints,
portrait: {
orientation: 'portrait'
},
landscape: {
orientation: 'landscape'
}
}
})
const MyComponent = () => (
<Composition areasLandscape="left right" areasPortrait="left center right">
{(Areas) => (
<React.Fragment>
<Areas.Left>I am rendered always.</Areas.Left>
<Areas.Center>I should be rendered only on portrait orientation.</Areas.Center>
<Areas.Right>I am rendered always as well.</Areas.Right>
</React.Fragment>
)}
</Composition>
) |
@noushad-pp if you dont specify the suffix the default breakpoint name is used which is |
Yes, thanks for mentioning that, @ruhaise. @noushad-pp you are right, it appears to be an issue in the way Atomic Layout opens breakpoints. Let me elaborate below. As Ruhaise has mentioned earlier,
As the next step, Atomic Layout determines when to render each of the areas. To do so, it first analyzes if two sibling responsive props declarations operate on the same breakpoint kind. For example,
Since the breakpoint kind between two declarations is different, the library decides to wrap an area component (i.e. Now to the issue. It looks that the Expected behavior would be the I'd say we need to define how breakpoints should behave in such case. |
Having though about this problem, I'm yet not sure what would be the expected behavior. To illustrate, let's replace <Composition areasLg="left" /> In isolation that means "render the <Composition areasLg="left" areasPortrait="left right" />
Current solution@noushad-pp since this behavior needs to be carefully designed, and I don't wish to block your development, I can suggest another way to tackle portrait orientation. Instead of declaring the import { useResponsiveValue, Composition } from 'atomic-layout'
const MyComponent = () => {
const shouldRenderWidget = useResponsiveValue({
portrait: true // whenever your custom "portrait" breakpoint is met, return the value (true)
}, false)
return (
<Composition areas="left right">
{Areas => (
<React.Fragment>
<Areas.Left>I should render always</Areas.Left>
<Areas.Right>I should render always</Areas.Right>
{shouldRenderWidget && <div>Visible on portrait orientation</div>}
</React.Fragment>
)}
</Composition>
)
} That means to leave out the portrait from the areas declaration and treat it as an extra scenario during rendering. I understand this is not ideal, as you may not be able to target the conditional widget with CSS Grid properties in its fullest extent. Also, please, feel free to voice what your expectations would be, so we could shape the behavior together. Thanks! |
I want to define a template-area for a component for portrait mode. Creating an issue as I dont know where to ask for help.
I can't understand how to define the template area for this kind of breakpoint from the documentation.
I tried both
areasPortrait
andareasOrientationPortrait
Is it possible this way of do I have to manage it programmatically?
eg:
The text was updated successfully, but these errors were encountered: