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

Update Projects Page Header to match the new Figma design #2355

Closed
3 tasks done
abuna1985 opened this issue Oct 10, 2021 · 7 comments · Fixed by #3087
Closed
3 tasks done

Update Projects Page Header to match the new Figma design #2355

abuna1985 opened this issue Oct 10, 2021 · 7 comments · Fixed by #3087
Assignees
Labels
Complexity: Medium Feature: Feature Branch Requires Branching off a Feature Branch instead of gh-pages P-Feature: Projects page https://www.hackforla.org/projects/ role: front end Tasks for front end developers size: 1pt Can be done in 4-6 hours Status: Help Wanted Internal assistance is required to make progress Status: Updated No blockers and update is ready for review

Comments

@abuna1985
Copy link
Member

abuna1985 commented Oct 10, 2021

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

  • Update the text (HTML) content to match the updated design
  • 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)

---
layout: default
title: Projects
permalink: /projects/
---
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PMQK7VL" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="header-container header-container--projscredits">
<div class="projscredits-text-margin">
<h1>Our Projects</h1>
<p>Our projects have real impact in local communities. There are
countless opportunities to build digital products, programs and
services across a number of skill levels and practice areas.
</p>
<p>Use the filters below to find a project that best suits your
interest, and find out how to get involved.
</p>
</div>
<img src="/assets/images/projects-page/projects-hero.svg">
</div>
</div>
{%- include current-projects.html -%}

.header-container--projscredits {
display: flex;
flex-direction: row;
justify-content: center;
padding: 64px;
img {
max-height: 240px;
}
@media #{$bp-below-tablet}{
img {
max-height: 170px;
}
}
@media #{$bp-below-mobile} {
flex-direction: column;
align-items: center;
padding: 32px;
}
}

@github-actions github-actions bot added Feature Missing This label means that the issue needs to be linked to a precise feature label. role missing size: missing labels Oct 10, 2021
@abuna1985 abuna1985 added role: front end Tasks for front end developers P-Feature: Projects page https://www.hackforla.org/projects/ Complexity: Medium Ready for Prioritization and removed Feature Missing This label means that the issue needs to be linked to a precise feature label. role missing size: missing labels Oct 10, 2021
@BrianCodes33 BrianCodes33 self-assigned this Feb 8, 2022
@github-actions github-actions bot added the 2 weeks inactive An issue that has not been updated by an assignee for two weeks label Feb 11, 2022
@github-actions
Copy link

@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.

@JessicaLucindaCheng JessicaLucindaCheng removed the 2 weeks inactive An issue that has not been updated by an assignee for two weeks label Feb 12, 2022
@BrianCodes33
Copy link
Contributor

BrianCodes33 commented Feb 13, 2022

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;
    }
  }
}

@BrianCodes33 BrianCodes33 removed their assignment Feb 13, 2022
@JessicaLucindaCheng JessicaLucindaCheng added the size: 1pt Can be done in 4-6 hours label Mar 8, 2022
@Jaretzbalba Jaretzbalba self-assigned this May 2, 2022
@Jaretzbalba
Copy link
Member

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

@github-actions github-actions bot added the Status: Updated No blockers and update is ready for review label May 6, 2022
@neevliberman neevliberman self-assigned this Sep 25, 2022
@github-actions
Copy link

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
Copy link
Member

Availabilty: 1 hr
ETA: 9-28-22

@neevliberman neevliberman added the Status: Help Wanted Internal assistance is required to make progress label Sep 28, 2022
@neevliberman
Copy link
Member

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
Copy link
Member

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Complexity: Medium Feature: Feature Branch Requires Branching off a Feature Branch instead of gh-pages P-Feature: Projects page https://www.hackforla.org/projects/ role: front end Tasks for front end developers size: 1pt Can be done in 4-6 hours Status: Help Wanted Internal assistance is required to make progress Status: Updated No blockers and update is ready for review
Projects
Development

Successfully merging a pull request may close this issue.

7 participants