New Theme: Layout and Interaction Issues

[geealbers]

Here are my general notes on the latest version of the theme. A mix of layout stuff as well as some interaction things that @rtapales will need to consult on. As I mentioned in email, I think there are also a number of style tweaks/fixes that need to be made to bring the theme in line with the wireframes, but I'll leave that to Ramon to detail for now.

I'm next looking at some things around the Figures, Style Variables and Layout Handling controls, and Accessibility. And I expect I'll post on them separately just to keep things contained.

Navbar

• [x] The hover controls for having the page counter appear is better now, but could we remove it from the other icons and text links up there so it's just the two large blank areas to either side? To me, having the page counter show up every time I wanted to page forward or open the menu was distracting. Ramon, what do you think?
• [x] I thought the inverse/alternate versions of the nav were supposed to use the primary accent color, not black and white. http://gettylabs.org/quire/quire_starter_theme_101518/quire_starter_theme_primary_alt_nav.html and http://gettylabs.org/quire/quire_starter_theme_101518/quire_starter_theme_secondary_alt_nav.html

Menu

• [x] When the menu is open, I think users should still be able to scroll the main content area. Right now it's locked.
• [x] I dislike the interaction of opening the menu and then having to move the mouse over to the left in order to close it. Ramon, what do you think about adding an X icon to the upper right corner of the menu? Or ...?
• [x] The Other Formats section should come before the Resources section, and the text of the list items here should support Markdown formatting.

Search

• [x] The styling doesn't match here. Note too that in the wireframe, there's no heading for the page, just a "Search this publication" placeholder in the text input
• [x] Similar to the menu opening/closing interaction, I dislike how you open it on the left and have to move all the way to the right to close it again. Can we move the X to the left?

Cover

• [x] Ramon had shown me some alternative graphics/gradients to use as a default for the cover before user customized it themselves. Let's look at those again and implement one.

Contents

• [x] In the contents list "SECTION-NO-LANDING" should be appearing as "Section No Landing". Just need to use Hugo's humanize and title functions.
• [x] I think I told you otherwise at one point, but let's add the Resources section below Other Formats on the Contents pages (like they are in the menu). From a user standpoint I don't think it makes sense to arbitrarily have them in one place but not the other.

Entry pages

• [x] Side by side layout needs to flip to top and bottom at a wider break point than it's currently set to. AS it is now, the text column gets crazy narrow.

General

• [x] Add new style from Ramon for popup tooltips
• [x] Anchor links get hidden under navbar, like when you click the return arrow on a footnote, it's supposed to scroll the footnote number in the text into view, but the number is hidden. We've used JS to deal with this in past publications, though Eric also had a CSS version working at some point?
• [x] sliding in animations match Ramon's comp but feel a little slow the more I click around the site. I keep feeling like I'm waiting for them to finish. Could we maybe try speeding them up?

[mantasandri]

Thanks for the list, I've started working on some of these already. I'll wait on some of the other ones from @rtapales to clarify as they may cause other design related issues (ie: Navbar, Menu Interaction and Tooltip).

As far as the 'Resources' section, I thought we had decided to remove all submenus as it was going to interfere too much with content list backend and other times when pages are not titled like that, are we adding that back in?

Also for search - I've removed the header to better match the comp, also just to confirm, search text highlighting is being pushed to next release.

[geealbers]

Oh good point about the Resources section. Though we have the Downloads list there now, so let's take those out. Then the contents pages will just be contents, and the Resources and Downloads will only be accessible in the menu. Thanks

[geealbers]

And yes, search highlighting is pushed to the next release.

[mantasandri]

Finished most of these, the ones that are left are the ones that @rtapales needs to go over.

The hover controls for having the page counter appear is better now, but could we remove it from the other icons and text links up there so it's just the two large blank areas to either side? To me, having the page counter show up every time I wanted to page forward or open the menu was distracting. Ramon, what do you think?

Ramon had shown me some alternative graphics/gradients to use as a default for the cover before user customized it themselves. Let's look at those again and implement one.

Add new style from Ramon for popup tooltips

[geealbers]

Fantastic, thanks @mantasandri!

@rtapales, on the second of the three items Mantas called out, I had some additional thoughts. For the cover graphic, keep in mind that ideally it would work with either of the two theme variants so maybe it uses the red and blue in a single gradient? Or is a third color that works with both? Also, I'd like to take whatever you use there and use it as the default cover graphic in both the EPUB and PDF outputs. So if you could provide a version at 8.5 x 11 proportions, that would be great. Right not the default graphic for those is sort of a weird book icon (I can't remember why).

[mantasandri]

Got the new graphic/gradient and design on the tooltip from @rtapales and they've both been implemented (https://github.com/gettypubs/quire-starter-theme/commit/44afe949aa8fa7a611df82d9a82d2a643d73ceb6). Just have this last issue:

The hover controls for having the page counter appear is better now, but could we remove it from the other icons and text links up there so it's just the two large blank areas to either side? To me, having the page counter show up every time I wanted to page forward or open the menu was distracting. Ramon, what do you think?

I've tried to implement it via CSS with hovers, can't seem to get it to function as desired using only CSS, but I'll keep playing with it to see if I can get a hit on the deadspace between the icons to trigger the affect.

[mantasandri]

Closing out with the most recent commit - https://github.com/gettypubs/quire-starter-theme/commit/c5fc6d067e592a4da4dfaf85301f36ea55e12a4f