baltimorecounty / baltimorecountymd.gov-assets

Baltimore County Government Website Assets
3 stars 1 forks source link

Move agency contact module styles from agency-homepage.css to inside-responsive.css #275

Open danfox01 opened 5 years ago

danfox01 commented 5 years ago

Problem

It appears the agency contact information module (appears on the left under the local nav of some pages) doesn't render correctly unless agency-homepage.min.css is included on the page. I just realized, we have been adding it manually via a stylesheet <link> in the <head> of every page where it's needed. As the contact component is now used on many pages, this is not a maintainable approach and it doesn't make semantic sense in the agency-homepage stylesheet.

Solution

I'd like to move the CSS from agency-homepage to red-inside, so that it will be available globally.

Additional context

You can see an example of the current behavior here, when agency-homepage is not included: http://staging.baltimorecountymd.gov/benefits/index-test.html.

danfox01 commented 5 years ago

@theilman7, would this be a good one for you to tackle?

@sdurphy @martypowell FYI

theilman7 commented 5 years ago

@danfox01 @sdurphy I can take a look at this.

theilman7 commented 5 years ago

Initial inspection notes:

  1. "Most Requested Services" section background color bleeding over is kind of a red flag to me (no pun intended) that something may not be correct with the markup of the "Contact" section. This becomes evident, when the

  2. containing the divs are removed and the bleed ceases. The section/ module should stand on its own at a foundational level. Further testing reveals, switching sections above it, does not yield the same bleed that "Contact" does.

  3. Taking a closer look at the section above it as the list appears compressed together vertically, leading me to believe there might be a stray or unclosed div at play.

Will continue to add if I find more, as I continue working at the issue.

theilman7 commented 5 years ago

@danfox01 @sdurphy

Update: Removed stray div that opens on line 4 and closes on line 22. This corrects the spacing issue in the "Health Insurance Division" nav section on that page. http://staging.baltimorecountymd.gov/benefits/index-test.html

danfox01 commented 5 years ago

@theilman7, did you have a chance to get with @martypowell after you latest comment on your PR (#276)? I think you were going to check with him on the best way to make the scss changes required for this, and open a new PR?

I also updated the name of this issue to reflect the correct style sheet.