"Built with ETT" link obscured by back-to-top button at zoom 125% and higher

[elichad]

My screen is set to 125% zoom and the bottom right of the page looks like this:

It's the same at higher zoom levels.

If I zoom out to 100% and below they no longer overlap.

[bedroesb]

Hey @elichad thanks for noticing this. I am wondering what the best way would be to solve this.

• Letting the button only appear after scrolling up?
• having it higher in the page? This might cover content in the footer itselve though
• Making it semi transparent

[elichad]

I think the ideal solution is to add an extra margin to the right of the ett-logo element that matches the size of the button. This would need to be responsive - when the viewport is wide enough, there is an automatic margin that works well, but as it narrows the margin is lost. But when it's too narrow, the footer layout changes, and you don't need the margin any more.

[bedroesb]

I was playing around with your proposal @elichad but there where some things I didn't like, that the placing of the button would change depending on the width of the window, but also that it looks a bit odd when the person is not yet fully scrolled down. There is no real reason at that moment that the the button would be somewhere more to the left.

I tried applying some JS trickery to make sure the button never goes lower than the height of the footer.

You can play around with it here: https://bedroesb.github.io/elixir-toolkit-theme/ (you might have to reload your page). Let me know what you think!

[elichad]

I think we've miscommunicated - my suggestion was to (responsively) change the position of the "Built with ETT" link (element ett-logo) to move that link to the left when needed, not the back-to-top button - the button doesn't need to be moved and I think it makes the most sense if the location remains consistent no matter where you are on the page.

e.g. this is the styling I hacked in just to get the desired layout at the affected zoom level

<a id="ett-logo" style="margin-right: 50px" class="text-nowrap" href="https://elixir-belgium.github.io/elixir-toolkit-theme" >...</a>

[bedroesb]

@elichad thanks for the clarification. But don't you think the improved button behavior looks better than off-aligning the logo? Because picking an offset of 50px is not really a robust way when there are so many scaling's possible / no copyright text so the "Built by ETT" moves to the left, etc...

[bedroesb]

To be fair I did not yet find a scaling combination where your proposal does not work :sweat_smile: :

[bedroesb]

TO be fair I think both solutions should be tested to a bigger audience, is it ok if I ask some second opinions to other people who menage a deployment of ETT?

[elichad]

I'm definitely not proposing to set it to exactly 50px! Just a super lazy hack on my part to get the point across. Doing it properly and responsively might be difficult to get right - and I didn't realise it could move to the left if there's no copyright.

To me, even though the logo is technically offset when you add the margin, I visually interpret the logo and button together as a group when looking at the footer as long as they're close together, and so the alignment doesn't feel off.

I don't like so much the button moving when it's got a consistent position for the rest of the page. But of course I'm now paying extra attention, and it might well not be bothersome to a general user! I can't remember if there are any specific accessibility guidelines that apply to this case.

Happy for you to ask around for other opinions.

[bedroesb]

I did not like how my solution behaved on my android phone when the "Home and back" buttons appeared at the bottom. The button than was really out of place. I implemented your proposal here + I tweaked the largest break point to be similar as the one in RDMkit: https://bedroesb.github.io/elixir-toolkit-theme.

Let me know what you think!

[elichad]

Looks good to me :)

Though a separate issue - while checking on different display resolutions, I did notice that the other footer links and logos get out of line on tablet-sized screens:

[bedroesb]

@elichad it probably would look better when at this breakpoint the logo's do not get centered but aligned to the left, just like the text. I will make a separate issue about this!