UnderCurrents Radio Playlist Table

README.md

The bookmarklet below restyles the UnderCurrents Radio Playlist from a flat, one-line-per-field list, into a basic table.

To install the bookmarklet:

1. Create a new bookmark (to this page is fine)
2. Edit that bookmark
3. Change its name to something like "UnderCurrents Radio Playlist Table"
4. Change its linked address to this:

javascript:(function(){var s = document.createElement('style'); s.setAttribute('type', 'text/css'); s.innerText = 'div.entry-content div.sqs-block-content p:nth-child(n+2){display: inline-block} div.entry-content div.sqs-block-content p:nth-child(4n+2){width: 10%} div.entry-content div.sqs-block-content p:nth-child(4n+3){width: 20%}div.entry-content div.sqs-block-content p:nth-child(4n+4){width: 50%} div.entry-content div.sqs-block-content p:nth-child(4n+5){width: 20%}'; document.head.append(s);})();

To use: navigate to the UnderCurrents Radio Playlist, then click the bookmarklet in your bookmarks menu.

How it works:

The bookmarklet adds a small amount of extra CSS to the page header:

/* Allow elements to flow next to each other, instead of appearing on their own lines.
   'n+2' skips the show number header. */
div.entry-content div.sqs-block-content p:nth-child(n+2){
   display: inline-block
}
/* Give the show timestamp 10% of the page width */
div.entry-content div.sqs-block-content p:nth-child(4n+2){
   width: 10%
}
/* Give the artist name 20% of the page width */
div.entry-content div.sqs-block-content p:nth-child(4n+3){
   width: 20%
}
/* Give the track title 50% of the page width */
div.entry-content div.sqs-block-content p:nth-child(4n+4){
   width: 50%
}
/* Give the album title the remaining 20% of the page width.
   This forces the next timestamp onto the next line. */
div.entry-content div.sqs-block-content p:nth-child(4n+5){
   width: 20%
}

That's inserted into a new style element in the HTML head by this javascript:

var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerText = 'div.entry-content div.sqs-block-content p:nth-child(n+2){display: inline-block} div.entry-content div.sqs-block-content p:nth-child(4n+2){width: 10%} div.entry-content div.sqs-block-content p:nth-child(4n+3){width: 20%}div.entry-content div.sqs-block-content p:nth-child(4n+4){width: 50%} div.entry-content div.sqs-block-content p:nth-child(4n+5){width: 20%}';
document.head.append(s);