Responsive theming

Plone Support Theming
1

(maybe a category: theming could be an idea).

I want to make some 'snippets' that can be reused in themes, so I wonder:

  1. for responsive theming: is it possible to load things like the live search box in a modal overlay. (Just add a search icon to the theme, and when the user clicks on it, the live search loads in an overlay
  2. There should be some responsive menus available (fragments for plane.app.themingfragments would be great). Is it possible to make things like the top menu of http://kongsberg.com/en/kogt/ or http://tympanus.net/Development/ResponsiveMultiLevelMenu/index2.html with just javascript, or does this require webcoutier dropdownmenu or something similar.
  3. what would be the best approch so (anyone) can reuse these things in their themes without too much work ?
2

This menu I would by using the navigation portlet and using diazo to transform it the right html that JS/CSS requires. You could also use the webcoutrier.dropdown menu.
I'd like to see the side navigation and top level menu unified into a single tile with the same settings in the future. They really aren't that different. Just css. The current top level nav is too inflexible.

3

Indeed, I added one.

4

What about using the sitemap (I started doing this, and it looks promising) ?
.. the CSS is easy, the javascript a bit harder....

5
  1. for responsive theming: is it possible to load things like the live search box in a modal overlay. (Just add a search icon to the theme, and when the user clicks on it, the live search loads in an overlay

After some work, I found that the syntax for 'modal overlay' was wrong in some docs.

<div class="searchboks">
 <a href="#modalsearch1" class="pat-plone-modal" data-pat-modal="{}" >
	search
 </a>
 <div id="modalsearch1" style="display: none">
	<div id="portal-searchbox" />
</div></div>
</div>`

and the rule
<replace css:theme-children="#portal-searchbox" css:content-children="#portal-searchbox" />

does the trick (note the syntax is pat-plane-modal, not pat-modal

6

Yes I agree!