Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix the margin in header-container class #1791

Closed
2 tasks done
daniellex0 opened this issue Jun 20, 2021 · 1 comment · Fixed by #1852
Closed
2 tasks done

Fix the margin in header-container class #1791

daniellex0 opened this issue Jun 20, 2021 · 1 comment · Fixed by #1852
Assignees
Labels
Complexity: Medium Feature: Design system role: front end Tasks for front end developers size: missing Status: Updated No blockers and update is ready for review time sensitive Needs to be worked on by a particular timeframe

Comments

@daniellex0
Copy link
Member

daniellex0 commented Jun 20, 2021

Overview

We need to fix the ".header-container" class because for some reason it is no longer providing the correct margin to cover the top nav bar, and most of our headings are now too close to the top nav bar as a result

Action Items

  • Try to figure out what went wrong - the .header-container class margin used to cover the whole height of the top nav so that the header-container padding started just below it. Now the margin only covers half of the top nav (see screenshots below). Was a change recently made to cause this? Was the margin recently edited to "margin: 37px auto 0"?
  • If the change that caused this can't be figured out/undone, just change the margin property in the ".header-container" class to margin: 61px auto 0; (instead of 37px auto 0) so that the margin once again covers the whole tap nav bar)

".header-container" class margin (orange section below) used to cover the entire top nav bar- now it only covers half.
Screen Shot 2021-06-20 at 12 19 33 AM

This needs to be fixed because most of our headers using the standard header class are now too close to the top nav bar:

Screen Shot 2021-06-20 at 12 21 31 AM

@daniellex0 daniellex0 added role: front end Tasks for front end developers Complexity: Medium time sensitive Needs to be worked on by a particular timeframe labels Jun 20, 2021
@sayalikotkar sayalikotkar added the Feature Missing This label means that the issue needs to be linked to a precise feature label. label Jun 20, 2021
@Sihemgourou Sihemgourou added Feature: Design system and removed Feature Missing This label means that the issue needs to be linked to a precise feature label. labels Jun 20, 2021
@arghmatey arghmatey self-assigned this Jun 22, 2021
@arghmatey
Copy link
Contributor

A little update:

I took a look at the classes and scss file for almost all pages (minus 'dashboard' since it looks like that has a different layout). Pages I took a dive into are: About, Events, Wins, Communities of Practice, Credits, Getting Started, Join Us, Program Areas, Project Team Meetings, Sitemap, and Toolkit. Among these, there are a handful of different reasons why the headers are not sitting correctly on their associated page.

This is a good opportunity to fix continuity across the site pages, but it will take a little refactoring.

Observations:

  • .header-container is not the sole reason for this issue and its margin numbers haven't been changed in 9 months
  • Not all pages have the header-container class assigned, and some pages are farther from the nav bar because of a margin on the h1 element, or padding on another class on the same div as .header-container, etc.
  • On the How to create a page on the HfLA website wiki page, the template doesn't include class="header-container", but instead class="header-container--yourPageName".

I think it would be a good idea to move forward with the margin change on .header-container being changed to 61px so it's the same along all pages, and adjust the unchanged pages accordingly to close this issue.

Next Steps:

  • Adjust .header-container and other minor changes to bring the headers farther away from the nav bar.
  • Explore possibility of header template to adjust all pages to, and to keep continuity in the future.

I'll have a pull request ready to close this in the next few days.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Complexity: Medium Feature: Design system role: front end Tasks for front end developers size: missing Status: Updated No blockers and update is ready for review time sensitive Needs to be worked on by a particular timeframe
Projects
Development

Successfully merging a pull request may close this issue.

6 participants