Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Problem, Solution, and Impact Sections to Project Pages #3767

Merged
merged 7 commits into from
Feb 1, 2023
Merged

Add Problem, Solution, and Impact Sections to Project Pages #3767

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fe7d9bf
added project values card to project.html
patrickohh Nov 29, 2022
8517a5d
changed id for div
patrickohh Nov 30, 2022
5ef5ec5
added all proper fields, new css components, and image for value card
patrickohh Dec 6, 2022
b311d5a
Made it so the description card does not touch the outer div with sma…
patrickohh Jan 9, 2023
125a3ca
Implemented new design for mobile
patrickohh Jan 14, 2023
fa29960
Made some changes to get rid of dead code
patrickohh Jan 19, 2023
10cf283
Made changes to text align to description card for mobile view
patrickohh Jan 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions _layouts/project.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,32 @@ <h5 class='status-text'>{{ page.status }}</h5>
</div>
</div>

<!--Project Value Card-->
{% if page.problem %}
<div id='project-value-card' class='page-card card-primary page-card-lg page-card--project-description-page'>
<h2 class='project-page-card-title title6'>Value</h2>
<div class='project-page-value-description'>
<div class='description-grid-item'>
<p><strong>Problem</strong></p>
<p>{{ page.problem }}</p>
<p><strong>Solution</strong></p>
<p>{{ page.solution }}</p>
<p><strong>Impact</strong></p>
<p>{{ page.impact }}</p>
</div>
<div class='description-grid-item'>
<div class='sdg-img-item'>
<h2 class='sdg-card-title title7'>Sustainable Development Goal</h2>
<img class='sdg-img' src='{{ page.sdg-image-src }}'/>
</div>
<div class='sdg-description-grid-item'>
{{ page.sdg }}
</div>
</div>
</div>
</div>
{% endif %}

<!--Project Resources Card-->
<div class='page-card card-primary page-card-lg page-card--project-description-page'>
<h2 class='project-page-card-title title6'>Resources</h2>
Expand Down
43 changes: 43 additions & 0 deletions _sass/components/_project-page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,49 @@
border-radius: 11px;
}

.project-page-value-description {
display: grid;
grid-template-columns: 55% auto;
grid-template-rows: auto;
column-gap: 6%;
padding: 0px 2%;

// NEW MOBILE FRIENDLY RULES
@media #{$bp-below-mobile} {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto;
}
}

.sdg-card-title {
color: $color-white;
}

.sdg-grid-item {
padding: 0px;
}

.sdg-img-item {
text-align: center;
padding: 30px 60px 10px;
border-radius: 10px 10px 0px 0px;
background: #02548B;
}

.sdg-description-grid-item {
padding: 25px 19px;
background: #F6F6F6;
border-radius: 0px 0px 20px 20px;
}

.sdg-img {
width: 145px;
height: 145px;
left: 72px;
top: 98px;
}

.resource-list {
display: flex;
flex-wrap: wrap;
Expand Down