Top Left Branding Logo CSS inconsistencies

Hello Devs,

Using 2.22.21973

Google Chrome, Incognito

Noticed this today while setting up a test server. The newer apps render the logo great:

CSS:

The older ones, not so much:

CSS:

Do you think there is any chance css updates can make their way into 2.23, specifically to render the top left logo in the same manor for all apps? If not, putting the max-width and height into the GUI page here would probably save some guess and check for new dhis2 administrators:

image

···

Timothy Harding
Sr. Systems Analyst, BAO Systems

+1 202-536-1541 | tharding@baosystems.com | http://www.baosystems.com | Skype: hardingt@gmail.com | 2900 K Street, Suite 404, Washington D.C. 20007

Hi,

a quick fix for this is to install the “Custom JS/CSS” app, and using that to enter the following CSS:

#headerBanner {
top: 0;
max-height: 44px;
}

However if you use any logo that’s less than 44px high (including the default one), adding this CSS will result in the logo being positioned incorrectly, so a universal fix for the legacy header bar using only CSS is not possible.

image

···

Best regards,

Nicolay Ramm

Front end developer, DHIS 2

University of Oslo

https://www.dhis2.org

On Thu, Apr 7, 2016 at 9:52 PM, Timothy Harding tharding@baosystems.com wrote:

Hello Devs,

Using 2.22.21973

Google Chrome, Incognito

Noticed this today while setting up a test server. The newer apps render the logo great:

CSS:

The older ones, not so much:

CSS:

Do you think there is any chance css updates can make their way into 2.23, specifically to render the top left logo in the same manor for all apps? If not, putting the max-width and height into the GUI page here would probably save some guess and check for new dhis2 administrators:

Timothy Harding
Sr. Systems Analyst, BAO Systems

+1 202-536-1541 | tharding@baosystems.com | http://www.baosystems.com | Skype: hardingt@gmail.com | 2900 K Street, Suite 404, Washington D.C. 20007


Mailing list: https://launchpad.net/~dhis2-devs

Post to : dhis2-devs@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-devs

More help : https://help.launchpad.net/ListHelp

Thanks Nicolay!

That did the trick. Having a HiDPI logo on every page makes things look quite a bit nicer too.

Your note on the universal fix:

image

···

On Fri, Apr 8, 2016 at 8:10 AM, Nicolay Ramm nicolay@dhis2.org wrote:

Hi,

a quick fix for this is to install the “Custom JS/CSS” app, and using that to enter the following CSS:

#headerBanner {
top: 0;
max-height: 44px;
}

However if you use any logo that’s less than 44px high (including the default one), adding this CSS will result in the logo being positioned incorrectly, so a universal fix for the legacy header bar using only CSS is not possible.

Timothy Harding
Sr. Systems Analyst, BAO Systems

+1 202-536-1541 | tharding@baosystems.com | http://www.baosystems.com | Skype: hardingt@gmail.com | 2900 K Street, Suite 404, Washington D.C. 20007

Best regards,

Nicolay Ramm

Front end developer, DHIS 2

University of Oslo

https://www.dhis2.org

On Thu, Apr 7, 2016 at 9:52 PM, Timothy Harding tharding@baosystems.com wrote:

Hello Devs,

Using 2.22.21973

Google Chrome, Incognito

Noticed this today while setting up a test server. The newer apps render the logo great:

CSS:

The older ones, not so much:

CSS:

Do you think there is any chance css updates can make their way into 2.23, specifically to render the top left logo in the same manor for all apps? If not, putting the max-width and height into the GUI page here would probably save some guess and check for new dhis2 administrators:

Timothy Harding
Sr. Systems Analyst, BAO Systems

+1 202-536-1541 | tharding@baosystems.com | http://www.baosystems.com | Skype: hardingt@gmail.com | 2900 K Street, Suite 404, Washington D.C. 20007


Mailing list: https://launchpad.net/~dhis2-devs

Post to : dhis2-devs@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-devs

More help : https://help.launchpad.net/ListHelp