search

blros / urarina-wax

https://blros.github.io/urarina-wax/
Other
0 stars 0 forks source link

fix size of forward and back arrows #9

Closed blros closed 10 months ago

blros commented 10 months ago

make them the same size

emkow2020 commented 10 months ago

The arrows show up on my Windows computer correctly, on Allen's Mac the back arrow is considerably smaller. The issue has not been solved yet.

blros commented 10 months ago

Using Chrome and Safari on my Mac, the back arrow is still small, but when I use Firefox, both arrows displayed correctly at the same size. I tried clearing my cache is those browsers, and I looked at all the css files---don't know why this issue persists.

blros commented 10 months ago

I think I fixed it by just using the right-pointer and flipping it 180 degrees with the following line in _layouts/generic_collection_item_tab.html

<div style="transform: rotateY(180deg);" class='pagination-link' id='prevlink'><a href='{{ prevlink | absolute_url }}' >&#9658;</a></div>

It's a bit of a hack, but from what I'm reading different browsers handle these characters inconsistently. When I copied and pasted the text from the webpage to MS Word or SublimeText, they displayed correctly. So I just used the right pointer twice, but the first time flipped it 180 degrees.

emkow2020 commented 10 months ago

These two ◀ ▶ (black triangles #9664, #9654) work a little better than ◄ ► (black pointers #9668, #9658).

The rotateY trick is a little better, but still not exactly the same size.

Using an image ( i.e. img src=left_arrow_page.png makes them both the same size, but doesn't have the fancy "hover" decoration.

emkow2020 commented 10 months ago

Minor change to use &#9664 as the left, and rotate it for the right arrow. This looks the same size on mac ... today.