Right now player2's HTML hard-codes the number of visible entries, eg with 8 people in the queue it might show the next 5 performers and then "and 3 more".
I feel like it would be nicer if the HTML contained data for the whole queue, and then CSS was used to render the first entry large, the next 4 entries small, and the rest of the queue as a counter.
CSS counters seem like they might be useful, but with some quick experimentation I couldn't make it work:
attr() + calc() seem nearly there except they don't work together? It'd be nice to do something like
/* hide queue items where n>5 */
.item:nth-child(n+5) {
display: none;
}
/* "and N more" where N = queue length - number of items we displayed */
n_more::before {
content: calc(attr(queue_length) - 5);
}
Right now player2's HTML hard-codes the number of visible entries, eg with 8 people in the queue it might show the next 5 performers and then "and 3 more".
I feel like it would be nicer if the HTML contained data for the whole queue, and then CSS was used to render the first entry large, the next 4 entries small, and the rest of the queue as a counter.
CSS counters seem like they might be useful, but with some quick experimentation I couldn't make it work:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters
attr()+calc()seem nearly there except they don't work together? It'd be nice to do something like