Citizen Engagement page - hackforla/website GitHub Wiki

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
  • Issue Label: P-Feature: Citizen Engagement

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
⚠️ **GitHub.com Fallback** ⚠️