Skip to content

Commit

Permalink
Merge pull request #1722 from airqo-platform/WEB-CLEAN-AIR-IMPLEMENTA…
Browse files Browse the repository at this point in the history 
…TION

[WEBSITE] Image and section update on About page
  • Loading branch information
@Baalmart
Baalmart authored Nov 25, 2023
2 parents e821059 + 114736e commit 78b4a0e
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 85 deletions.
Binary file added website/frontend/src/assets/img/cleanAir/acronym3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/frontend/src/assets/img/cleanAir/clean1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 32 additions & 21 deletions website/frontend/src/pages/CleanAir/CleanAirAbout.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React from 'react';
import { useInitScrollTop } from 'utilities/customHooks';
import { SplitSection, MainHighlight, ButtonCTA } from 'components/CleanAir';
import Section1 from 'assets/img/cleanAir/clean.jpeg';
import { SplitSection, SingleSection, MainHighlight, ButtonCTA } from 'components/CleanAir';
// import Section1 from 'assets/img/cleanAir/clean.jpeg';
import Section11 from 'assets/img/cleanAir/clean1.jpg';
import Section2 from 'assets/img/cleanAir/mission.jpeg';
import Section3 from 'assets/img/cleanAir/acronym.jpg';
// import Section3 from 'assets/img/cleanAir/acronym.jpg';
import Section33 from 'assets/img/cleanAir/acronym3.png';
import Section4 from 'assets/img/cleanAir/synergy.jpg';
import Section5 from 'assets/img/cleanAir/goals.JPG';
import SEO from 'utilities/seo';
Expand All @@ -20,7 +22,7 @@ const CleanAirAbout = () => {
{/* section 1 */}
<div className="Hero">
<span className="image-container">
<img src={Section1} />
<img src={Section11} />
</span>
<div className="hero-content">
<div>
Expand All @@ -44,22 +46,31 @@ const CleanAirAbout = () => {
</div>

{/* section 2 */}
<div style={{paddingTop:'80px'}}>
<SplitSection
pillTitle="CLEAN-Air"
content="CLEAN-Air, an acronym coined from ‘Championing Liveable urban Environments through African Networks for Air’, brings together stakeholders and researchers in air quality management to share best practices and knowledge on developing and implementing air quality management solutions in African cities."
imgURL={Section3}
imageStyle={{
objectFit: 'cover',
maxHeight: '400px'
}}
// bgColor="#FFFFFF"
// pillBgColor="#ECF2FF"
// pillTextColor="#135DFF"
<div>
<SingleSection
content={
<div
style={{
padding: '50px 0',
fontSize: '1.5rem',
lineHeight: '2.5rem'
}}>
<span
style={{
fontWeight: 'bold',
fontSize: '40px',
color: '#135DFF'
}}>
CLEAN-Air
</span>
, an acronym coined from ‘Championing Liveable urban Environments through African
Networks for Air’, brings together stakeholders and researchers in air quality
management to share best practices and knowledge on developing and implementing air
quality management solutions in African cities.
</div>
}
bgColor="#EDF3FF"
pillBgColor="#FFFFFF"
pillTextColor="#000000"
showButton={false}
btnStyle={{ width: 'auto' }}
/>
</div>
{/* section 3 */}
Expand All @@ -73,7 +84,7 @@ const CleanAirAbout = () => {
link="#"
imageStyle={{
objectFit: 'cover',
maxHeight:'400px'
maxHeight: '400px'
}}
imgURL={Section2}
// bgColor="#EDF3FF"
Expand All @@ -98,7 +109,7 @@ const CleanAirAbout = () => {
btnText={'Join the Network -->'}
imgURL={Section4}
imageStyle={{
objectFit: 'cover',
objectFit: 'cover'
}}
bgColor="#EDF3FF"
pillBgColor="#FFFFFF"
Expand Down
126 changes: 62 additions & 64 deletions website/frontend/src/pages/CleanAir/CleanAirPartners.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,32 +40,19 @@ const CleanAirPartners = () => {
(partner) => partner.type === 'ca-private-sector'
);

const generatePartnerDataGroup = (partners) => {
return partners
.map((e, i) => {
return i % 4 === 0 ? partners.slice(i, i + 4) : null;
})
.filter((e) => {
return e;
});
};

const supportPartnerDataGroup = generatePartnerDataGroup(supportPartners);
const policyPartnerDataGroup = generatePartnerDataGroup(policyPartners);
const privateSectorPartnerDataGroup = generatePartnerDataGroup(privateSectorPartners);

const onLogoClick = (uniqueTitle) => (event) => {
const onLogoClick = (data) => (event) => {
event.preventDefault();
if (uniqueTitle.descriptions.length > 0) {
navigate(`/partners/${uniqueTitle.unique_title}`);
} else if (uniqueTitle.partner_link) {
window.open(uniqueTitle.partner_link, '_blank');
if (data.descriptions.length > 0) {
navigate(`/partners/${data.unique_title}`);
} else if (data.partner_link) {
window.open(data.partner_link, '_blank');
}
};

const [itemsToShow, setItemsToShow] = useState(10);
const [itemsToShowPolicy, setItemsToShowPolicy] = useState(3);
const [itemsToShowSupport, setItemsToShowSupport] = useState(3);
const [itemsToShow, setItemsToShow] = useState(8);
const [itemsToShowPolicy, setItemsToShowPolicy] = useState(8);
const [itemsToShowSupport, setItemsToShowSupport] = useState(8);
const [itemsToShowPrivate, setItemsToShowPrivate] = useState(8);

const showMoreItems = (setItems, increment) => {
setItems((prevState) => prevState + increment);
Expand Down Expand Up @@ -145,28 +132,33 @@ const CleanAirPartners = () => {
<div className="partners AboutUsPage">
<div className="partners-wrapper wrapper">
<div className="partners-list">
{implementingPartners.slice(0, itemsToShow).map((networkPartner) => (
{implementingPartners.slice(0, itemsToShow).map((implementingPartner) => (
<div
style={networkPartner.descriptions.length > 0 ? { cursor: 'pointer' } : null}
style={
implementingPartner.descriptions.length > 0 ? { cursor: 'pointer' } : null
}
className="partner-img"
key={networkPartner.id}
onClick={onLogoClick(networkPartner)}>
<img src={networkPartner.partner_logo} alt={networkPartner.partner_name} />
key={implementingPartner.id}
onClick={onLogoClick(implementingPartner)}>
<img
src={implementingPartner.partner_logo}
alt={implementingPartner.partner_name}
/>
</div>
))}
</div>
<div className="partner-logos" id="logo-table">
<div className="partner-logos">
{itemsToShow < implementingPartners.length && (
<button
className="partners-toggle-button"
onClick={() => showMoreItems(setItemsToShow, 10)}>
onClick={() => showMoreItems(setItemsToShow, 8)}>
Show More
</button>
)}
{itemsToShow > 10 && (
{itemsToShow > 8 && (
<button
className="partners-toggle-button"
onClick={() => showLessItems(setItemsToShow, 10, 10)}>
onClick={() => showLessItems(setItemsToShow, 8, 8)}>
Show Less
</button>
)}
Expand Down Expand Up @@ -223,20 +215,22 @@ const CleanAirPartners = () => {
<img src={policyPartner.partner_logo} alt={policyPartner.partner_name} />
</div>
))}
{itemsToShowPolicy < policyPartnerDataGroup.length && (
<button
className="partners-toggle-button"
onClick={() => showMoreItems(setItemsToShowPolicy, 3)}>
Show More
</button>
)}
{itemsToShowPolicy > 3 && (
<button
className="partners-toggle-button"
onClick={() => showLessItems(setItemsToShowPolicy, 3, 3)}>
Show Less
</button>
)}
<div className="partner-logos">
{itemsToShowPolicy < policyPartners.length && (
<button
className="partners-toggle-button"
onClick={() => showMoreItems(setItemsToShowPolicy, 8)}>
Show More
</button>
)}
{itemsToShowPolicy > 8 && (
<button
className="partners-toggle-button"
onClick={() => showLessItems(setItemsToShowPolicy, 8, 8)}>
Show Less
</button>
)}
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -281,7 +275,7 @@ const CleanAirPartners = () => {
<div className="partners AboutUsPage">
<div className="partners-wrapper wrapper">
<div className="partners-list">
{privateSectorPartners.slice(0, itemsToShowPolicy).map((privatePartner) => (
{privateSectorPartners.slice(0, itemsToShowPrivate).map((privatePartner) => (
<div
style={privatePartner.descriptions.length > 0 ? { cursor: 'pointer' } : null}
className="partner-img"
Expand All @@ -290,17 +284,19 @@ const CleanAirPartners = () => {
<img src={privatePartner.partner_logo} alt={privatePartner.partner_name} />
</div>
))}
{itemsToShowPolicy < policyPartnerDataGroup.length && (
</div>
<div className="partner-logos">
{itemsToShow < privateSectorPartners.length && (
<button
className="partners-toggle-button"
onClick={() => showMoreItems(setItemsToShowPolicy, 3)}>
onClick={() => showMoreItems(setItemsToShowPrivate, 8)}>
Show More
</button>
)}
{itemsToShowPolicy > 3 && (
{itemsToShow > 8 && (
<button
className="partners-toggle-button"
onClick={() => showLessItems(setItemsToShowPolicy, 3, 3)}>
onClick={() => showLessItems(setItemsToShowPrivate, 8, 8)}>
Show Less
</button>
)}
Expand Down Expand Up @@ -360,20 +356,22 @@ const CleanAirPartners = () => {
<img src={supportPartner.partner_logo} alt={supportPartner.partner_name} />
</div>
))}
{itemsToShowSupport < supportPartnerDataGroup.length && (
<button
className="partners-toggle-button"
onClick={() => showMoreItems(setItemsToShowSupport, 3)}>
Show More
</button>
)}
{itemsToShowSupport > 3 && (
<button
className="partners-toggle-button"
onClick={() => showLessItems(setItemsToShowSupport, 3, 3)}>
Show Less
</button>
)}
<div className="partner-logos">
{itemsToShowSupport < supportPartners.length && (
<button
className="partners-toggle-button"
onClick={() => showMoreItems(setItemsToShowSupport, 8)}>
Show More
</button>
)}
{itemsToShowSupport > 8 && (
<button
className="partners-toggle-button"
onClick={() => showLessItems(setItemsToShowSupport, 8, 8)}>
Show Less
</button>
)}
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 78b4a0e

Please sign in to comment.