Update Projects Page Header to match the new Figma design

[abuna1985]

Overview

We need to update the HTML content and CSS styling so that we match the Updated Figma Design for the Projects Page Header

Before Changes

Current - Projects Page Header - Desktop

Current - Projects Page Header - Desktop

Current - Projects Page Header - Mobile

Current - Projects Page Header - Mobile

After Changes

Figma - Projects Page Header - Desktop (match this)

Figma - Projects Page Header - Desktop (match this)

Figma - Projects Page Header - Mobile (match this)

Figma - Projects Page Header - Mobile (match this)

Action Items

• [x] Update the text (HTML) content to match the updated design
• [x] Update the styling (CSS) to match the updated design
• [ ] Once it matches the updated design, create a pull request for a final review from the dev team

Resources/Instructions

Updated Figma Design - Projects Page Header #1051 (Design issue for reference) https://github.com/hackforla/website/blob/85038939dfc13cf9f5d625b1115da099cc278832/pages/projects-page.html#L1-L24 https://github.com/hackforla/website/blob/a159ab43e798007daa61f334d2c4a810560e8c26/_sass/elements/_containers.scss#L83-L104

[github-actions[bot]]

@BrianCodes33

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, February 7, 2022 at 11:17 PM PST.}

[BrianCodes33]

I'll be removing myself from the issue for the time being.

Here is the code I worked on and it works for desktop and mobile on the new Figma design for the product page header. If someone wants to cut and paste this code in correct files and work on fixing details (like tablet view), this is a good starting point for working on this issue as most of the layout is already done...make sure to match it up with existing site to see which changes were made.

pages/projects-page.html

  <div class="projscredits-text-margin">
    <h1>Our Projects</h1>
    <p>Hack for LA’s projects have real impact in local communities. 
      <br>Use the filters below to learn about our projects and the teams by Status, Technology, and Program area. 
    </p>
    <p>Our projects also offer volunteers of all skill levels countless  
      opportunities to build digital products, programs, and services 
       across diverse fields of practice.
    </p>
    <div class="projscredits-callouts">
      <div>
        <p><strong>Learn how we build all these projects with volunteers</strong></p>
        <a class="callout-link"  href="#">About Us</a>
      </div>
      <hr>
      <div>
        <p><strong>Get involved with Hack for LA and become a contributor</strong></p>
        <a class="callout-link" href="#">Join Us</a>  
      </div>
    </div>
  </div>
    <img class="projects-hero-img" src="/assets/images/projects-page/projects-hero.svg" alt="">
</div>

_sass/elements/_containers.scss

.header-container {
    background: #fff;
    padding:  64px;
    height: fit-content;
    margin: 61px auto 0;
    text-align: center;
    justify-content: center;

    .header-text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-right: 5rem;

        h1 {
            margin-bottom: 38px;
        }
    
        p {
            font-size: 1.125rem;
            max-width: 508px;
            text-align: left;
            margin-bottom: 0
        }

        .sub-p {
            margin-top: 1rem;
        }
    }

    .header-hero-image {
        height: 240px;
        width: auto;
        align-self: center;
    }

    @media #{$bp-below-desktop} {
        flex-flow: column;

        .header-text {
            margin-right: 0;

            p {
                margin-bottom: 16px;
            }
        }

        .header-hero-image {
            margin-top: 20px;
        }
    }

    @media #{$bp-below-tablet} {
        flex-flow: column;
        padding: 32px;
        margin: 54px auto 0;

        .header-text {
            margin-right: 0;

            h1 {
                margin-bottom: 28px;
            }
    
            p {
                max-width: 300px;
                line-height: 1.5rem;
            }
        }

        .header-hero-image {
            height: 155px;
        }
    }
}

.flex-container {
    display: flex;
    flex-direction: column;
  }

.header-container--projscredits {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 64px;

  img {
    flex-basis: 600px;
    margin-right: 100px;
    @media #{$bp-below-desktop} {
      flex-basis: 100%;
      margin-right: 0;
    }
  }

  @media #{$bp-below-mobile} {
    flex-direction: column;
    align-items: center;
    padding: 32px;
  }
}

.projscredits-text-margin {
  display: flex;
  flex-direction: column;
  margin: 0 80px;
  p {
    font-size: 18px;
    max-width: 608px;
    margin-top: 8px;
    text-align: left;
    margin-left: 1.5rem;
  }
  h1 {
    font-size: 48px;
  }
  @media #{$bp-below-mobile} {
    margin: auto;
    margin-bottom: 36px;
    h1 {
      font-size: 24px;
      margin-bottom: 20px;
    }
  }
}

.projscredits-callouts {
  display: grid;
  grid-template-columns:  1fr 1% 1fr;
  gap: 1rem;
  position: relative;
  @media #{$bp-below-tablet} {
    grid-template-columns: 1fr;
  }
  .callout-link {
    display: flex;
    font-weight: 500;
    margin-left: 1.5rem;
  }
  hr {
    transform: rotate(180deg);
    width: 0;
    height: 100px;
    @media #{$bp-below-tablet} {
      display: none;
    }
  }
}

[Jaretzbalba]

Availability: 4hrs ETA: Wed 5/4/2022

[github-actions[bot]]

Hi @neevliberman, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[neevliberman]

Availabilty: 1 hr ETA: 9-28-22

[neevliberman]

I'm a bit confused, wasn't #3087 merged? Didn't that code make all the changes requested here? Maybe there's an update to the design here that I'm not catching, but it seems like the code that Jaretzbalba wrote made all the changes necessary. If somebody can help me understand that'd be great!

[arpitapandya]

@neevliberman Apologies for the confusion, I am unassigning you because this issue has been already completed but remained open. @Jaretzbalba made all the necessary changes with PR has been approved and merged to feature-homepage-launch branch. The issue remained open since the merge team forgot to close the issue manually after the merge.

PS: we don't have GHA that runs, and closes issues automatically once the PR merges except the gh-pages branch.

I am closing this issue now as completed.