Responsive output functionally changed

cfurlin
Posts: 8
Joined: Wed Nov 02, 2016 1:48 am

Responsive output functionally changed

Post by cfurlin » Tue Mar 20, 2018 8:24 pm

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
Site Admin
Posts: 140
Joined: Thu Dec 24, 2009 11:21 am

Re: Responsive output functionally changed

Post by alin » Mon Mar 26, 2018 5:27 pm

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
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

mdslup
Posts: 126
Joined: Tue Mar 06, 2018 1:34 am

Re: Responsive output functionally changed

Post by mdslup » Tue Aug 21, 2018 11:07 pm

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!

Post Reply