closed livingstoneonline/livingstoneonline#155

Mobile: wrapping text.

awisnicki

See attached screen shots. The first is from the item details section of the Image viewer. The second comes from this page: http://livingstonestage.lib.umd.edu/about-this-site/livingstone-online-site-guide img_6495 img_6496

nigelgbanks

Ready for review.

awisnicki

The item details page is fixed, so thanks for that.

I see that on the other page you've moved the table of contents over to the left, so that helps with the issue and I see also that I can move the page over to the right and see the text that's running off the screen. Is that the solution you'd like to use? If so, that's fine, but note that I was suggesting wrapping the text so that it didn't run off the screen.

nigelgbanks

I think I confused tickets. I didn't make any changes regarding the second image. Looks like I skipped over it thinking it was related to the first stated issue, or associated it with another ticket.

The fix for the first image was to have text wrap it was using <dd> elements which don't wrap by default, so pretty straight forward.

The second image is a bit tricky since it's part of the content and built with a single row table? Along with the &nbsp;'s it's highly unlikely that we'll be able to make this wrap accordingly without changing the actual content.

Likely to make it work correctly we'll have to build a widget or set-out some rules on how to structure the HTML. Perhaps something like this:

https://codepen.io/nbanks/pen/wepoYZ

Does this look reasonable to you?

awisnicki

The example you've provided looks good to me and I'd be happy to go with it. I see two issues, however.

First, it seems to me that it would take a lot of coding to implement this manually, unless there's an automated way to do it. In case it helps, such TOC text, if present (it isn't always unless the given page has multiple sections), always precedes the first <hr/> on the page.

Second, TOC text, I believe, can take one of three forms: a) unordered lists (http://livingstoneonline.org/about-site/design-livingstone-online), b) ordered lists (http://livingstoneonline.org/spectral-imaging/creating-1870-field-diary), and c) unordered lists that are actually partly ordered (http://livingstoneonline.org/spectral-imaging/glossary-key-terms-livingstones-manuscripts-1870-71). I'd be OK with converting category #c into category #b.

However, I wonder if another option here is to set up some kind of formula for mobile that, for any given page, ignores all instances of &nbsp; before the first <hr/>, puts all text flush left, and, as needed, simply wraps it to the next line.

Does that make sense/seem feasible/is a simpler solution?

nigelgbanks

I think we can cover your three use-cases with HTML lists:

https://codepen.io/nbanks/pen/wepoYZ

Altering the number of spaces on mobile is problematic for when they may rotate the screen and change the dimensions.

awisnicki

Ok, great. Thank you. Then I'll leave this ticket open so you can take it forward with this.

nigelgbanks

We'll put it on hold until the move to production since it will require changing the content.

awisnicki

Just a reminder that this is something that needs to be adjusted when we move to prod. Should this remain on hold?

nigelgbanks

We can't do it till after the migration.

nigelgbanks

Deployed on stage, I've changed the tables where I found them but there is likely a few still about: http://livingstonestage.lib.umd.edu/spectral-imaging/edition-guide-1

Steps: <img width="1361" alt="screen shot 2017-09-13 at 08 20 02" src="https://user-images.githubusercontent.com/487373/30364537-8bd6a704-985c-11e7-8de5-fa3980c0a6a7.png"> <img width="1369" alt="screen shot 2017-09-13 at 08 20 10" src="https://user-images.githubusercontent.com/487373/30364538-8bf24e14-985c-11e7-9ffd-0d517948c16a.png"> <img width="1361" alt="screen shot 2017-09-13 at 08 20 20" src="https://user-images.githubusercontent.com/487373/30364539-8bf428a6-985c-11e7-8161-ee395b6f958e.png">

awisnicki

Additionally, on this page (http://livingstonestage.lib.umd.edu/spectral-imaging/creating-the-1870-field-diary) and others like it, with numbering of tables of contents, the numerals etc are no longer hyperlinked (where they were previously) and on mobile go off the screen at left. img_7182

awisnicki

I deleted my initial comments on this because in re-reviewing, I think I've gotten a better handle on this.

I see now that longer text should be wrapping, and I see that when it's indented it wraps properly now, so all good on that. So here are the questions I have:

Should text that is not indented, but that is long be wrapping? See for instance this page: http://livingstonestage.lib.umd.edu/life-and-times/livingstone-s-life-expeditions I believe that it should, but it isn't on this page and others like it, though perhaps the new table settings haven't been applied to this page?

I went to test the table settings out. I see them in your screen shot above, but they don't appear in my version of the WYSIWYG, so I suspect you forgot to turn them on for me.

nigelgbanks

Additionally, on this page (http://livingstonestage.lib.umd.edu/spectral-imaging/creating-the-1870-field-diary) and others like it, with numbering of tables of contents, the numerals etc are no longer hyperlinked (where they were previously) and on mobile go off the screen at left.

I've added the text back in for the lists, this isn't the normal way to do lists but whatever works for you. To do this I've changed them all to be formatted as un-numbered lists, then added the numbers, etc to the text inside the link.

Should text that is not indented, but that is long be wrapping? See for instance this page: http://livingstonestage.lib.umd.edu/life-and-times/livingstone-s-life-expeditions

It should wrap, that page shouldn't be long in this case. The problem stems from embedded the images in tables with fixed width:

<table align="center" cellpadding="1" cellspacing="1" style="width: 550px;">
...
<img alt="David Livingstone - Lake Ngami (Painted Magic Lantern Slide), c.1857.  Copyright National Library of Scotland. Creative Commons Share-alike 2.5 UK: Scotland (https://creativecommons.org/licenses/by-nc-sa/2.5/scotland/)." class="media-image attr__typeof__foaf:Image img__fid__306 img__view_mode__media_original attr__format__media_original" src="/sites/default/files/life-and-times/livingstone-s-life-expeditions/liv_014066_0001-article.jpg" style="width: 550px;" typeof="foaf:Image&quot;">

There shouldn't be any use of fixed width elements anywhere on the page as it prevents responsive design. I will search and remove these tables and replace it with the proper html / css.

I went to test the table settings out. I see them in your screen shot above, but they don't appear in my version of the WYSIWYG, so I suspect you forgot to turn them on for me.

They appear to be present, did you create the table of contents first? The options to style lists won't show up on non-list elements.

nigelgbanks

Also I'm not seeing the mobile issue with the wrapping, perhaps it relates images in the fixed width table making the page too wide, so the page was scrolled a bit to the right for you.

awisnicki

Re: numbering of lists, thanks very much.

Re: images in tables, OK, thank you for taking care of this. I'll create a new ticket for this to keep it on the radar.

Re: table settings, can you explain the workflow. I've gone into the back end, tried out the "Templates" button (Table of Contents option -- the only one), then tried to use one of the options from the Styles dropdown, but I don't quite get how this is to work. In particular, when I use the "Templates" button is erases what I've written and just produces a generic list.

The mobile issue is indeed resolved.

So, in other words, all that's left on this ticket is explaining tables to me.

nigelgbanks

Place the cursor where you would like to insert the table of contents:

Select the highlighted button: <img width="1361" alt="screen shot 2017-09-13 at 08 20 02" src="https://user-images.githubusercontent.com/487373/30364537-8bd6a704-985c-11e7-8de5-fa3980c0a6a7.png"> There is only one option "Table of contents" select it, also make sure that "Replace Actual Content" is unchecked. <img width="1369" alt="screen shot 2017-09-13 at 08 20 10" src="https://user-images.githubusercontent.com/487373/30364538-8bf24e14-985c-11e7-9ffd-0d517948c16a.png"> This will insert a list that you can now edit inserting text adding links etc.

Then when you put your cursor on the list created above you can change the formatting. Though likely you will always want to use "unnumbered" since you want to embed the preceding number in the link. <img width="1361" alt="screen shot 2017-09-13 at 08 20 20" src="https://user-images.githubusercontent.com/487373/30364539-8bf428a6-985c-11e7-8161-ee395b6f958e.png">

Use the indentation icons to changed the nesting of the lists: <img width="1385" alt="indent" src="https://user-images.githubusercontent.com/487373/30785879-550ce654-a165-11e7-8c6b-f1c02092124a.png">

awisnicki

Perfect, gives me exactly what I need. Thank you!