Plone multitheme

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:08pm

@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