Please review branch feature/fixing-timelines

[phillipadsmith]

Howdy @alexgreen @MrBryan --

I've just pushed a new branch based off of the current develop branch here: https://github.com/TheTyee/design-article.thetyee.ca/tree/feature/fixing-timelines

There's a chance this branch may also resolve the jQuery conflicts with Wufoo. You'll see that I've downgraded jQuery from 2.x to the latest on the 1.x branch, which resolved the problems that were encountered with the timeline code and jQuery.validate function.

Once you've got this branch checked out and Jekyll running, you can visit /timeline.html and you'll see the timeline loading from a Google Sheet, per this article: http://preview.thetyee.ca/News/2014/07/14/Sanctuary-City-Timeline/

@alexgreen Specifically, I'd like you to have a look to see if there's something we can do to better present vertical timelines like these. Perhaps we can widen the main column / loose the sidebar for these specific stories?

@MrBryan If possible, I'd like you to double-check that the existing jQuery-dependant functionality is working properly with this version of jQuery. I did a review and didn't see any obvious issues. We should make a list of what that functionality is and I can add that to the test suite to catch problems with future updates.

Thanks both.

Phillip.

[alexgreen]

I get this error when I compile the branch:

 Liquid Exception: Included file '_includes/developer-buy-button.html' not found in bower_components/isotope/_posts/docs/2010-12-01-introduction.md
jekyll 2.5.3 | Error:  Included file '_includes/developer-buy-button.html' not found

[phillipadsmith]

Does your config.yml look like this:

# Project settings - General
version: 0.0.1
title: "The Tyee Article Page"
description: ""
baseurl: ""
url: "http://thetyee.github.io/design-article.thetyee.ca/"
logo: 'tyee_logo.png'

# Project settings - Analytics
analytics:
    ga_tracking_id: 'UA-12345-5'

# Project settings - Meta
author: "The Tyee"
robots: "index, follow"
revisit: "1 day"
copyright: "© The Tyee 2015"

# Project settings - Assets
asset_paths:
 # jekyll-assets pipeline
  # Pathname of the destination of generated (bundled) assets relative
  # to the destination of the root.
  dirname: assets
  # Base URL of assets paths.
  baseurl: /assets/
  sources:
    - ui/js
    - ui/img
    - ui/css

# Project settings - URLs
urls:
    display: ''
    privacy: ''
    credits: ''
    credits: ''

# Project settings - Social
social:
    facebook:
        fb_admins:
            - 12345
        og_url:
        og_image:
        og_sitename:
    twitter:
    gplus:

# Jekyll build settings
markdown: kramdown
permalink: pretty
exclude:
  - README.md
  - bower.json
  - package.json
  - node_modules
  - Gruntfile.js
  - gemfile
  - Gemfile.lock
  - bower_components/isotope/index.html
  - bower_components/isotope/_posts/
  - bower_components/isotope/_includes/
  - bower_components/isotope/_layouts/

Note the four lines at the end.

And are you running Jekyll with both configs like so:

bundle exec jekyll serve -w --config _config.yml,_config.local.yml

If not, you'll not get those exclusions in the new config.yml

[alexgreen]

I didn't have those last 4 exclusions. After adding them it compiles. I always run bundle exec jekyll servew --config _config-AG.yml ...because I find I have to update the IP address once in a while

[alexgreen]

My off-the-cuff reaction is that the timeline should be in a figure. And that it should be a figure.xl or .xxl so that it has more width (i.e. no sidebar). Hopefully the timeline widget is capable of expanding horizontally to take advantage of the increased width.

[phillipadsmith]

My off-the-cuff reaction is that the timeline should be in a figure. And that it should be a figure.xl or .xxl so that it has more width (i.e. no sidebar). Hopefully the timeline widget is capable of expanding horizontally to take advantage of the increased width.

It will expand, indeed, and I leave the HTML to you. All that it requires to initialize is a div with a targetable class or ID, outside of that it's up to you!

[phillipadsmith]

Here are some examples: http://code.minnpost.com/jquery-vertical-timeline/

[alexgreen]

This is an odd timeline. It's not chronological. There's a bunch of empty year markers that appear bunched together and out of order for no apparent reason. What's up with that?

[alexgreen]

If you go to the branch ag--timeline-object you can see a timeline object embedded into figure--xl, giving it extra width. There may also be possibilities for styling the widget itself, but I haven't looked into that.

FYI I'm hitting my 26-hour monthly budget for October.

[MrBryan]

No issues that I could find. Doesn't fix wufoo compatibility though, if you go to /poll.html under this branch it's still broken (latest stories etc)

[MrBryan]

I believe it's possible to load multiple versions of jQuery, too, under different variables, that might be pretty safe to do for the 4-5 timelines (i believe you said there were that few) that we did, yes? Then can keep using more current jquery everywhere else

[phillipadsmith]

Then can keep using more current jquery everywhere else

The 2.x branch of jQuery is a mystery to me: I'm not sure what it improved. From what I can see with a quick scan, there's nothing in the current .js file that would be impacted from downgrading to latest of the 1.x branch for now.

Anyway, I'm curious to have a look at /poll.html ...

[phillipadsmith]

Yep, I was pretty sure it was a JavaScript error, not a jQuery issue:

[phillipadsmith]

The article_custom.js needs a good review, as there's a fair bit of curious-looking cruft in there... the problem here was an improperly initialized for loop, which was then passing the iterator as the last value into the loop, which was causing the errors.

[MrBryan]

Nice! ... does that fix work on the other branches too (with other jQuery) , I wonder

[phillipadsmith]

I'm curious about this, however:

function latestFix(){
    var latestHeight= 0;
    $(".latest-stories__media-wrapper li").height("auto");
    $(".latest-stories__media-wrapper li").each(function(){
        if (latestHeight < $(this).height()) {
            latestHeight =  $(this).height();
        }

    });

    $(".latest-stories__media-wrapper li").height(latestHeight + 10);
}

... because there's no .latest-stories__media-wrapper li as far as I can see? Is that latestFix() just out of date?

[phillipadsmith]

Nice! ... does that fix work on the other branches too (with other jQuery) , I wonder

It does seem to work on the develop branch, which I'm guessing is still on jQuery 2.x:

[phillipadsmith]

There are a whole bunch of JS errors because the comments and e-mail subscription button are not on the poll.html page.

Before I go through and fix them, I'm thinking we should put our heads together about page variations like this.

E.g., perhaps we should have a global.js, article-standard.js (comments, subscriptions, etc.), and then variations if needed for other article types, e.g.., article-poll.js and so on?

[phillipadsmith]

Maybe we can just sit down tomorrow and work through this...? Probably easiest! :-)

[phillipadsmith]

@MrBryan: The timelines branch has been merged with develop and gh-pages. Please review, and then deploy to preview if there are no issues so that I can test the timeline fixes on preview.

[phillipadsmith]

@MrBryan: The timelines branch has been merged with develop and gh-pages. Please review, and then deploy to preview if there are no issues so that I can test the timeline fixes on preview.

@MrBryan Ping! :-)

[MrBryan]

OK it's on preview !

[phillipadsmith]

Quick updates on this thread:

OK it's on preview !

Actually, @MrBryan said it's on live! :-)

I can test the timeline fixes on preview.

Tested and it's not going to work nicely for mobile visitors.

So, after doing a bit of digging, the decision is to migrate these ~5 stories to the newer horizontal timeline tool maintained by the Knight Lab, http://timeline.knightlab.com/

I'll take that on after the builder campaign updates are underway. It'll require some manual re-jigging of spreadsheets, and those spreadsheets should be gathered together somewhere findable too in the case they need updates to their media (as these will).

[alexgreen]

There's still some very odd stuff going on with the unordered display of years in that timeline. ...maybe a spreadsheet issue?

I wouldn't say that the jquery timeline is any worse on mobile (screenshots below) than on desktop. The main issue is that the body text of each timeline item is too long for mobile views, but I could probably write some css to truncate it in that case.

The knightlab timeline does present a more compact view that is probably more legible (and generally looks quite a bit better in terms of layout and chrome) but the interaction is more complex, not totally intuitive, and the double-pane side-scrolling is a bit odd on mobile.

In medium views (eg tablets) it's not so great to have a series box when there's almost no body text because it creates a gap in the layout (see below). This would be an issue for the knightlab timeline too, but I could implement an adjustment for that view size.

Ipad:

---

Phone:

[phillipadsmith]

@MrBryan Any preference on the above?

[MrBryan]

Since there only 4-5 stories I think the appearance is actually pretty acceptable on my iPhone test of http://preview.thetyee.ca/News/2014/07/14/Sanctuary-City-Timeline/

It looks somewhat bad sometimes when resizing from another size but when loading and staying on a resolution which is the norm it looks ok, just a bit narrow and slow to load.

[MrBryan]

Could add a trigger to reload the div when resized after a timeout if that is the main issue

[MrBryan]

If this is with the mind of doing many more of these though I think we should just do something native totally to our style, here's what I did for IFEX which was very simple to implement:

http://www.ifex.org/noimpunity/cases/jineth/