Style Layout Collapse (and core layout) two column layouts

[mlncn]

From Zulip:

One major thing needing styling, for my layout_collapse module i stole the core classes layout--twocol-section layout--twocol-section--50-50 and it turns out those don't work in core, either. Also it is displaying differently logged in and logged out, on https://demo-pece.agaric.coop/about layout__region layout__region--first layout-collapse--column-one ends up stacked on top of layout__region layout__region--second layout-collapse--column-two; when logged in it's a 90-10 split, when of course it should be half and half.

You have full permission to mess with my template if needed or tell me to; i have to be in there adding the ability to do 75-25 splits anyway. We can put Bulma classes in there if that makes sense. But probably making Layout Collapse and core layout two-column etc templates both display exactly the same is probably what we should do.

[multilectical]

@mlncn I added a some bulma classes to the template in the pece theme which make the section show as display:flex.

I can't see why dashboard module doesn't apply the style when not logged in, but modules/contrib/dashboards/css/dashboard.css doesn't get pulled in as an anonymous user? Looking quickly it seems like web/modules/contrib/dashboards/dashboards.module:79 asks for it maybe when rendering a toolbar. Just for fun I tried giving anonymous users a bunch of admin permissions for dashboard module, but still nothing.

[multilectical]

I ended up just calling the library via the template. Maybe that should go into layout collapse too.

[mlncn]

@multilectical that was my first thought, that i did not get the same CSS, so i put a core Two Col layout on the same page as a step one trial of that, but it did not help at all. That's the bizarre thing— the layout classes Layout Collapse is using come from core— not Dashboard module!

[multilectical]

@mlncn well, in the dashboards module there is this in dashboards.libraries.yml:

core:
  version: 1.x
  css:
    theme:
      css/dashboard.css: {}
  dependencies:
    - core/drupalSettings

I think this is a library called core in dashboards module (or an override of the core css lib. need to look that up). But it refers to a css file in dashboards. That's what gives the div a display: flex when it works (incorrectly but with flex applied).

So maybe dashboards is overriding what you thought would get pulled in. Maybe include a libraries.yml in layout_collapse and call the css explicitly? Though they'll both maybe compete to define the same classes..

[mlncn]

@multilectical What i was saying is that core's two-column layouts also look terrible, and should also be fixed— it is not, in my first test, a problem specific to Layout Collapse. If core's two column layouts can be fixed by bringing in Dashboard module's CSS there too somehow, we can do that, but i'm really not sure that's the right fix, as Dashboard module should not be required for Layout Collapse nor really for PECE, and if it is Dashboard module messing things up we could and maybe should ditch it.