Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Epic Feature – Conservation Projects Page

Đang mở
  • Có gì không ổn?
#11 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
38/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
react
Lĩnh vực
frontend, web-dev

Hướng nghiên cứu

Trước tiên, hãy xem lại thiết kế Figma được liên kết và các điểm truy cập hiện có của bản đồ và điều hướng bên; issue không nêu tệp hoặc test nào, vì vậy hãy xác định cấu trúc routing và UI hiện tại trước khi chia nhỏ công việc. Công việc được xem là hoàn tất khi trang dự án responsive khớp với thiết kế, hỗ trợ điều hướng, phân trang và lọc, sử dụng các component có thể tái sử dụng, đồng thời đáp ứng các tiêu chí nghiệm thu được liệt kê.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Beginner California Tribal GIS Hackathon

Issue created with ChatGPT models' help¹

Description

This epic focuses on implementing the Conservation Projects page, where all projects from the map are displayed in a structured table view¹.

The page will follow the Figma design and include a table layout with columns (Project Name, Location, Date Created, Date Updated) along with pagination and filtering capabilities³. The primary goal is to build a fully functional UI with component-based architecture, while ensuring extensibility for backend integration later⁴.

Image

Goals

  • Display conservation projects in a table format¹
  • Enable navigation from side nav
  • Match Figma layout and styling exactly⁴
  • Implement reusable components (table, pagination, filters)¹
  • Ensure scalable structure for future backend integration²
  • Please make table responsive as much possible for smaller screens

Implementation Instructions

  • Create Conservation Projects page layout container¹

  • Store conservation projects (local state or temporary storage)³

  • Render conservation projects in table format⁴

  • Make project name clickable → navigate to map view¹

  • Create reusable components:

    • Table component²
    • Pagination component³
    • Filter component⁴

  • Apply exact Figma layout specs (see below)¹

  • Ensure responsive and clean UI behavior²

  • Add basic routing integration for navigation³

  • Add placeholder validation/testing logic⁴

  • Please make table responsive as much possible for smaller screens

Layout Specs (Figma)

Main Container
  • Width: 1146px¹
  • Height: 291px²
  • Padding: 16px³
Conservation Projects Header
  • Width: 1114px¹
  • Height: 33px²
  • Gap: 10px³
  • Padding-left/right: 2px⁴
Row Spacer
  • Width: 1114px¹
  • Height: 24px²
Table Container
  • Width: 1114px¹
  • Height: 202px²
  • Border-radius: 16px³
  • Background: #FFFFFF⁴
Table Body
  • Width: 1114px¹
  • Height: 144px²
  • Border-radius: 4px³
  • Background: #FFFFFF⁴
Project Name Column
  • Width: 564px¹
  • Height: 144px²
Heading
  • Height: 48px¹
  • Padding: 10px top/bottom, 16px left/right²
Heading Text
  • Font-weight: SemiBold¹
  • Font-size: Body SM²
  • Color: #757575³
Filter Icon
  • Size: 12x18¹
  • Font: Font Awesome²
  • Color: #00000042³
Values (Clickable Rows)
  • Height: 48px¹
  • Padding: 14px top/bottom, 16px left/right²
  • Background: #FFFFFF³
  • Box-shadow: inset border⁴
Value Link Text
  • Font-weight: Light¹
  • Font-size: Body MD²
  • Color: #01579B³

👉 On click:

  • Navigate to: Ecosystem Map > Bluff > Info¹
  • Animation: Instant (0ms)²
Other Columns
Location Column
  • Width: 250px¹
Acreage Column
  • Width: 150px¹
Status Column
  • Width: 150px¹
Footer (Pagination)
  • Width: 1114px¹
  • Height: 58px²
  • Gap: 32px³
  • Padding-left/right: 8px⁴
Pagination Text
  • Text: "1 - 2 of 2"¹
  • Font-size: Body XS²
  • Color: #000000DE³
Navigation Buttons
  • Size: 32x32¹
  • Border-radius: 32px²
  • Type: plain³
  • Includes forward and back buttons⁴

Acceptance Criteria

  • Conservation Projects page renders with correct layout¹
  • Project name is clickable and navigates to map view³
  • Table layout matches Figma specs exactly⁴
  • Pagination UI is present and functional¹
  • Filter UI is present (basic or placeholder)²
  • Components are reusable and modular³
  • Please make table responsive as much possible for smaller screens

Sub-Issues

  • Create Conservation Projects page layout
  • Implement routing from table → map view
  • Add basic validation/state handling
  • Add UI tests

Resources

¹ https://react.dev/learn/sharing-state-between-components
² https://react.dev/learn/conditional-rendering
³ https://developer.mozilla.org/en-US/docs/Web/CSS/flex
⁴ https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Figma Design (Full Details): https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node-id=1-1465&viewport=787%2C545%2C0.11&t=Xwc2asfn9Qksi99P-8&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A896&page-id=0%3A1&hide-ui=1

Ngôn ngữ chính
HTML
Star
2
Fork
11
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của OpenSourceFellows/map_dashboard_hackathon

Tất cả issue của OpenSourceFellows/map_dashboard_hackathon

Issue tương tự

Thêm issue về Web Dev

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.