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.
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.
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.
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.
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.
Yes, that's fixed. Thank you very much. Could we make a few more tweaks to it as follows:
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.
Can you make the arrow at right into the kind standard triangle one sees in such dropdowns?
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.
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?
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.
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.
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.
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:
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?
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?
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.
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.
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.
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!
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
Can you elaborate more? Time as eroded my memory on this one.
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.
To be discussed on Thursday.
Ok, leaving open as reminder for now.
After our talk today, it sounds like there's a mod you need to make so continue to leave open.
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.
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.
Ready for review.
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.
It's up now let me know what you think. http://livingstonestage.lib.umd.edu/spectral-imaging/livingstones-1870-field-diary
It looks to be stuck on desktop, wherein when I open it I can scroll down to any text that appears below the screen.
That's on purpose, it behaves the same as the amazon link, and other modal windows.
So how does one see the rest of the TOC? I can't figure out a way to see the rest of the content.
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:
-- Nigel Banks nigel.g.banks@gmail.com
Should be sorted now, let me know what you think.
Yes, that's fixed. Thank you very much. Could we make a few more tweaks to it as follows:
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.
Can you make the arrow at right into the kind standard triangle one sees in such dropdowns?
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.
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?
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.
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.
Sure thing.
Do you mean using a caret instead of chevron? Like the:
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?
Should this apply to the mobile menu as well?
Sure thing, I'm applying this to the mobile menu as well.
Ok, this will have the same behaviour on desktop as well.
Ok.
So just the questions for 2 and 3, the others are up on stage.
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.
Just drawing attention to this ticket.
This needs to be done manually, and will be on hold until after the migration. I've added a note to the appropriate ticket.
Other issues should be sorted.
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!