search

SAEONData / Open-Data-Platform

SAEON Open Data Platform core services, APIs and UIs.
MIT License
2 stars 0 forks source link

Improve alignment of the NCCRD branding (currently not centered) #20

Closed zachsa closed 3 years ago

zachsa commented 3 years ago

Hi,

I can see that the header on the login page is a flex. Since the items in the header are not the same size, spacing the items equally means that the title is not centered.

I had a quick look at how to size items equally in a flexbox: https://stackoverflow.com/a/29503264/3114742. For each item you need to specify the 'basis' that the size is calculated from, and the maximum size that the item can be (not sure what shrink is for).

So adding this CSS to each header item will center the heading:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

Before image

After image

zachsa commented 3 years ago

Thank you for pushing out the new branding so quickly

marksparkza commented 3 years ago

Ahh, thanks! I couldn't figure out how to centre that heading and ended up going with 'sort of centred' by putting a left margin on the flag :stuck_out_tongue:

zachsa commented 3 years ago

Also - the flag needs margin-left auto and display block to push it to the right of the container.

zachsa commented 3 years ago

On mobile I'm just hiding everything except the DFFE logo. If you can think of a better way let me know!