project Websites / Gitlab Issue Listing Script avatar

websites/Gitlab-Issue-Listing-Script#48: Timeline should iterate through DatePeriod backwards rather than forwards

Issue Information

Issue Type: issue
Status: closed
Reported By: btasker
Assigned To: btasker

Milestone: v0.5
Created: 27-Aug-22 09:57


Currently the #44 label timeline runs forward chronologically - starting whenever that label was first used and ending when it was last used.

However, on a particularly old project, that means quite a lot of scrolling to get to the latest activity.

Generally, when I look at activity, I'm interested in the most recent, so it should be ordered first - it also means that the page will detail, at a glance, when that label was last used.

Toggle State Changes


assigned to @btasker

This is a little bit of a fiddly one.

Currently, we iterate over the date range using DatePeriod, but it doesn't support iterating backwards. You can set DateInterval to be negative:

$dt = new DateInterval('P1M');
$dt->invert = 1;

But that doesn't help much - dateperiod still won't iterate backwards. If start < end then it'll iterate forwards and if start > end it'll return an empty set.

One option would be to iterate through forwards, pushing each object into an array (which we can then reverse), but that's not exactly efficient.

Instead, we need to implement the logic ourselves - the DateTime class supports sub(), so we can take a date and then subtract a period from it.

So, the template can be adjusted to do

$begin = new DateTime($issues['start']);
$end = new DateTime($issues['end']);
$dateinterval = new DateInterval('P1M');

while($end >= $begin){
    // Do stuff

    // Subtract a month
    $date = $date->sub($dateinterval);

In order to work through in reverse

changed title from {-Have t-}imeline {-run-} backwards rather than forwards to {+T+}imeline {+should iterate through DatePeriod+} backwards rather than forwards

It's not just the programmatic logic which will need to change - we also need to change the order of things within divs.

Currently we do

Month name   | 
             |   issues

The issues occur within the month, and the month flows in the same direction the user is reading in.

With time reversed though, that's not the case - the issues in a month should be above the month name


mentioned in commit 8cedda0

Commit: 8cedda04b2df28f10110506e10ad2755008c85ad 
Author: B Tasker                            
Date: 2022-08-27T11:07:35.000+01:00 


Change timeline ordering logic for websites/Gitlab-Issue-Listing-Script#48

With this commit, the timeline template starts displaying with the most recent dates/issues first - time flows up the page rather than down

+10 -3 (13 lines changed)

Adjusting the order of items should just be CSS tweaks - we're not moving stuff between cells, we just want the date stuck to the bottom of the cell rather than the top.

The issues list will need bottom padding instead of top.

Also need to check that it doesn't screw the mobile view, but we can adjust for that once the main view is correct.

I've done some tweaks, but actually, I think it's a bit misleading


It looks like that issue is listed under May.

So actually, it might be better to keep the order of cell content as it was.

Whilst time technically flows up the page, it's human nature to read a header and assume the content falls under it.

Definitely fits reading habits better


But perhaps we should add a day to the date, that way "Apr 2022" indicates it's the end of April

For future reference, in order to have PHP's DateTime print the last day of the month, you just need to use t in the format string.

A google suggests you need to use date->modify() with a string of "last day of [month]" but that's a false trail (and because it updates in place, breaks iteration).

It really is as simple as

$date->format("t M Y")

mentioned in commit ce2d0b9

Commit: ce2d0b9f7e56addcd7a857de37137cbbb2689c4b 
Author: B Tasker                            
Date: 2022-08-27T11:44:46.000+01:00 


Have timeline date include last day of month for websites/Gitlab-Issue-Listing-Script#48

This helps make it clearer when issues were logged, as it's immediately obvious that the month details mark the end of the month

+2 -5 (7 lines changed)

It's now immediately obvious what goes where:


The mobile view still works as it should, it collapses down and each month is titled and followed by a list of the relevant issues.