Responsive output functionally changed

[cfurlin]

I've been using the responsive webhelp template "Light" with a few color customizations in a sperate CSS file. In v20 it appears the template has changed. My TOC is now on the left and an additional "On this page" menu has shown up on the right listing sections of a topic. Not a problem because I quite like that layout better.

However, neither menu will display on small form-factor device browsers. In v19 the TOC was available as a drop-down but in v20 it doesn't display at all.

How do I get it back on phones and tablets? What am I missing?

[alin]

Hello,

In version 20, the Publication TOC (formerly known as Side TOC) was hidden by default on mobile layouts. You can use the new Publishing Template feature along with the Save template as action to customize a built-in template in order to display the Publishing TOC on mobile layouts. You can find more about this feature by watching this presentation video: https://www.oxygenxml.com/demo/opt.html

In order to display the Publication TOC on mobile layouts please follow these steps:

1. Duplicate the WebHelp Responsive built-in scenario
2. Select the Light template
3. Click on the Save Template as... button [next to the Ok and Cancel buttons in the Edit DITA Scenario Dialog]
4. Fill in the required fields (name & save location) and select the Include HTML Page Layout Files
5. Save the template.
6. Open the saved template (ZIP archive) in the Archive Browser view
7. Edit the "page-templates/wt_topic.html" HTML layout file
   Just replace the next fragment:

   Code: Select all

   <whc:webhelp_publication_toc data-tooltip-position="${webhelp.publication.toc.tooltip.position}">
   
   	<nav role="navigation"  id="wh_publication_toc" 
   
   		class="col-lg-3 col-md-3 col-sm-3 hidden-xs navbar hidden-print">
   
   		<whc:component_content/>
   
   	</nav>
   
   </whc:webhelp_publication_toc>

   with this one:

   Code: Select all

   <whc:webhelp_publication_toc data-tooltip-position="${webhelp.publication.toc.tooltip.position}">
   
   	<nav role="navigation"  id="wh_publication_toc" 
   
   		class="col-lg-3 col-md-3 col-sm-3 col-xs-12 navbar hidden-print">
   
   		<whc:component_content/>
   
   	</nav>
   
   </whc:webhelp_publication_toc>

   (Note: the hidden-xs Bootstrap class on the <nav> element was replaced with the col-xs-12 class)
8. Duplicate the WebHelp Responsive built-in scenario and load the template above using the "Choose custom template" action.
9. Save the above scenario and use it to obtain the WebHelp Responsive output.

By performing this procedure you should be able to see the "Publication TOC" above the topic content on the mobile layout.

Regards,
Alin

[mdslup]

This also worked for me! The menu wasn't showing up when I viewed the page on mobile, but this fixed that. It also let me reverse the menu and topic body within the topic pages, so that the topic content appears first, before the menu (which was better for my particular use case).

Thanks!