Merge pull request #1732 from airqo-platform/staging

move to production
airqo-platform · Nov 25, 2023 · b1454ab · b1454ab
2 parents 7d6e7f5 + 78b4a0e
commit b1454ab
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 91 deletions.
diff --git a/k8s/platform/values-prod.yaml b/k8s/platform/values-prod.yaml
@@ -2,7 +2,7 @@ replicaCount: 1
 image:
   repository: eu.gcr.io/airqo-250220/airqo-next-platform
   pullPolicy: Always
-  tag: prod-bfd1a5f5-1700750597
+  tag: prod-7d6e7f57-1700769588
 imagePullSecrets: []
 nameOverride: ''
 fullnameOverride: ''

diff --git a/k8s/platform/values-stage.yaml b/k8s/platform/values-stage.yaml
@@ -2,7 +2,7 @@ replicaCount: 1
 image:
   repository: eu.gcr.io/airqo-250220/airqo-stage-next-platform
   pullPolicy: Always
-  tag: stage-14894146-1700750510
+  tag: stage-384c490f-1700769506
 imagePullSecrets: []
 nameOverride: ''
 fullnameOverride: ''

diff --git a/mobile/lib/main_common.dart b/mobile/lib/main_common.dart
@@ -22,7 +22,6 @@ import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:hydrated_bloc/hydrated_bloc.dart';
 import 'package:path_provider/path_provider.dart';
 
-
 class AirQoApp extends StatefulWidget {
   const AirQoApp(this.initialLink, {super.key, required this.locale});
 
@@ -41,9 +40,11 @@ class AirQoApp extends StatefulWidget {
 class _AirQoAppState extends State<AirQoApp> {
   Locale? _locale;
 
-  setLocale(Locale locale) {
-    setState(() {
-      _locale = locale;
+  void setLocale(Locale locale) {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      setState(() {
+        _locale = locale;
+      });
     });
   }
 

diff --git a/website/frontend/src/assets/img/cleanAir/acronym3.png b/website/frontend/src/assets/img/cleanAir/acronym3.png
diff --git a/website/frontend/src/assets/img/cleanAir/clean1.jpg b/website/frontend/src/assets/img/cleanAir/clean1.jpg
diff --git a/website/frontend/src/pages/CleanAir/CleanAirAbout.js b/website/frontend/src/pages/CleanAir/CleanAirAbout.js
@@ -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';
@@ -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>
@@ -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 */}
@@ -73,7 +84,7 @@ const CleanAirAbout = () => {
           link="#"
           imageStyle={{
             objectFit: 'cover',
-            maxHeight:'400px'
+            maxHeight: '400px'
           }}
           imgURL={Section2}
           // bgColor="#EDF3FF"
@@ -98,7 +109,7 @@ const CleanAirAbout = () => {
           btnText={'Join the Network -->'}
           imgURL={Section4}
           imageStyle={{
-            objectFit: 'cover',
+            objectFit: 'cover'
           }}
           bgColor="#EDF3FF"
           pillBgColor="#FFFFFF"

diff --git a/website/frontend/src/pages/CleanAir/CleanAirPartners.js b/website/frontend/src/pages/CleanAir/CleanAirPartners.js
@@ -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);
@@ -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>
                 )}
@@ -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>
@@ -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"
@@ -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>
                 )}
@@ -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>