Update application header #211
Conversation
New styling. Popup menu.
kyle1morel
requested review from
wilwong89,
sanjaytkbabu and
qhanson55
as code owners
Coverage Report (Frontend)
|
Coverage Report (Application)
|
|
can we add that thin grey line between the bc gov logo and our PCNS title? The line is 36px tall,: 1px solid #D8D8D8. |
| </script> | ||
|
|
||
| <template> | ||
| <header> | ||
| <nav id="header-branding"> | ||
| <div class="flex flex-row flex-wrap align-items-center p-2 lg:pl-6"> | ||
| <div class="flex flex-row flex-wrap align-items-center p-2 pb-0 lg:pl-6"> |
There was a problem hiding this comment.
It looks like the header height is noticeably larger than the GCPE style bars we see on the official site and Design Guide. Best I can find after some scanning is a min-height: 65px implicitly from their documentation example, but wasn't able to derive or find a canonical height measurement for the header element.
Ref: https://designsystem.gov.bc.ca/react-components/?path=/docs/components-header-header--docs#controls
I am wondering if the p-2 and pb-0 classes are causing unintended side effects on the bar height. That being said, as there doesn't seem to be a formal prescription on what a header height should precisely be, @Subin1Doo would you be able to make a determination on what the PCNS' header height should be?
There was a problem hiding this comment.
it's set to 54px in the Figma's design guide document
There was a problem hiding this comment.
There doesn't seem to be a set standard. https://www2.gov.bc.ca/gov/content/home uses 60px for the logo so I'm going to conform to that.
Description
New styling. Popup menu.
https://apps.nrs.gov.bc.ca/int/jira/browse/PADS-361
Types of changes
New feature (non-breaking change which adds functionality)
Checklist
Further comments