Projects Pages: Update Project Status Options and Label Color
- 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.
[^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
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