Turns out I don't need this now, although it's still a mildly interesting question.
I originally wanted it so I could assign a purely presentational class to the .page-jump .button when there was no .previous directly after it in the markup. I've gone with another option that I like better anyway. Namely, making the non-functional-by-default li.ellipsis do something useful, and act as the parent element for the .page-jump trickery.
This makes sense because a/ it's replacing a non-functional element with a functional one and b/ the whole point of the .ellipsis class is to indicate that there are extra, non-visible-by-default, pages in that area. The .page-jump fits there nicely, both conceptually and aesthetically.
The ellipsis each side of the icon pads out the button width to 45px, which is perfect for a touchscreen target. I'm using a standard UTF-8 \2baf arrow instead of the default FA icon (which is still in the markup). This gets changed to \2bad inside .bar-bottom. CSS is just:
The .page-jump will be doubled up in long pagination lists that will include two instances of .ellipsis, but I don't see this as an issue. The amount of extra markup is trivial, and you simply click any .ellipsis element to get the .page-jump form. ![:)]( "Smile")
I originally wanted it so I could assign a purely presentational class to the .page-jump .button when there was no .previous directly after it in the markup. I've gone with another option that I like better anyway. Namely, making the non-functional-by-default li.ellipsis do something useful, and act as the parent element for the .page-jump trickery.
This makes sense because a/ it's replacing a non-functional element with a functional one and b/ the whole point of the .ellipsis class is to indicate that there are extra, non-visible-by-default, pages in that area. The .page-jump fits there nicely, both conceptually and aesthetically.
The ellipsis each side of the icon pads out the button width to 45px, which is perfect for a touchscreen target. I'm using a standard UTF-8 \2baf arrow instead of the default FA icon (which is still in the markup). This gets changed to \2bad inside .bar-bottom. CSS is just:
Code:
.ellipsis > .button .icon {font-family: inherit; transform: scale(1.8);}.ellipsis > .button .icon::before {content: '\2baf';}.bar-bottom .ellipsis > .button .icon::before {content: '\2bad';}
Statistics: Posted by Gumboots — Mon Mar 31, 2025 9:58 pm