From dab8e32fae82ebe1324d88a42a24f347de56a799 Mon Sep 17 00:00:00 2001 From: josieek Date: Sun, 8 Dec 2024 18:22:29 -0500 Subject: [PATCH 1/5] added pagination to top of page --- frontend/src/grant-info/components/GrantPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/grant-info/components/GrantPage.tsx b/frontend/src/grant-info/components/GrantPage.tsx index 1c630bc..86de41c 100644 --- a/frontend/src/grant-info/components/GrantPage.tsx +++ b/frontend/src/grant-info/components/GrantPage.tsx @@ -12,9 +12,9 @@ function GrantPage() {
+
-
From 4a80cc7ee25d43dbfad370e81c2eba06c32804e2 Mon Sep 17 00:00:00 2001 From: josieek Date: Sun, 8 Dec 2024 21:15:50 -0500 Subject: [PATCH 2/5] added textboxes and subtitles --- .../src/grant-info/components/GrantItem.tsx | 5 ++++- .../components/styles/GrantItem.css | 19 ++++++++++++++++++- .../components/styles/GrantPage.css | 2 +- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/frontend/src/grant-info/components/GrantItem.tsx b/frontend/src/grant-info/components/GrantItem.tsx index bd628a6..0d69851 100644 --- a/frontend/src/grant-info/components/GrantItem.tsx +++ b/frontend/src/grant-info/components/GrantItem.tsx @@ -30,7 +30,8 @@ const GrantItem: React.FC = (props) => {
{isExpanded && (
-

Grant Description:

+

Community Development Initiative Grant

+

Description

The Community Development Initiative Grant is designed to empower local organizations in implementing impactful projects that address @@ -41,6 +42,7 @@ const GrantItem: React.FC = (props) => { outline how their proposed projects will contribute to sustainable growth, promote equity, and engage local stakeholders.

+

Application Requirements

Eligible programs include those that offer job training and workforce development, youth mentorship, health and wellness @@ -51,6 +53,7 @@ const GrantItem: React.FC = (props) => { partnerships with other local organizations will be prioritized for funding.

+

Additional Notes

Funding for this grant may cover program expenses such as staffing, equipment, training materials, and outreach activities. The review diff --git a/frontend/src/grant-info/components/styles/GrantItem.css b/frontend/src/grant-info/components/styles/GrantItem.css index 6318d14..f4aca22 100644 --- a/frontend/src/grant-info/components/styles/GrantItem.css +++ b/frontend/src/grant-info/components/styles/GrantItem.css @@ -1,5 +1,6 @@ .grant-item-wrapper { margin: 2rem 0; + transition: all 0.3s ease-in-out; } .grant-summary { @@ -24,6 +25,7 @@ padding: 0 1rem; /* internal to the actual data */ color: black; margin: 0; /* Remove margin */ + } @@ -38,8 +40,9 @@ } .grant-body.expanded { - max-height: 20rem; + max-height: 100vh; background-color: #F58D5C; + padding: 1rem; } .grant-item.expanded { @@ -52,6 +55,20 @@ margin: 0 1rem; } +.grant-description p { + border: 1px solid black; + border-radius: 8px; + padding: 1rem; + margin-bottom: 1rem; + transition: border-color 0.3s ease; +} + +.grant-description h3 { + margin-left: 0; + text-align: left; + margin-bottom: 0.5rem; + padding-left: 1rem; +} diff --git a/frontend/src/grant-info/components/styles/GrantPage.css b/frontend/src/grant-info/components/styles/GrantPage.css index c478720..cf9c0ec 100644 --- a/frontend/src/grant-info/components/styles/GrantPage.css +++ b/frontend/src/grant-info/components/styles/GrantPage.css @@ -3,7 +3,7 @@ display: flex; flex-direction: column; min-height: 100vh; - justify-content: space-between; + justify-content: flex-start; } /* Top half only takes up as much space as it needs */ From eaf5571acd8ccd7c6f899027cbf39169ebeacec6 Mon Sep 17 00:00:00 2001 From: josieek Date: Sun, 8 Dec 2024 23:55:52 -0500 Subject: [PATCH 3/5] styled expanded view like figma --- frontend/src/App.css | 2 + .../grant-info/components/GrantAttributes.tsx | 22 +++++++++ .../grant-info/components/GrantDetails.tsx | 41 +++++++++++++++++ .../src/grant-info/components/GrantItem.tsx | 43 +++++------------- frontend/src/grant-info/components/Header.tsx | 5 +- .../components/styles/GrantAttributes.css | 30 ++++++++++++ .../components/styles/GrantDetails.css | 23 ++++++++++ .../components/styles/GrantItem.css | 35 ++++++++------ .../components/styles/GrantPage.css | 3 ++ frontend/src/images/bcan_logo.png | Bin 0 -> 12764 bytes 10 files changed, 156 insertions(+), 48 deletions(-) create mode 100644 frontend/src/grant-info/components/GrantAttributes.tsx create mode 100644 frontend/src/grant-info/components/GrantDetails.tsx create mode 100644 frontend/src/grant-info/components/styles/GrantAttributes.css create mode 100644 frontend/src/grant-info/components/styles/GrantDetails.css create mode 100644 frontend/src/images/bcan_logo.png diff --git a/frontend/src/App.css b/frontend/src/App.css index d992e05..894825a 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -47,4 +47,6 @@ align-items: center; /* Centers vertically */ height: 100vh; /* Full height of the viewport */ text-align: center; /* Optional: centers text inside */ + width: 100%; } + diff --git a/frontend/src/grant-info/components/GrantAttributes.tsx b/frontend/src/grant-info/components/GrantAttributes.tsx new file mode 100644 index 0000000..52cee77 --- /dev/null +++ b/frontend/src/grant-info/components/GrantAttributes.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import './styles/GrantAttributes.css'; + +export const GrantAttributes: React.FC = () => { + return( +

+
+
Status
+ +
+
+
Deadline
+ +
+
+
Notification Date
+ +
+
+ + ); +} \ No newline at end of file diff --git a/frontend/src/grant-info/components/GrantDetails.tsx b/frontend/src/grant-info/components/GrantDetails.tsx new file mode 100644 index 0000000..1f8fb05 --- /dev/null +++ b/frontend/src/grant-info/components/GrantDetails.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import './styles/GrantDetails.css'; + +const GrantDetails: React.FC = () => { + return ( +
+

Description

+

+ The Community Development Initiative Grant is designed to empower + local organizations in implementing impactful projects that address + critical social and economic issues. This grant focuses on fostering + community-led programs that aim to improve educational opportunities, + enhance public health services, and support economic development within + underserved areas. Applicants are encouraged to outline how their proposed + projects will contribute to sustainable growth, promote equity, and engage + local stakeholders. +

+ +

Application Requirements

+

+ Eligible programs include those that offer job training and workforce development, + youth mentorship, health and wellness programs, and initiatives aimed at reducing + environmental impacts. Each application should include a detailed plan that highlights + the project’s goals, implementation strategies, and measurable outcomes. Projects that + demonstrate strong community involvement and partnerships with other local organizations + will be prioritized for funding. +

+ +

Additional Notes

+

+ Funding for this grant may cover program expenses such as staffing, equipment, training + materials, and outreach activities. The review committee seeks innovative and sustainable + approaches that align with the mission of strengthening communities and fostering long-term + positive change. Grant recipients will also be expected to submit periodic reports outlining + the progress and achievements of their projects over the funding period. +

+
+ ); +} + +export default GrantDetails; diff --git a/frontend/src/grant-info/components/GrantItem.tsx b/frontend/src/grant-info/components/GrantItem.tsx index 0d69851..4ce61fc 100644 --- a/frontend/src/grant-info/components/GrantItem.tsx +++ b/frontend/src/grant-info/components/GrantItem.tsx @@ -1,5 +1,7 @@ import React, {useState} from 'react'; import './styles/GrantItem.css'; +import { GrantAttributes } from './GrantAttributes'; +import GrantDetails from './GrantDetails'; interface GrantItemProps { grantName: string; @@ -18,6 +20,7 @@ const GrantItem: React.FC = (props) => { }; return ( + // class name with either be grant-item or grant-item-expanded
    @@ -31,40 +34,16 @@ const GrantItem: React.FC = (props) => { {isExpanded && (

    Community Development Initiative Grant

    -

    Description

    -

    - The Community Development Initiative Grant is designed to empower - local organizations in implementing impactful projects that address - critical social and economic issues. This grant focuses on fostering - community-led programs that aim to improve educational - opportunities, enhance public health services, and support economic - development within underserved areas. Applicants are encouraged to - outline how their proposed projects will contribute to sustainable - growth, promote equity, and engage local stakeholders. -

    -

    Application Requirements

    -

    - Eligible programs include those that offer job training and - workforce development, youth mentorship, health and wellness - programs, and initiatives aimed at reducing environmental impacts. - Each application should include a detailed plan that highlights the - project’s goals, implementation strategies, and measurable outcomes. - Projects that demonstrate strong community involvement and - partnerships with other local organizations will be prioritized for - funding. -

    -

    Additional Notes

    -

    - Funding for this grant may cover program expenses such as staffing, - equipment, training materials, and outreach activities. The review - committee seeks innovative and sustainable approaches that align - with the mission of strengthening communities and fostering - long-term positive change. Grant recipients will also be expected to - submit periodic reports outlining the progress and achievements of - their projects over the funding period. -

    +
    + +
    +
    + +
    +
    + )}
diff --git a/frontend/src/grant-info/components/Header.tsx b/frontend/src/grant-info/components/Header.tsx index 02e420a..718542f 100644 --- a/frontend/src/grant-info/components/Header.tsx +++ b/frontend/src/grant-info/components/Header.tsx @@ -5,7 +5,10 @@ const Header: React.FC = () => { return (
-
  • LOGO
    • +
  • + BCAN Logo +
    • +
      diff --git a/frontend/src/grant-info/components/styles/GrantAttributes.css b/frontend/src/grant-info/components/styles/GrantAttributes.css new file mode 100644 index 0000000..abba44f --- /dev/null +++ b/frontend/src/grant-info/components/styles/GrantAttributes.css @@ -0,0 +1,30 @@ +.grant-attributes { + background-color: #F26624; + padding: 1rem; + border-radius: 8px; + margin-top: 1rem; + height: 30%; + margin-right: 1rem; +} + +.attribute-row { + display: flex; + justify-content: space-between; + margin-bottom: 1rem; +} + +.attribute-label { + font-weight: bold; + color:black; + flex: 1; + margin-right: 1rem; +} + +.attribute-value { + background-color: #F26624; + padding: 0.5rem; + border: 1px solid black; + border-radius: 4px; + width: 100px; + height: 20px; +} diff --git a/frontend/src/grant-info/components/styles/GrantDetails.css b/frontend/src/grant-info/components/styles/GrantDetails.css new file mode 100644 index 0000000..537ee71 --- /dev/null +++ b/frontend/src/grant-info/components/styles/GrantDetails.css @@ -0,0 +1,23 @@ +.grant-details { + display: flex; + flex-direction: column; /* Stack the elements vertically */ + gap: 1rem; /* Add spacing between each section */ + } + + .grant-details h3 { + margin-left: 0; + text-align: left; + padding-left: 1rem; + margin-bottom: 0.1rem; + } + + .grant-details p { + border: 1px solid black; + border-radius: 8px; + padding: 1rem; + margin-bottom: 1rem; + transition: border-color 0.3s ease; + overflow-y: auto; + margin-top: 0; + } + \ No newline at end of file diff --git a/frontend/src/grant-info/components/styles/GrantItem.css b/frontend/src/grant-info/components/styles/GrantItem.css index f4aca22..1eb49f1 100644 --- a/frontend/src/grant-info/components/styles/GrantItem.css +++ b/frontend/src/grant-info/components/styles/GrantItem.css @@ -29,6 +29,11 @@ } +.grant-content { + display: flex; + gap: 2rem; /* Adds space between the two sections */ +} + .grant-body { max-height: 0; /* Collapsed state */ min-height: 0; @@ -51,23 +56,23 @@ background-color: #F58D5C; } -.grant-description { - margin: 0 1rem; -} - -.grant-description p { - border: 1px solid black; - border-radius: 8px; - padding: 1rem; - margin-bottom: 1rem; - transition: border-color 0.3s ease; +.bottom-buttons { + display: flex; /* Use flexbox to position the button */ + justify-content: flex-end; /* Align the button to the right */ + padding-top: 1rem; /* Optional: Add some space above the button */ } -.grant-description h3 { - margin-left: 0; - text-align: left; - margin-bottom: 0.5rem; - padding-left: 1rem; +.done-button { + bottom: 1rem; + right: 1rem; + padding: 0.5rem 1rem; + background-color: 3191CF; + color: back; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 1rem; + transition: background-color 0.3s ease; } diff --git a/frontend/src/grant-info/components/styles/GrantPage.css b/frontend/src/grant-info/components/styles/GrantPage.css index cf9c0ec..ae25588 100644 --- a/frontend/src/grant-info/components/styles/GrantPage.css +++ b/frontend/src/grant-info/components/styles/GrantPage.css @@ -4,6 +4,8 @@ flex-direction: column; min-height: 100vh; justify-content: flex-start; + background-color: #F2EBE4; + width: 100%; } /* Top half only takes up as much space as it needs */ @@ -18,3 +20,4 @@ flex-direction: column; margin: 0 1rem; } + diff --git a/frontend/src/images/bcan_logo.png b/frontend/src/images/bcan_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..567249904131232a7d7f26d32767ee9112d70289 GIT binary patch literal 12764 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

      0ev@JVG#1~p^05&ny6?Nw2ArZm4%RL%P!GFB zMncJ^^@dII`8z;0H6TP~&W3&~3x$+)rJPkPM3w4+kMLJ}v#Hg&T(-mLr7%TFbk0)g zMK7@%g|zJSM778VF|c0hO_pPd6$7N3;-!}Lk3>LT z2>sQ3%)GvjD;cz7$CH&^d#my#`mpf12!`x2=|v7Kj>U@Z_lEQ|w>?HnZ8?QZ01cNr z^|0?nj6avf;`S8`vrwH(Q)ZTOtDXcTHQCa*4bnR0=bJ_o)z&qxr@RC(LseeIM{P+m zYx79o1Vbj@j1GWeqYBL3?Gg6MT7)n0eN*XmoLq98&>&o<>j3Gs1Qh_A%~MCDziu#&1^qNv}L zPk2DKa#BU-BDGp_O3I^PEu=z1mY_e`kd^6VSlonfPE0yLthUCOM_R+RMKyE~%d$a_ z%Ef!JU<6 z;1MK{1szuC_vd9h+6bZ%r(2_@%qI*H1dxqU@gF~Wo8hn_slwreuAje-nKOwMmQ_H& z8+7+^K##U=gT5$V(;*IzS-ANPaoQhX-hh_R<&$-GWY$H-o^u28BxA(=o1mDmJCrC# z3`=LSw2*8TJepDc2Sxw`-NGz>ti9Ti(68ZB$M4%nOqqg!4vdv!09mhSY#+K`+3oza%T_6L%v4 zuk>Hfq^Wze%&zs~R(1nVFw`qTo$fHgA-2MyV?#(3e-tmUUM@fiv-&+QsfZjN z&-cl!m1bR1%(&1p5h?=b?Ob+JF}@K`g^4Xra@O%X9m@$yKsj)MnuNsEh7AV)P7_&| zLM*B!A~HTWGG`n~v{LnF5(OZ@)qF?pNJ4lyz5dQ{>m^(@&5~2OzBLriPPBI~SQhrU zz`{r9>RYSnO%$n5+??u706X31+9^^~-zPxOSNvHTM=`QA-{6y`pKV9$b($6Gb(@9{ zy#uv#n6hX-no`p@enz0Z^hAI)v9TgFW+aPDAVrM3d?eP(L8Ct!H1vw{$f}yW3`@LA zeg~DjO$6t_7T!gFp(B(0czA&RQTx7_!5wlI9KV9A{<9$GS5Uk`2!cvFqV`BIO)Bc9N38EMYG&OLIC_?pCcX`Wx^;-y%M^Ee}ogYZW3l}s3#a$W7Clki{t6=J@G zJ>*WB-!pj59LAvC`q(fZJ5AHw8w>qLGAg?o@=0Ro4b8}rl08F%-46Nq-&C`|eX@_L zKielW&U2&kK|A7|x6`3|;X)I=vWmgsu@VRFAO~K=z#UZGV<6*&h3V}*`9{7k{~v~X Bs2~6U literal 0 HcmV?d00001 From f9de9843d5e70ba9f299e20877658c158d1a031f Mon Sep 17 00:00:00 2001 From: josieek Date: Mon, 9 Dec 2024 17:43:53 -0500 Subject: [PATCH 4/5] added attributes section and edit button --- frontend/src/App.css | 1 - .../grant-info/components/GrantAttributes.tsx | 61 ++++++++++++------ .../grant-info/components/GrantDetails.tsx | 2 +- .../src/grant-info/components/GrantItem.tsx | 11 ++-- .../components}/images/bcan_logo.png | Bin .../components/styles/GrantDetails.css | 2 +- 6 files changed, 52 insertions(+), 25 deletions(-) rename frontend/src/{ => grant-info/components}/images/bcan_logo.png (100%) diff --git a/frontend/src/App.css b/frontend/src/App.css index 894825a..4d4c7ed 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -45,7 +45,6 @@ display: flex; justify-content: center; /* Centers horizontally */ align-items: center; /* Centers vertically */ - height: 100vh; /* Full height of the viewport */ text-align: center; /* Optional: centers text inside */ width: 100%; } diff --git a/frontend/src/grant-info/components/GrantAttributes.tsx b/frontend/src/grant-info/components/GrantAttributes.tsx index 52cee77..93c8b71 100644 --- a/frontend/src/grant-info/components/GrantAttributes.tsx +++ b/frontend/src/grant-info/components/GrantAttributes.tsx @@ -1,22 +1,47 @@ import React from 'react'; import './styles/GrantAttributes.css'; +interface GrantAttributesProps { + isEditing: boolean; +} -export const GrantAttributes: React.FC = () => { - return( -

      -
      -
      Status
      - -
      -
      -
      Deadline
      - -
      -
      -
      Notification Date
      - -
      +export const GrantAttributes: React.FC = ({isEditing}) => { + return ( +
      +
      +
      Status
      + {isEditing ? ( + + ) : ( + + )} +
      +
      +
      Deadline
      + {isEditing ? ( + + ) : ( + + )} +
      +
      +
      Notification Date
      + {isEditing ? ( + + ) : ( + + )} +
      - - ); -} \ No newline at end of file + ); +}; diff --git a/frontend/src/grant-info/components/GrantDetails.tsx b/frontend/src/grant-info/components/GrantDetails.tsx index 1f8fb05..32f2fcc 100644 --- a/frontend/src/grant-info/components/GrantDetails.tsx +++ b/frontend/src/grant-info/components/GrantDetails.tsx @@ -1,7 +1,7 @@ import React from 'react'; import './styles/GrantDetails.css'; -const GrantDetails: React.FC = () => { +const GrantDetails: React.FC = () => { return (

      Description

      diff --git a/frontend/src/grant-info/components/GrantItem.tsx b/frontend/src/grant-info/components/GrantItem.tsx index 4ce61fc..6ce794e 100644 --- a/frontend/src/grant-info/components/GrantItem.tsx +++ b/frontend/src/grant-info/components/GrantItem.tsx @@ -14,10 +14,12 @@ const GrantItem: React.FC = (props) => { const { grantName, applicationDate, generalStatus, amount, restrictionStatus } = props; const [isExpanded, setIsExpanded] = useState(false); + const [isEditing, setIsEditing] = useState(false); const toggleExpand = () => { setIsExpanded(!isExpanded); }; + const toggleEdit = () => setIsEditing((prev) => !prev); return ( @@ -35,12 +37,13 @@ const GrantItem: React.FC = (props) => {

      Community Development Initiative Grant

      - - - + +
      - +
      diff --git a/frontend/src/images/bcan_logo.png b/frontend/src/grant-info/components/images/bcan_logo.png similarity index 100% rename from frontend/src/images/bcan_logo.png rename to frontend/src/grant-info/components/images/bcan_logo.png diff --git a/frontend/src/grant-info/components/styles/GrantDetails.css b/frontend/src/grant-info/components/styles/GrantDetails.css index 537ee71..0d3ef43 100644 --- a/frontend/src/grant-info/components/styles/GrantDetails.css +++ b/frontend/src/grant-info/components/styles/GrantDetails.css @@ -11,7 +11,7 @@ margin-bottom: 0.1rem; } - .grant-details p { + .grant-details p{ border: 1px solid black; border-radius: 8px; padding: 1rem; From c1afbed5878432d41fc6724e6888a121bdf404ef Mon Sep 17 00:00:00 2001 From: josieek Date: Mon, 9 Dec 2024 17:50:11 -0500 Subject: [PATCH 5/5] added attributes --- frontend/src/App.css | 1 + .../grant-info/components/GrantAttributes.tsx | 66 +++++++++++++++++++ .../components/styles/GrantAttributes.css | 2 +- 3 files changed, 68 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 4d4c7ed..6cfcbf0 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -47,5 +47,6 @@ align-items: center; /* Centers vertically */ text-align: center; /* Optional: centers text inside */ width: 100%; + height: 100%; } diff --git a/frontend/src/grant-info/components/GrantAttributes.tsx b/frontend/src/grant-info/components/GrantAttributes.tsx index 93c8b71..bdcce6f 100644 --- a/frontend/src/grant-info/components/GrantAttributes.tsx +++ b/frontend/src/grant-info/components/GrantAttributes.tsx @@ -18,6 +18,17 @@ export const GrantAttributes: React.FC = ({isEditing}) => )}
      +
      +
      Does BCAN qualify?
      + {isEditing ? ( + + ) : ( + + )} +
      Deadline
      {isEditing ? ( @@ -42,6 +53,61 @@ export const GrantAttributes: React.FC = ({isEditing}) => )}
      +
      +
      Report Due:
      + {isEditing ? ( + + ) : ( + + )} +
      +
      +
      Estimated Completion Time:
      + {isEditing ? ( + + ) : ( + + )} +
      +
      +
      Scope Document:
      + {isEditing ? ( + + ) : ( + + )} +
      +
      +
      Grantmaker POC:
      + {isEditing ? ( + + ) : ( + + )} +
      +
      +
      Timeline:
      + {isEditing ? ( + + ) : ( + + )} +
      ); }; diff --git a/frontend/src/grant-info/components/styles/GrantAttributes.css b/frontend/src/grant-info/components/styles/GrantAttributes.css index abba44f..b568561 100644 --- a/frontend/src/grant-info/components/styles/GrantAttributes.css +++ b/frontend/src/grant-info/components/styles/GrantAttributes.css @@ -2,7 +2,7 @@ background-color: #F26624; padding: 1rem; border-radius: 8px; - margin-top: 1rem; + margin-top: 4rem; height: 30%; margin-right: 1rem; }