Date-aware css

[eah13]

Not sure how to do this just yet. Jekyll is static, but if we can get CSS to know about the date we can make assignments or notes that haven't happened yet height 0. This allows the instructor to control the date they're displayed.

[gerbal]

This is hard to solve with Liquid alone. Liquid is very restrictive about letting us construct arbitrary code (A good thing). Implementing this in Liquid would only change when the page rebuilds, so if we don't rebuild the site and an assignment opens or closes we have no way of keeping track.

What we can do instead is use Javascript. Javascript lets us do some very complex things to styling and use code that doesn't make me want to claw out my eyes.

Use the liquid template to create a <div> element around each assignment entry, and give each <div> attributes like <div class='assignment' date='{{ post.date }}'>. Then we can use the javascript date object to evaluate the date attribute of every element with the 'assignment' class name.

Using javascript something like (this code is incomplete, and broken):

var assignments = document.getElementsByClassName('assignment');
var today = new Date();
for(var i=0; i <assignments.length; i++)
{
    var dueDate = new Date(assignments[i].date); 
// parse the date as found as an attribute
//The if() statement here may not work
    if(dueDate < today.getTime()) 
    {
        assignments[i].className += " past"
    }
}

Keep in mind this method I've described isn't exactly what we want to do. We probably want to keep items hidden until a little ways before the due date. We probably should add a new attribute to each assignment in its YAML header describing the due date and visibility date and compare to that.

Also the JavaScript Date Object thinks in UTC. We probably need to adjust for that and subtract four or five hours from everything we do.

[gerbal]

Potentially partially resolved by #74 in Spring2014.

[eah13]

Nice work on #74. The js you wrote will definitely work to solve this. In fact we could merge it in if we document how to add those little tags to the sessions like you did.

Only component we'd need to add for user-friendliness (and style points) is a way to automatically generate these date tags. That might work if schedule became a concatenation of all posts with category schedule. We'd need to sort them in ascending order, though, which if I remember is needlessly hard in Jekyll without a plugin.

[gerbal]

This would be pretty hacky, but we could generate the list of assignments in a <script> container as json and then use javascript to do the sorting and display.