Citizen Engagement page

Citizen Engagement

Purpose of page

• Allow volunteers to find projects based on the program area(s) they are interested in

Technical details

• URL: https://www.hackforla.org/citizen-engagement
• GitHub locations (includes any relevant html, css, yml, md, js files)
  • pages/citizen-engagement.html: Current HTML file for the Citizen Engagement page
  • _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.
  • _sass/components/_citizen_engagement.scss: Current SCSS file for the Citizen Engagement page
  • assets/js/citizen-engagement.js
  • _projects: The directory for each project's Markdown file, which contains
    • program-area field that designates which program area page a project should be on. For the Citizen Engagement page, only projects with

      program-area:
        - Citizen Engagement 
      

      and visible: true in their Markdown file are displayed on the Citizen Engagement webpage
    • program area detailed info (problem, solution, impact, sdg, card-image-src, card-image-alt, sdg-image-src, sdg-image-alt) that is displayed as Problem, Solution, Impact, and Sustainable Development Goal on the Citizen Engagement webpage. (Note: Not all of the projects have this information yet.)
• Wiki Architecture references (includes links to details about reusable components)
• Figma pages
  • Current Pages
• Issue Label: P-Feature: Citizen Engagement
  • In Issues Tab
  • On Project Board

Content (sections and features)

• Current Projects

Page screenshot (current version)

• Date Updated: 2023-02-27

• Expand to see desktop view at 1440px width

  
• Expand to see mobile view at 375px width with all cards collapsed

  
• Expand to see mobile view at 375px width with one card expanded