Rename citizen-engagement-cards.html

[JessicaLucindaCheng]

Dependency

• Citizen Engagement page: Display a message if missing program area detailed info #3757
• Citizen Engagement (desktop): Update padding/margins and SDG image size #3738
• Citizen Engagement page: Add links to each red project header #3802

Overview

We are going to rename the citizen-engagement-cards.html to program-area-pages-cards.html so that the name of the file reflects the purpose of the card better.

Details

The cards will be used in the future on more than just the Citizen Engagement webpage [see Resources/Instructions 1]. The card will be used for future program area pages, such as an Environment webpage and a Social Safety Net webpage.

Action Items

Developer

• In your IDE on your computer, navigate to the _includes directory and find citizen-engagement-cards.html
  • Rename citizen-engagement-cards.html to program-area-pages-cards.html
  • In the file, add this comment at the top

    <!-- These are the cards found on a program area page, such as the cards on https://www.hackforla.org/citizen-engagement webpage. -->
    

• In pages/citizen-engagement.html, change

{% include citizen-engagement-cards.html %}

to

{% include program-area-pages-cards.html %}

• Using Docker and developer tools, check your changes
  • look good in desktop, tablet, and mobile views,
  • that nothing breaks, and
  • it still functions and looks the same as the Citizen Engagement page on the live website
• Once your pull request has been merged,
  • In the Citizen Engagement page wiki page [see Resources/Instructions 4], change the following line from:

      * [_includes/citizen-engagement-cards.html](https://github.com/hackforla/website/blob/gh-pages/_includes/citizen-engagement-cards.html): HTML file that provides the layout/format for each card on the Citizen Engagement page
    

    to

      * [_includes/program-area-pages-cards.html](https://github.com/hackforla/website/blob/gh-pages/_includes/program-area-pages-cards.html): HTML file that provides the layout/format for each card on the Citizen Engagement page
        * This file used to be called `citizen-engagement-cards.html`.
    

Merge Team, Technical Lead, or Product Manager

• Once the pull request associated with this issue is merged, go to issue Citizen Engagement page: Use image instead of card-image-src #4159 and check if all the issues listed under the Dependency section are closed. If they are all closed, move that issue (Citizen Engagement page: Use image instead of card-image-src #4159) into the New Issue Approval column, remove the Dependency label on it, and add a ready for dev lead label to it.

Resources/Instructions

1. Citizen Engagement webpage
2. _includes/citizen-engagement-cards.html
3. pages/citizen-engagement.html
4. Citizen Engagement page wiki page

[JessicaLucindaCheng]

Issue writing ETA and availability

• Availability: 6 hours
• ETA: Fri, Dec 9, 2022

To Dos

• Add this issue to the dependency section in Create each program area page automatically using a layout #3328
• Add Action Items
  • Rename citizen-engagement-cards.html to something relevant program-area-page-card-layout.html
  • Figure out where the name is calling it and change it there too

[JessicaLucindaCheng]

Issue writing ETA and availability

• Availability: 6 hours
• ETA: Sun, Jan 22, 2023

To Dos

• Add this issue to the dependency section in Create each program area page automatically using a layout #3328
• Add Action Items
  • Rename citizen-engagement-cards.html to something relevant
  • Figure out where the name is calling it and change it there too