Standard Responsive Skin Update for Testing

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Standard Responsive Skin Update for Testing

Unread post by Tim Green »

I've spent the last few days making some basic improvements to the performance of the standard responsive skins included with Help & Manual 7. You can download the draft version here and I'd be very grateful for any feedback and information on bugs or problems if you find any:

Updated August 29, 10:15 a.m. CET:
Click here to download testing version of the skin

The main changes will be on phones, where it now works much better. Switching between the TOC and topic is a simple smooth swipe, and it works the same on Android, iOS and Windows Phone. In addition to this you can also switch with the hamburger icon at the top left on the phone screen, which should now be more responsive.

Logic in the TOC has been changed:

By default, the first tap on a phone selects a topic, tapping a selected topic then switches to the topic screen (in addition to the swipe and hamburger icon options).
You can change this to single tap (selection immediately switches to the topic) by changing the value of the new OPTION-TOC-SINGLETAP variable from "false" to "true" (without the quotes). This also works well because you can still scroll in the TOC if you are just swiping, only an explicit tap selects.

Open with topic or TOC pane on phones

When you open from an URL to a topic on a narrow mobile device the topic pane is always displayed first, but if you just access the index.html or the plain URL the TOC will be displayed first. You can change this with the OPTION-TOPIC-ON-START configuration variable. Setting it to "true" (without the quotes) will always start with the topic pane, even if no topic is included in the URL.

Other changes and improvements
  • Selected navigation icons above the TOC pane are highlighted, unselected ones are dimmed slightly
  • The active TOC pane icon no longer highlights or has an active mouse pointer on mouseover (desktop)
  • Selecting a keyword index item highlights it and switches directly to the associated topic pane
  • Selecting a search result link switches directly to the associated topic pane
  • If the window gets too narrow for the main project title at the top it is automatically shortened with an ellipsis instead of being hidden completely
  • Print icon is now reliably hidden on phones and tablets but shown on desktop devices, including browsers on Windows tablets, which I'm treating as desktops for the moment.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Standard Responsive Skin Update for Testing

Unread post by Tim Green »

Updated with the following corrections:
  • Hambuger icon at top left for switching between TOC and Topics in narrow mode didn't respond on Chrome on Windows touch devices
  • Additional vertical scrollbar was displayed for the TOC in desktop browsers in narrow mode when the TOC was longer than the browser window,
  • Main title at the top of the screen was positioned too low on the bottom border of its container in Narrow/Mobile mode
Click here to download testing version of the skin
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Standard Responsive Skin Update for Testing

Unread post by Tim Green »

Updated with the following changes and improvements:
  • When making the window narrower in desktop browsers the switch is always to the topic not the TOC, but when making wider while the TOC is visible the TOC stays visible.
  • Clicking on topics in the TOC in narrow mode always switches to the topic immediately on desktop browsers, even if single-click is not activated.
  • TOC, Index and Search icons in the Nav pane are now much more responsive on touch devices
  • Widths managed correctly in topics without headers. Using topics without headers is still a BAD IDEA in responsive sites. DON'T use them.
  • Small white artifact in lower right corner of top left mobile hamburger icon corrected
  • Popups didn't close on mobile devices. Now they do. Use only very small popups, otherwise you risk having them off screen.
  • Corrected hover artifacts in visible hotspots on mobile browsers
  • Corrected hover artifact in Show/Hide expanding sections tool in topic header on touch devices (stayed highlighted after first use)
  • The main title at the top will now also shorten with an ellipsis if it is too long in desktop or tablet mode (used to disappear or jump down)
  • Topic window would sometimes shift unexpectedly when making the window wider from narrow mode with the topic displayed in desktop browsers.
Click here to download testing version of the skin
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Teresa Groover
Posts: 8
Joined: Wed Feb 29, 2012 7:14 pm
Location: Georgia, USA

Re: Standard Responsive Skin Update for Testing

Unread post by Teresa Groover »

Tim,

I've been working today with the Webhelp, Responsive Grey, Keywordslist skin.

I just skimmed the content of this thread and saw
Other changes and improvements

Selected navigation icons above the TOC pane are highlighted, unselected ones are dimmed slightly
This seems to be true for the Table of Contents icon and the Search icon, but not for the Key Words List icon.

Am I missing something? Please advise.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Standard Responsive Skin Update for Testing

Unread post by Tim Green »

Hi Teresa,

These changes have now been included in the skins included with Help & Manual 7. Please install the latest version from here, then you will have the updated skins:

http://www.helpandmanual.com/downloads.html?upd
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Teresa Groover
Posts: 8
Joined: Wed Feb 29, 2012 7:14 pm
Location: Georgia, USA

Re: Standard Responsive Skin Update for Testing

Unread post by Teresa Groover »

I'm sorry I wasn't clear in my first post. As far as I can tell, I do have the most updated skins. I'm working with Help and Manual v7.0.6 Build 3732. It was while customizing the Webhelp, iFrames Responisve Grey, Keywordslist skin that I discovered this problem. I thought it was something I did, but when I re-published with the original unmodified skin, the same issue was there. Maybe the following screenshots will help explain my problem.
Original Skin.png
Customized Skin.png
In addition to the Keyword Index button not highlighting on selection, the button selected previous to the Index button appears highlighted.

Can you tell me how to fix this?
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Standard Responsive Skin Update for Testing

Unread post by Tim Green »

Hi Teresa,

I just checked this and you're right. However, only the keywordlist versions are affected. The versions with the standard keyword index are OK. We're looking into the problem and will update the affected skins asap.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Teresa Groover
Posts: 8
Joined: Wed Feb 29, 2012 7:14 pm
Location: Georgia, USA

Re: Standard Responsive Skin Update for Testing

Unread post by Teresa Groover »

Thank you, Tim, for your quick response.

I'll stick to the standard keyword index responsive skins until further notice.

And btw, I really like the use of variables in the new responsive skins --- so easy to edit and understand!
Teresa Groover
Posts: 8
Joined: Wed Feb 29, 2012 7:14 pm
Location: Georgia, USA

Re: Standard Responsive Skin Update for Testing

Unread post by Teresa Groover »

Unfortunately, the standard keyword index responsive skins don't highlight nav button selection at all.
:(
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Standard Responsive Skin Update for Testing

Unread post by Tim Green »

Teresa Groover wrote:Unfortunately, the standard keyword index responsive skins don't highlight nav button selection at all. :(
They do, I've tested it extensively. That looks like a strong indication that you aren't using the current version. I notice that you're using a modified version: You probably based that on an older copy. That won't get updated automatically after you do that. Make sure that you are on the current version (7.0.6 Build 3732), then get a fresh copy of the skin from the /Templates/HTML Skins folder in the Help & Manual program folder.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Teresa Groover
Posts: 8
Joined: Wed Feb 29, 2012 7:14 pm
Location: Georgia, USA

Re: Standard Responsive Skin Update for Testing

Unread post by Teresa Groover »

I checked my version and build again, and I am working with the most recent version (7.0.6 build 3732).

I copied a couple of responsive HTML templates with the standard indexing and ran a test publish with them.

You are absolutely right. The Nav buttons highlight on selection and work perfectly as expected.

I blame early Halloween spirits inciting user error in my test last Friday.

Please accept my most sincere apologies.
:oops:
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Standard Responsive Skin Update for Testing

Unread post by Tim Green »

Hi Teresa,

No problem, that's what we're here for... 8)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Post Reply