We should make all the layouts that we bundle with Panels responsive and support right-to-left (RTL) languages to match expectations from Drupal 8 core.

This issue to make the layouts responsive and support RTL, or at least to serve as a check before a stable release.

Comments

dsnopek created an issue. See original summary.

Benia’s picture

Thank you dsnopek for bringing this improtant issue to more crowed.

When I started working with Panels in my RTL sites it was a nightmare for me to do 2 things:

1. RTLize each native-layout (from both tpl and css).

2. Responsify each layout (before I knew the Mobile-first paradigm). It took me much time, but I've learned much from that.

In any case, I think A Mobile-first responsification AT LEAST, is very very important, and could save tons of time for many Dev's, Site-builders, and could give spare time for people like me to RTLize the layouts...

As can be understood from what you said, it is important also to match D8 core technological standards which does include responsivness in generally all aspects.

dsnopek’s picture

If you made responsive and RTL versions of the default Panels layouts from D7, it'd be great if you could share them here! (Personally, I have experience making responsive layouts, but not RTL ones.. That sounds tricky because you might want to change source order of the columns as well?)

Otherwise, if the layout in D8's Bartik is sufficiently RTL/responsive, that might be a good example for an implementer to start from too.

Thanks!

Benia’s picture

The version of the site I mentioned is long gone... Because of RTL&Responsification problems with both the Native Panels' templates and long navigation time in and out of Drupal (especially because of my inability to get "Mini panels in-place editor, but not only and frequent visit of the TPL\CSS files), I've since than tried to do everything only with Views... It was with sorrow not to use Panels for some things, but I couldn't keep giving so much time on these things every time I wanted to change something (I RTLized&Responsified about 3 native templates and needed to RTLize each Radix\Panoply layout; Even the flipped ones :\ ).

I really think that removing some not-very-much-used native layouts, and keeping and responsifying only the very-much-used ones is what everyone in the community could benefit from.

japerry’s picture

The rest of the layouts have been ported, but there hasn't been much work to make them responsive yet.

DyanneNova’s picture

Assigned: Unassigned » DyanneNova
legolasbo’s picture

Layout styling has been converted to using flexbox when they layouts were ported in #2659614: Remove 'flexible' layout and convert remaining D7 layout plugins to D8. This means that responsifying them should be easy. It's just a matter of setting the width of the children based on the breakpoint in question and flexbox will do the rest.

dsnopek’s picture

Title: Layouts included in Panels should be responsive » Layouts included in Panels should be responsive and support RTL
Issue summary: View changes

Updated the title to include RTL (right-to-left) support as well. We could make that a separate issue too, but we discussed it here and possibly it's easier now that there's flexbox?

legolasbo’s picture

RTL is a matter of setting flex-direction: row-reverse; on the container. So yes, very easy :)

Benia’s picture

Will be glad to test any Responsive && RTL layouts on an Hebrew Drupal installment. Following this thread with passion :)

legolasbo’s picture

Status: Active » Fixed

After looking into ways to resolve this issue I'm very tempted to close this issue "works as designed" for the following reasons.

RTL support
Flexbox turns out to handle RTL automatically when the dir attribute of the <html> tag is set to rtl. This means we don't have to change anything for RTL support.

Responsive layouts
In order to make a page responsive, one has to set breakpoints. In core only the Bartik theme defines breakpoints, but the stable and classy themes do not. Since stable and classy are the themes that contrib and custom themes are probably going to depend on, we can't know the breakpoints the end user is going to use. Besides that, implementing responsive behaviour in flexbox is really really easy. All the themer has to do is change the width of the element in question at a given breakpoint and flexbox does the rest.

Conclusion
I am marking this issue fixed, as it was created before #2659614: Remove 'flexible' layout and convert remaining D7 layout plugins to D8 was created and fixed. We can therefor state that the issue was fixed as a part of that issue.

DyanneNova’s picture

Status: Fixed » Needs review

I want to make sure that these work responsively without needing a themer. I'm going to test the flexbox layouts and report back.

dsnopek’s picture

Yeah, I agree, we should have some responsive support without needing to do theming. Ideally, we'd want to provide our own responsive defaults, but allow a theme to easily override them. Maybe this means putting the responsive CSS in a seperate CSS file, and then the theme can just override that CSS file? Mimicking Bartik's breakpoints for the default seems reasonable.

Benia’s picture

I also support using FlexBox. A modern efficient solution that resembles advancement and thus worthy of Drupal 8.

samuel.mortenson’s picture

I'm doing some queue cleanup - Any update on this issue?

geek-merlin’s picture

Note: For responsive layouts an important issue is content-first (sidebars after middle content in source).
I created this for D7: Panels Content First

Benia’s picture

Status: Needs review » Active

Hi, a D8 version ready?

cmwelding’s picture

I am having pretty good luck with Bootstrap Layouts.

Benia’s picture

cmwelding, don't count on Bootstrap. Not everyone uses or love Bootstrap. This all method of counting on a theme is old fashioned. In Wordpress for example the page builders create a standalone responsive and RTLized code. Drupal needs a Page builder like Wordpress Elementor, not theme dependence. Theme dependence is antiquity. They understood that in Wordpress, we should understand it here as well. Panels could be upgraded to be more similar to Elementor, fully responsive and RTLized by itself.

Try Wordpress Elementor, you could feel what I'm talking about.

Sadly I have no more time to invest in this problem. I am also not a PHP programmer. A few times I said how important this is and time and again I here on theme dependence. We should all wonder why in the Wordpress community they came up with solutions like Elementor a long time ago and in Drupal 8 we are all still stuck with an old fashion strategy of forcing ourselves for certain themes. Drupal should bring the responsivness. Only Drupal and it's modules.

DamienMcKenna’s picture

Version: 8.x-3.x-dev » 8.x-4.x-dev