athe.la blog

It’s always good to keep web pages clean and free of clutter to focus the user experience on what really is important.  For this matter, it’s nice to be shown the difference between the time now and the time something was posted in a informal way such as below:

So if you still wanted this uncluttered view but still desired to allow the user to see the exact moment that was, then maybe you’d have to let the user check a checkbox in their user settings are show an exact time when the view of that object is more detailed.  However I’ve come up with the idea that on mouseover the nice and informal ‘time since’ can be replaced with an exact time of the post in an easy custom filter.

Here’s the same chirp as shown above but with the mouse hovering over the time.

When the mouse is rolled back out, the informal time since is displayed again.

Seamless user experience showing more detail when the user wants it

from django.utils import timesince, dateformat

@register.filter
def timetoggle(time, id):
link = "<span id=\""+str(id) + "timesince\"> about <a href=\"#\" onmouseover=\"document.getElementById('"+str(id)+"timeactual').style.display=''; document.getElementById('"+str(id)+"timesince').style.display='none';return false;\">"
link += timesince.timesince(time)
link += " ago</a> </span><span id=\""+str(id)+"timeactual\" style='display:none'> at <a href=\"#\" onmouseout=\"document.getElementById('"+str(id)+"timeactual').style.display='none'; document.getElementById('"+str(id)+"timesince').style.display='';return false;\">"
link += dateformat.DateFormat(time).format("g:ia o\\n l jS N Y")
link += "</a></span>"
return mark_safe(link)

Use in the following way: {{ time_object|timetoggle:unique_identifier }}   Here’s an example: {{ post.pub_date|timetoggle:post.id }}