search

alphagov / government-frontend

Serves government pages on GOV.UK
https://docs.publishing.service.gov.uk/apps/government-frontend.html
MIT License
53 stars 17 forks source link

Organisation logos on publication pages #981

Closed alex-ju closed 5 years ago

alex-ju commented 6 years ago

Got the following query through support:

HTML publication pages have the logos at the top for all the government organisations involved in the content. For a page like this one: https://www.gov.uk/government/publications/conflict-stability-and-security-fund-cssf/conflict-stability-and-security-fund-an-overview The long vertical list is offputting - you have to scroll past several logos before viewing the content. Would it be possible to reconfigure how the logos are displayed - could they display horizontally when viewed on desktop?

Did a test, changing the following classes in the browser. It's worth mentioning that involves reordering the organisations and place the ones with a logo first - not to look messy.

.organisation-logos {
    width: auto; // overwrites the 25% that was previously set
}

.organisation-logo {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    margin-bottom: 15px;
}

Before

screen shot 2018-07-23 at 10 06 17

After

screen shot 2018-07-23 at 10 06 00
andysellick commented 6 years ago

We might be able to use a layout like on https://www.gov.uk/education, which is still stacked but makes slightly better use of the horizontal space.

andysellick commented 6 years ago

Alternatively apparently there's a version in use elsewhere where the logo and the org name are on the same line (or used to be, anyway). That would probably make the best use of the vertical space without having to change the layout.

andysellick commented 6 years ago

Just tried a spike into implementing the option above (org logo and name on the same line) and it's surprisingly complicated - the logo is a background image and varies in height so special cases for padding have to be applied to ensure it doesn't get cropped. This feels like something that requires a bit more time and thought than we have available right now.

andysellick commented 5 years ago

I started the PR above to fix this issue but the example linked to in the original description no longer has the problem (because there's only one logo) and I can't find another example. However this problem does occur on some HTML publications, so I've fixed it there.

Not sure what to do with this issue now. Should we consider it closed if we can't find a good example of it anymore @alex-ju ?

alex-ju commented 5 years ago

Happy for it to be closed for now.