The series master card

A card that stands for a whole set of posts: fixed height, a list that scrolls inside it, and one big link with smaller links stacked on top.

2 min read

The behavior of all the cards in this website was simple. All of them were meant to show you a glimpse of what’s inside and then take you to that article when you tap on it. Same was the behavior of my series card, until I hit a point where I wanted it to break character from the rest of the cards. Why? you may ask. Series would be the biggest set of articles I have in this website for a given topic, and I would love for you to have an option to see and navigate to a specific part of that series.

A series isn’t one thing. It’s four or five posts with an order to them, and the card has to say two things at once: here’s the series, and here are the parts of it. The moment you put the parts on the card, the card is not just a link, rather its a file with bookmarks in it. You can open the file itself, or you can open it by holding a bookmark, and in that case you go straight to that section. That’s the behaviour I wanted.

I rebuilt this at the end of June, in the same stretch where I was fixing the table of contents pill. It had been bothering me in the way things bother you when they look correct. Nothing was visibly wrong, it just didn’t behave the way I expected, and I kept not looking closely enough to find out why.

Nothing clicked yet.

Playing by itself Step 1 of 2
Scroll the list. It scrolls inside the card, not the page.
The card as it ships. Scroll the list inside it, then click a row — the readout says which link caught the click.

The demo below is the broken version, deliberately. Both demos on this page play it out first and report back which link received the click. Then click a row in each yourself. The wrong one is convincing, which is sort of the point, it doesn’t read as a bug. It reads as the site ignoring you.

Nothing clicked yet.

Playing by itself Step 1 of 1
Tap a row. The readout says which link caught it.
The same card with the list dropped below the blanket link. Click any row: the card takes it instead.
tree maturity Tree — this piece has settled into its canopy