Changes in Partners Page Design

- Design improvements to Partners Page
- Fix UI misalignments
- Related to #6462

frontend/src/assets/styles/_colors.scss

@@ -102,6 +102,9 @@ Background colors
 .bg-grey-light {
   background-color: $grey-light;
 }
+.bg-grey-dark {
+  background-color: #43474e;
+}
 .bg-white {
   background-color: $white;
 }

frontend/src/assets/styles/_extra.scss

@@ -448,12 +448,12 @@ a[href="https://www.mapbox.com/map-feedback/"]
 .two-column {
   grid-template-columns: 6fr 4fr;
 }
-.graphics-container{
+.graphics-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 600px));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1rem;
 }
-.input-container{
+.input-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 600px));
 }

frontend/src/components/partners/currentProjects.js

@@ -1,15 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { TasksMap } from '../taskSelection/map';
+import { Link } from 'react-router-dom';
+import ReactPlaceholder from 'react-placeholder';
 import { Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
+
+import { TasksMap } from '../taskSelection/map';
 import { Button } from '../button';
-import { Link } from 'react-router-dom';
 import { API_URL } from '../../config';
-
 import messages from './messages';
-import ReactPlaceholder from 'react-placeholder';
 import ProjectProgressBar from '../projectCard/projectProgressBar';
+import { HeaderLine } from '../projectDetail/header';
 
 // Import Swiper styles
 import './styles.scss';
@@ -24,13 +25,9 @@ export function CurrentProjects({ currentProjects }) {
   const [error, setError] = useState(false);
   const pagination = {
     clickable: true,
-    renderBullet: function (index, className) {
-      return '<span class="' + className + '">' + (index + 1) + '</span>';
-    },
+    el: '.swiper-custom-pagination',
   };
 
-  const text = `This remote mapping of buildings will support the implementation of planned activities and
-  largely the generation of data for humanitarian activities in the identified provinces. `;
   const fetchData = async () => {
     try {
       const projectIds = currentProjects.split(',').map((id) => parseInt(id.trim(), 10));
@@ -54,6 +51,7 @@ export function CurrentProjects({ currentProjects }) {
           percentMapped: jsonInfo.percentMapped,
           percentValidated: jsonInfo.percentValidated,
           percentBadImagery: jsonInfo.percentBadImagery,
+          organisationName: jsonInfo.organisationName,
         };
       });
 
@@ -88,48 +86,88 @@ export function CurrentProjects({ currentProjects }) {
           pagination={pagination}
           modules={[Pagination]}
           swipeHandler={{ draggable: false }}
+          className="shadow-4"
           style={{
             backgroundColor: 'white',
             width: '100%',
             borderColor: 'gray',
-            borderRadius: 5,
-            height: 500,
-            border: '1px solid',
           }}
         >
           {projectsData.map((project) => (
-            <SwiperSlide key={project.id}>
-              <TasksMap className="w-100 h-50 m2-l" mapResults={project.tasks} />
-              <div className="mv2-l mh2 flex justify-between items-center">
-                <h4>
-                  {project.id} - {project.info.name}
-                </h4>
-                <Link to={`/projects/` + project.id}>
-                  <Button className="bg-red ba b--red white pv2 ph3">
-                    <FormattedMessage {...messages.startMapping} />
-                  </Button>
-                </Link>
+            <SwiperSlide
+              key={project.id}
+              className="pa3"
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(5, minmax(0, 1fr))',
+                gap: '2rem',
+              }}
+            >
+              <div style={{ gridColumn: 'span 3' }}>
+                <HeaderLine
+                  author={project.author}
+                  projectId={project.id}
+                  priority={project.projectPriority}
+                  organisation={project.organisationName}
+                />
+                <div>
+                  <h3
+                    className="f2 fw5 mt3 mt2-ns mb3 ttu barlow-condensed blue-dark dib mr3"
+                    // lang={project.info.locale}
+                  >
+                    {project.info && project.info.name}
+                  </h3>
+                </div>
+                <section className="lh-title h5 overflow-y-auto mt3 mb3 flex flex-column">
+                  <div
+                    className="pr2 blue-dark-abbey markdown-content"
+                    dangerouslySetInnerHTML={{ __html: project.info.description }}
+                  />
+
+                  <a
+                    href="#description"
+                    className="link base-font bg-white f6 bn pn red pointer mt2"
+                  >
+                    <span className="pr2 ttu f6 fw6 ">
+                      <FormattedMessage {...messages.readMore} />
+                    </span>
+                  </a>
+
+                  <div style={{ marginTop: 'auto' }}>
+                    <ProjectProgressBar
+                      small={false}
+                      className="pb3 bg-white"
+                      percentMapped={project.percentMapped}
+                      percentValidated={project.percentValidated}
+                      percentBadImagery={project.percentBadImagery}
+                    />
+                  </div>
+                </section>
               </div>
-              <div className="mh3-l mv3-l">
-                <ProjectProgressBar
-                  percentMapped={project.percentMapped}
-                  percentValidated={project.percentValidated}
-                  percentBadImagery={project.percentBadImagery}
+              <div style={{ width: '100%', position: 'relative', gridColumn: 'span 2' }}>
+                <TasksMap
+                  className="w-100 h-100 m2-l"
+                  mapResults={project.tasks}
+                  style={{ height: '5rem' }}
                 />
-                <p>{text}</p>
                 <Link
                   to={`/projects/` + project.id}
-                  className="link base-font f6 mt3 bn pn red pointer"
+                  style={{ position: 'absolute', bottom: '1.5rem', right: '0.75rem' }}
                 >
-                  <span className="pr2 ttu f6 fw6">
-                    <FormattedMessage {...messages.readMore} />
-                  </span>
+                  <Button className="bg-red ba b--red white pv2 ph3">
+                    <FormattedMessage {...messages.startMapping} />
+                  </Button>
                 </Link>
               </div>
             </SwiperSlide>
           ))}
         </Swiper>
       )}
+
+      <div
+        className="swiper-custom-pagination mt2"
+        style={{ width: '100%', display: 'flex', justifyContent: 'center', gap: '0.5rem' }}
+      />
     </ReactPlaceholder>
   );
 }

frontend/src/components/partners/messages.js

@@ -55,7 +55,7 @@ export default defineMessages({
   },
   editsStats: {
     id: 'management.partners.filter.editsStats',
-    defaultMessage: 'Total Edits',
+    defaultMessage: 'Total map edits',
   },
   noPartnersGroup: {
     id: 'partners.group.zero',
@@ -67,7 +67,7 @@ export default defineMessages({
   },
   buildings: {
     id: 'management.partners.activity.buildings',
-    defaultMessage: 'Buildings Added',
+    defaultMessage: 'Buildings mapped',
   },
   roads: {
     id: 'management.partners.activity.roads',
@@ -84,7 +84,7 @@ export default defineMessages({
   learnToMap: {
     id: 'management.partners.learnToMap',
     defaultMessage: 'Learn to Map',
-  }, 
+  },
   myPartners: {
     id: 'management.filter.buttons.myPartners',
     defaultMessage: 'My Partners',
@@ -109,7 +109,7 @@ export default defineMessages({
     id: 'management.partners.titles.partner_information',
     defaultMessage: 'Partner information',
   },
-  permalink:{
+  permalink: {
     id: 'management.partners.titles.partner_permalink',
     defaultMessage: 'Permalink',
   },

frontend/src/components/partners/partnersActivity.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { OHSOME_STATS_BASE_URL } from '../../config';
 import { FormattedMessage } from 'react-intl';
-
 import ReactPlaceholder from 'react-placeholder';
+
 import PartnersProgresBar from './partnersProgresBar';
 import messages from './messages';
+import { OHSOME_STATS_BASE_URL } from '../../config';
 
 export const Activity = ({ partner }) => {
   const [data, setData] = useState(null);
@@ -49,7 +49,7 @@ export const Activity = ({ partner }) => {
           }
 
           groupedData[secondary].push({
-            primary: primary,
+            primary,
             secondary: typeof value === 'string' ? parseFloat(value) : value,
           });
         }
@@ -69,10 +69,12 @@ export const Activity = ({ partner }) => {
   }
 
   useEffect(() => {
+    if (!partner.id) return;
     fetchData();
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [partner]);
+
   return (
     <ReactPlaceholder showLoadingAnimation={true} rows={26} ready={data} className="pv3  ph4-ns ">
       <div className="graphics-container">
@@ -83,33 +85,34 @@ export const Activity = ({ partner }) => {
               0,
             );
             return (
-              <div key={series.label} className="pv3-l pv2 mb3-l pr4 pl4 mb2 shadow-4 bg-white">
-                <h3>
-                  <FormattedMessage {...messages[series.label]} />
-                </h3>
-                <div style={{ maxHeight: 400, overflowY: 'scroll', overflowX: 'hidden' }}>
+              <div key={series.label} className="pa3 shadow-4 bg-white">
+                <div
+                  className="flex space-between"
+                  style={{
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    borderBottom: '1px solid grey',
+                  }}
+                >
+                  <p>Team</p>
+                  <h3 className="f3 fw6 ttu barlow-condensed blue-dark mv1">
+                    <FormattedMessage {...messages[series.label]} />
+                  </h3>
+                </div>
+                <div
+                  className="flex flex-column"
+                  style={{
+                    maxHeight: '380px',
+                    overflowY: 'auto',
+                    overflowX: 'hidden',
+                    gap: '1rem',
+                    marginTop: '1rem',
+                  }}
+                >
                   {series.data.map((dataItem) => (
                     <div key={dataItem.primary}>
                       <div className="blue-grey">
-                        {dataItem ? (
-                          <div
-                            style={{ display: 'flex', justifyContent: 'space-between', height: 32 }}
-                          >
-                            <a
-                              target={'_blank'}
-                              rel="noreferrer"
-                              style={{ textDecoration: 'none', color: 'black', marginTop: 15 }}
-                              href={
-                                OHSOME_STATS_BASE_URL + '/dashboard#hashtags=' + dataItem.primary
-                              }
-                            >
-                              {'#' + dataItem.primary}{' '}
-                            </a>
-                            <p>{dataItem.secondary}</p>
-                          </div>
-                        ) : (
-                          <FormattedMessage {...messages.noPartnersGroup} />
-                        )}
+                        {dataItem ? <></> : <FormattedMessage {...messages.noPartnersGroup} />}
                       </div>
                       <div key={dataItem.primary}>
                         <PartnersProgresBar
@@ -118,6 +121,7 @@ export const Activity = ({ partner }) => {
                           label={series.label}
                           value={dataItem.secondary}
                           percentValidated={(dataItem.secondary * 100) / maxValue}
+                          data={dataItem}
                         />
                       </div>
                     </div>