Bug 13017

Summary: Login page image replacement technique fails when browser width exceeds 2000 pixels
Product: Koha Reporter: Nicole C. Engard <nengard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: trivial    
Priority: P5 - low CC: cbrannon, chris, mtj, tomascohen
Version: 3.16   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Trivial patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Attachments: koha h1
Bug 13017 - Login page image replacement technique fails when browser width exceeds 2000 pixels
[SIGNED OFF] Bug 13017 - Login page image replacement technique fails when browser width exceeds 2000 pixels
[PASSED QA] Bug 13017 - Login page image replacement technique fails when browser width exceeds 2000 pixels

Description Nicole C. Engard 2014-09-30 20:30:11 UTC
Created attachment 31959 [details]
koha h1

If you zoom out on the staff client you will see Koha to the far left (see attached).

The code reads:

<div id="login">

    <h1>
        <a href="http://koha-community.org">

            Koha

        </a>
    </h1>
Comment 1 Owen Leonard 2014-10-10 00:36:28 UTC
‘Doctor, doctor, it hurts when I do this.’

‘Then don’t do that!’

Sorry, I couldn't resist. Yes it's true. If your browser window goes much wider than 2000 pixels the image replacement technique which displays the Koha logo will fail, having this style:

text-indent: -1000px;

...which at the time of implementation was expected to be PLENTY of space to exclude the possibility that someone's browser would be wide enough that the text would be visible.

It may be that we need to increase that number, or it may be that there is a more modern image replacement technique which we should switch to.
Comment 2 Owen Leonard 2014-11-11 16:41:05 UTC Comment hidden (obsolete)
Comment 3 Christopher Brannon 2014-12-01 16:21:57 UTC
(In reply to Owen Leonard from comment #2)

> Note: This patch has not been tested in any Internet Explorer version!

Works in IE 11.
Comment 4 Christopher Brannon 2014-12-01 16:23:57 UTC Comment hidden (obsolete)
Comment 5 Kyle M Hall 2014-12-05 15:43:19 UTC
Created attachment 34156 [details] [review]
[PASSED QA] Bug 13017 - Login page image replacement technique fails when browser width exceeds 2000 pixels

This patch updates the image replacement technique used for Koha's login
page. The old technique used a negative text-indent value to move the
text offscreen, but that begins to fail more and more often as screens
get larger.

The new technqiue is described here:
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Note: This patch has not been tested in any Internet Explorer version!

To test you must have a screen which is wider than 2000 pixels. Apply
the patch, clear your browser cache and view the staff client login
page. The logo on the login form should look correct with no
corresponding text appearing anywhere on the screen.

Signed-off-by: Christopher Brannon <cbrannon@debian.localdomain>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 6 Tomás Cohen Arazi 2014-12-28 14:21:56 UTC
Patch pushed to master.

Thanks Owen!
Comment 7 Chris Cormack 2014-12-29 19:17:52 UTC
Pushed to 3.18.x will be in 3.18.3
Comment 8 Mason James 2015-01-16 19:10:45 UTC
Pushed to 3.16.x, patch will be in 3.16.7