hackforla / hackforla/website

Projects Pages: Update Project Status Options and Label Color

Open
#8,776 1 comment 0 reactions 0 assignees View on GitHub
Complexity: Medium Feature Missing role: back end/devOps role: front end size: missing
Dominant language
JavaScript
Stars
363
Forks
872
Avg merge
2d 21h
Merged PRs (30d)
18

Description

### Overview
We need to add a new project status option for "closed" projects and a new status label color scheme to ensure accuracy and distinction between the projects lifecycle.

#### Details
- New Project Status Label
- Create a new status label called 'Closed'
- Update status label color palette
- Keep 'Active' as $color-lightgreen: #BBFFBB
- Keep 'On Hold' as $color-lightyellow: #FFFF97
- Create two new colors for
- 'Closed' status in /_sass/variables/_colors.scss
```
// Grays
$color-lightgray: #D9D9D9;
```
- 'Completed' status in /_sass/variables/_colors.scss
```
// Blues
$color-paleblue: #B8D9FF;
```
- Update colors in their status variables in the pages the sass files they appear in [^2] and /_sass/components/_projects-page.scss and /_sass/components/_home.scss from
```
.status-Completed {
  background-color: $color-salmon;
}
```
to
```
.status-Completed {
  background-color: $color-paleblue;
}

.status-Closed {
  background-color: $color-lightgray;
}
```
- Update the .js file /assets/js/current-projects.js to include the new status
- change from
```
const statusList = ["Active","On Hold","Completed"]
```
- to
```
const statusList = ["Active","On Hold","Completed","Closed"]
```

Reason: We are adding a 'Closed' project status to accurately reflect retired projects that did not make it to completion. This is different from 'completed' projects status. In the process of adding another color, we realized "closed" should not be red, so we are changing some of the colors in addition to adding a new color.

### Action Items
- [ ] Review the Details section above
- [ ] Verify the changes by viewing the following in your local environment with Docker and include before and after screenshots with your pull request:
- [ ] Hack for LA website project page [^1]

### Resources
- This issue needs to be completed in order to execute and complete
- #8752
- #8751

#### Here is an example

Ignore the shape of the labels. This is an example of what it should look like.

Image

[^1]: https://github.com/hackforla/website/blob/gh-pages/_sass/variables/_colors.scss
[^2]: https://github.com/hackforla/website/blob/gh-pages/_sass/components/_projects.scss
[^3]: https://github.com/hackforla/website/blob/gh-pages/_sass/components/_projects-page.scss
[^4]: https://github.com/hackforla/website/blob/gh-pages/_sass/components/_home.scss
[^5]: https://github.com/hackforla/website/blob/gh-pages/assets/js/current-projects.js
Projects page URL: https://www.hackforla.org/projects/

Contributor guide

Open the contributing guide

Research direction

Start with _sass/variables/_colors.scss, _sass/components/_projects.scss, _sass/components/_projects-page.scss, _sass/components/_home.scss, and assets/js/current-projects.js. Run the site locally with Docker and inspect the Hack for LA projects page. Done means the Closed option appears, status colors match the requested palette, and before-and-after screenshots are included with the pull request.

Written by the indexing model from the issue text.

Assessment

Tech stack
docker, javascript, sass
Domain
frontend, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.