closed livingstoneonline/livingstoneonline#106

Dropdown: Widget

awisnicki

Placeholder for the fact that we need this widget. When you're ready, let me know and I'll tell you what I need, although I think you have a good idea already.

Adrian

nigelgbanks

Can you elaborate more? Time as eroded my memory on this one.

awisnicki

This has to do with the Dropdown on the critical edition pages, such as this one: http://livingstoneonline.org/spectral-imaging/livingstones-1870-field-diary

Right now, all the sections tumble down in one long list. What I wanted to be able to add are (non-clickable) headings, so as to be able to group sets of sections. In the example below, "Prefatory Materials" and "The Manuscripts" are such headings:

Prefatory Materials      Introduction to the Edition      Edition Guide      The Project Team      Acknowledgments The Manuscripts      Images & Transcriptions of the 1870 Field Diary      Images & Transcriptions of Select 1870-1871 Texts      Three Versions of the 1870 Field Diary

Separately -- although this may be captured in another ticket, I'll have to check -- I had also wanted to have the dropdown (at least on desktop version) be the kind of dropdown through which one scrolls (as on the Catalogue page) rather than the kind of tumbledown/show all dropdown as now.

nigelgbanks

To be discussed on Thursday.

awisnicki

Ok, leaving open as reminder for now.

awisnicki

After our talk today, it sounds like there's a mod you need to make so continue to leave open.

nigelgbanks

It's ready for review, just create links as you normally would for items in the table of contents, but use the value <nolink> for headings.

screen shot 2017-06-12 at 20 42 03

screen shot 2017-06-12 at 20 42 54

screen shot 2017-06-12 at 20 43 05

awisnicki

This looks good and works beautifully. Thank you!

In returning to the ticket above, I see there's also a second part:

"Separately -- although this may be captured in another ticket, I'll have to check -- I had also wanted to have the dropdown (at least on desktop version) be the kind of dropdown through which one scrolls (as on the Catalogue page) rather than the kind of tumbledown/show all dropdown as now."

We discussed this (way back when) and you came up with the solution that the dropdown when opened, rather than push down the text below it, would appear over that text, so that still needs to be implemented.

nigelgbanks

Ready for review.

awisnicki

This works great, but I have one question. Can we have it so that when the dropdown TOC is open, everything in the background goes slightly gray/dim. Take a look at this page and click on the book at left: https://www.amazon.com/Hamlet-Folger-Library-Shakespeare-William/dp/074347712X/ref=sr_1_1?ie=UTF8&qid=1497573285&sr=8-1&keywords=hamlet

You'll see that when the pop up appears, the material in the background/below it dims. I think this kind of thing already happens in our MS viewer, it's just hard to see because there's so little margin around it there.

awisnicki

It looks to be stuck on desktop, wherein when I open it I can scroll down to any text that appears below the screen.

nigelgbanks

That's on purpose, it behaves the same as the amazon link, and other modal windows.

awisnicki

So how does one see the rest of the TOC? I can't figure out a way to see the rest of the content.

nigelgbanks

Ah my bad, my screen is huge I didn't anticipate it extending beyond the screen. I'll fix it. I misunderstood and thought you wished to have scroll through the page not the table of contents.

On Thu, Jun 22, 2017 at 12:10 PM, awisnicki notifications@github.com wrote:

So how does one see the rest of the TOC? I can't figure out a way to see the rest of the content.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/livingstoneonline/livingstoneonline/issues/106#issuecomment-310349619, or mute the thread https://github.com/notifications/unsubscribe-auth/AAdvzfcxj_ACITzi_rnA41QWTStQmwnvks5sGku2gaJpZM4KzF_v .

-- Nigel Banks nigel.g.banks@gmail.com

nigelgbanks

Should be sorted now, let me know what you think.

awisnicki

Yes, that's fixed. Thank you very much. Could we make a few more tweaks to it as follows:

  1. When it's fully open could you put a thin black border around the whole dropdown? I think that would serve as a good boundary marker between the dropdown and the greyed-out text beyond. The gray border when closed can be left as is. The thickness of the black border when fully open should be the same as the thickness of the gray border when the dropdown is closed.

  2. Can you make the arrow at right into the kind standard triangle one sees in such dropdowns?

  3. A few people have pointed out that the dropdown can be hard to notice when closed. Could you make the text the following color (#428bca) only when closed. This is the same color that's used for hyperlinks on the site. When the dropdown is fully open all the text should be black.

  4. When the dropdown is closed, the white space between the text and the arrows is not clickable. Could we make it instead that clicking anywhere on the dropdown (when it is closed) opens it?

awisnicki

I also notice that on mobile links from the dropdown automatically open a new window. This should not be happening. Links should open in the same window unless, in the topmenu admin section, specifically marked to open in a new window.

awisnicki

Finally, on mobile, if text wraps to a second line in the dropdown, I think we should indent it like the first line, as I don't think it looks good the way it's rendering now. img_6498

nigelgbanks
  1. When it's fully open could you put a thin black border around the whole dropdown? I think that would serve as a good boundary marker between the dropdown and the greyed-out text beyond. The gray border when closed can be left as is. The thickness of the black border when fully open should be the same as the thickness of the gray border when the dropdown is closed.

Sure thing.

  1. Can you make the arrow at right into the kind standard triangle one sees in such dropdowns?

Do you mean using a caret instead of chevron? Like the:

screen shot 2017-06-28 at 12 57 12

I assume this should apply to the mobile menu dropdown as well? Should it still turn from left to right when opened or closed, or should behave like the "Browse Collection" dropdown works?

  1. A few people have pointed out that the dropdown can be hard to notice when closed. Could you make the text the following color (#428bca) only when closed. This is the same color that's used for hyperlinks on the site. When the dropdown is fully open all the text should be black.

Should this apply to the mobile menu as well?

  1. When the dropdown is closed, the white space between the text and the arrows is not clickable. Could we make it instead that clicking anywhere on the dropdown (when it is closed) opens it?

Sure thing, I'm applying this to the mobile menu as well.

I also notice that on mobile links from the dropdown automatically open a new window. This should not be happening. Links should open in the same window unless, in the topmenu admin section, specifically marked to open in a new window.

Ok, this will have the same behaviour on desktop as well.

Finally, on mobile, if text wraps to a second line in the dropdown, I think we should indent it like the first line, as I don't think it looks good the way it's rendering now.

Ok.

So just the questions for 2 and 3, the others are up on stage.

awisnicki

Thanks for all of this! Confirming that: border looks good (p.1); fully-clickable space looks good (p.4); text wrapping (p.6) looks good.

Links in dropdown (p.5) also looks good, although note that you've not brought down some of the specific configurations for links from prod -- some links are configured to open in a new window (on prod), but that formatting has been lost on stage. See, for instance, "Images & Transcriptions of the 1870 Field Diary" in the 1870 FD dropdown. I just changed this to target="_blank" to match prod, but it wasn't carried over automatically. In any case, this is minor and I can easily reimplement when the time comes, but just wanted to make you aware of this issue.

Re p.2, yes using same symbol as on Browse Collection and, yes, it'd be great to have it point right when closed and point down when open. Could we also have the right/down function apply to Browse Collection? Finally, yes, to be consistent we should have on the mobile dropdown menu also.

Re p.3, for now let's just try it on the desktop menu. For mobile stick with black for now please.

awisnicki

Just drawing attention to this ticket.

nigelgbanks

Links in dropdown (p.5) also looks good, although note that you've not brought down some of the specific configurations for links from prod -- some links are configured to open in a new window (on prod), but that formatting has been lost on stage. See, for instance, "Images & Transcriptions of the 1870 Field Diary" in the 1870 FD dropdown. I just changed this to target="_blank" to match prod, but it wasn't carried over automatically. In any case, this is minor and I can easily reimplement when the time comes, but just wanted to make you aware of this issue.

This needs to be done manually, and will be on hold until after the migration. I've added a note to the appropriate ticket.

nigelgbanks

Other issues should be sorted.

awisnicki

OK, everything that was to be resolved here looks resolved (except for the one point you raised in the other ticket). So I'll close this one. Thanks very much!