Plone multitheme

pigeonflight · November 29, 2017, 11:58am

Here's a recipe for doing a fullwidth toggle that doesn't cause side scrolling (an issue I had with other fullwidth implementations).

gist.github.com

https://gist.github.com/pigeonflight/8835a2521749526e5b3049243c00ada3

README.md

This assumes that you're using collective.themesitesetup. I don't recommend that you use this fullwidth implementation on pages where side portlets are enabled, it tends to look "wonky".

- Include the ``fullwidth-for-mosaic.less`` file with your theme, it needs to be included as part of one of the files that gets compiled to
css.
- Create a folder in your theme and name it ``install`` then place the ``registry.xml`` in the ``install`` folder.
- Add the line below to your ``manifest.cfg`` file
```
[theme:genericsetup]
install = install
```

fullwidth-for-mosaic.less

/* ====== overrides for fullwidth ====== */
.mosaic-grid-row-fullwidth {
  padding-left: 0;
  padding-right: 0;
}
/* make the containers 100% by default */
.outer-wrapper > .container{
 width:100%;
}

This file has been truncated. show original

registry.xml

<?xml version="1.0"?>
<registry>
/* adds a custom fullwidth action */
<record name="plone.app.mosaic.default_available_actions">
    <value purge="False">
      <element>grid-row-fullwidth</element>
    </value>
</record>
<records interface="plone.app.mosaic.interfaces.IFormat"
           prefix="plone.app.mosaic.formats.grid_row_fullwidth">

This file has been truncated. show original

tmassman · November 29, 2017, 12:20pm

A full width row only makes sense and looks ok when you don't have portlets available on a page, so please take this into account

pigeonflight · November 29, 2017, 12:52pm

Good catch. I've added a note to the gist.

espenmn · November 29, 2017, 5:43pm

Actually, portlets do not 'look correct on most themes anyway (because the (CSS) grid does not 'add up').
So if you need portals, you probably have to edit something anyway (?)… at least f you use columns

espenmn · November 29, 2017, 7:09pm

Is there a way to 'skip the mosaic part of the class'.

I want

 .grid-row-fullwidth

not

.mosaic-grid-row-fullwidth

(because then I can use already declared css)

For example, adding class 'container' to the row would take care of making the width the same as the 'not fullwidth content'

pigeonflight · November 29, 2017, 11:15pm

I think that all of this is a bit of a workaround.
The ideal way to do this is to use .container-fluid, this is the ¨proper way" to use bootstrap to get a fullwidth row.
The issue I'm coming across is that barceloneta and barceloneta based themes make liberal use of .container.

Unless I'm misunderstanding how bootstrap works, the ideal scenario would involve using .container and .container-fluid as they were designed. This would require some tweaks to barceloneta.

In the meantime, I think you could get away with using just .grid-row-fullwidth but I have not tested this.

tmassman · November 30, 2017, 12:06am

I think this is similar to your approach:

The TB's CSS class .container-fluid is made for exactly this usecase, but:

.container-fluid and .container need to be next to each other, not contained
a .container-fluid can never break out of the boundaries of a .container
a .container-fluid should be used inside a .container to create a nested grid

So, to break out of a .container and get a full width row, you have to use one of the many hacks available.

As you can see in https://github.com/it-spirit/plonetheme.barcelonetang/blob/master/src/plonetheme/barcelonetang/theme/_less/theme.less#L160, the theme only creates a full-width row when there is no portlet defined. But that required some extra classes on the main column to work: https://github.com/it-spirit/plonetheme.barcelonetang/blob/master/src/plonetheme/barcelonetang/theme/rules/content.xml#L10-L15 (see the additional col-md-* classes).

espenmn · November 30, 2017, 10:17am

Why can you not just add this to the add-on (in profiles and css )?

espenmn · November 30, 2017, 12:16pm

I am solving this 'the other way around'.

With less, it looks like you can do:

.mosaic-grid-row-fullwidth {
  .container;
}

Which basically adds all CSS from .container to .mosaic-grid-row-fullwidth class.

(might look a bit odd in (html) code, but maybe more logical that 'fullwidth' starts with fullwidth and you can 'remove it' than the other way around

It can be seen here: http://xweb14d.plana.dk:8081/Plone/sliders

##Fluid / not fluid
The best option could be to toggle between classes 'container' and 'container-fluid', if that was possible ?

pigeonflight · November 30, 2017, 2:09pm

@espenmn... funny you mention all of this.. I composed the response below about 2 hours ago but just got around to posting it. Your solution is intriguing, I'll have to look at that.
Regarding themesitesetup, I mentioned it because I'm assuming TTW all the way, but it means they would be on a installation with all those prerequisites.

Exactly, these hacks solve the problem but....
The problem we have is that #content, which is where everything gets rendered is wrapped in a .container. I've thought of using a Diazo rule to kill the wrapping .container but haven't gotten around to the experiment.

What I'd like to see:

It would be nice to make it possible for mosaic to use the .container and .container-fluid as they were designed.
So two options (both I have not explored):

Tweak barcelonta to ship with .container-fluid instead of .container by default.
Create Diazo rules that remove the .container dynamically when mosaic is enabled.

It would then mean that every mosaic row would be wrapped in a .container by default making each row fixed-width by default.
Then when a user selects fullwidth, it would switch to toggle .container to .container-fluid to make the row become fullwidth. I haven't dug deep enough to know what will happen with such an approach. Best case, the implementation will just work but I'm guessing that something will break with the current mosaic implementation if this is done.

tmassman · November 30, 2017, 2:25pm

That only works if you have a 1 column layout and no portlets left or right. For a 2 or 3 column layout you need the container class and then apply the grid.

pigeonflight · November 30, 2017, 2:32pm

That's the detail I'm probably overlooking, though I tend not to use fullwidth on pages with columns.

espenmn · November 30, 2017, 4:30pm

So far I have managed to do everything without using diazo.

espenmn · November 30, 2017, 4:33pm

It could be possible to fix this with CSS flex in the future (which would basically mean no grid at all).

That said: I can not see too many uses of full width with portlets.
The best solution to this could be to drop the portlets from the page and instead use a 'mosaic portlet container'

espenmn · December 1, 2017, 12:48pm

A diazo 'expert' might be able to adjust the CSS classes ?
(I tried adding a 'portlets placeholder tile' and move the portlets there, without luck).

If anyone has a suggestion of how to make a tile a 'portlet provider (or something similar), please let me know....

espenmn · December 2, 2017, 4:56pm

I might have a solution for this.
http://xweb14d.plana.dk:8081/Plone/fragments/portlets-fragment

I could need some help with the diazo rule to get the css classes right (I need to adjust the ${central} value in default.xml rules

github.com

collective/collective.multitheme/blob/master/src/collective/multitheme/theme/default.xml#L47-L52


<xsl:variable name="central">
  <xsl:if test="//aside[@id='portal-column-one'] and //aside[@id='portal-column-two']">col-xs-12 col-sm-6</xsl:if>
  <xsl:if test="//aside[@id='portal-column-two'] and not(//aside[@id='portal-column-one'])">col-xs-12 col-sm-9</xsl:if>
  <xsl:if test="//aside[@id='portal-column-one'] and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-9</xsl:if>
  <xsl:if test="not(//aside[@id='portal-column-one']) and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-12</xsl:if>
  <xsl:if test="//@class='render_portlets'">col-xs-12 col-sm-12</xsl:if>

When I adjusted the rules to drop the portlets, I noticed that both left and right porlet managers use id="sidebar'.... this is probably not 'good' (`?)

My change to the rules is just:

github.com

collective/collective.multitheme/blob/master/src/collective/multitheme/theme/default.xml#L76


        <xsl:copy-of css:select="#viewlet-below-content" />
      </div>
    </footer>
  </div>
</replace>


<!-- Alert message -->
<replace css:theme-children="#global_statusmessage" css:content-children="#global_statusmessage" />


<!-- rules to remove portlets if we have a portlet fragment-->
<rules css:if-content="#fragment-left-portlets">
       <drop css-content-children="#portal-column-one"/>
</rules>
<rules css:if-content="#fragment-right-portlets">
        <drop css-content-children="#portal-column-two"/>
</rules>


<!-- Left column -->
<rules css:if-content="#portal-column-one">
 <rules css:if-not-content="#fragment-left-portlets">
  <replace css:theme="#column1-container">

(but would it be better to drop something 'earlier in the rules' `

espenmn · December 8, 2017, 2:59pm

I have 'gotten some way'… there are still a few bugs; 'I can not go back up') ( if you helping with them):

http://xweb14d.plana.dk:8081/Plone/fragments/fullpage/

espenmn · April 23, 2018, 5:01pm

If ANYONE has some spare time, it would be nice to have a release.

I have put a lot of work into this, but I could need some help with checking the code / the css etc.

Also, I have made some demo videos:

http://xweb14d.plana.dk:8081/Plone

djay · April 24, 2018, 4:38am

site seems to be down

espenmn · April 24, 2018, 6:36am

It's back