Merge pull request #6562 from hotosm/style/6513-redesign-leaderboard-…

…stats-banner Redesign Leaderboard Stats Banner
hotosm · Sep 18, 2024 · 62a4e36 · 62a4e36
2 parents 525a972 + bd217ee
commit 62a4e36
Show file tree

Hide file tree

Showing 10 changed files with 251 additions and 93 deletions.
diff --git a/frontend/src/assets/styles/_extra.scss b/frontend/src/assets/styles/_extra.scss
@@ -611,10 +611,26 @@ a[href="https://www.mapbox.com/map-feedback/"]
   color: rgba($blue-dark, 0.9);
 }
 
+.gap-0\.625 {
+  gap: 0.75rem;
+}
+
+.gap-0\.75 {
+  gap: 0.75rem;
+}
+
 .gap-1 {
   gap: 1rem;
 }
 
+.gap-1\.25 {
+  gap: 1.25rem;
+}
+
+.gap-1\.5 {
+  gap: 1.5rem;
+}
+
 // Imported from HOTOSM site to use for long texts
 .blue-dark-abbey {
   color: #4c4f56;

diff --git a/frontend/src/components/button.js b/frontend/src/components/button.js
@@ -10,7 +10,15 @@ export const AnimatedLoadingIcon = () => (
   </IconSpace>
 );
 
-export function Button({ onClick, children, icon, className, disabled, loading = false }: Object) {
+export function Button({
+  onClick,
+  children,
+  icon,
+  className,
+  disabled,
+  loading = false,
+  ...otherProps
+}: Object) {
   return (
     <button
       onClick={onClick}
@@ -19,6 +27,7 @@ export function Button({ onClick, children, icon, className, disabled, loading =
       className={`${className || ''} br1 f5 bn ${disabled || loading ? 'o-50' : 'pointer'}`}
       style={{ padding: '.75rem 1.5rem' }}
       disabled={disabled || loading}
+      {...otherProps}
     >
       {loading ? <AnimatedLoadingIcon /> : icon && <IconSpace>{icon}</IconSpace>}
       {children}

diff --git a/frontend/src/components/partners/customDropdown.js b/frontend/src/components/partners/customDropdown.js
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+
+import { Button } from '../button';
+import { ChevronDownIcon } from '../svgIcons/chevron-down';
+import { ChevronUpIcon } from '../svgIcons/chevron-up';
+
+export const CustomDropdown = ({ title, data, buttonClassname }) => {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <div className="relative">
+      {/* dropdown select */}
+      <Button
+        className={`white br1 f5 fw5 bn flex items-center ${buttonClassname}`}
+        onClick={() => setIsActive(!isActive)}
+        onBlur={() => setIsActive(false)}
+      >
+        {title}
+        {isActive ? (
+          <ChevronUpIcon className="ml2 partners-dropdown-icon" />
+        ) : (
+          <ChevronDownIcon className="ml2 partners-dropdown-icon" />
+        )}
+      </Button>
+
+      {/* dropdown list */}
+      {isActive && (
+        <ul className="absolute list bg-grey-dark white pv3 mt2 partners-custom-dropdown">
+          {data.map((option) => (
+            <li
+              key={option.label}
+              className="pointer partners-dropdown-list-item"
+              onMouseDown={() => {
+                option?.onClick(option);
+              }}
+              onKeyDown={() => {}}
+            >
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/components/partners/leaderboard.js b/frontend/src/components/partners/leaderboard.js
@@ -0,0 +1,33 @@
+import { FormattedMessage } from 'react-intl';
+import messages from '../../views/messages';
+
+import { StatsSection } from './partnersStats';
+import { Activity } from './partnersActivity';
+import { CurrentProjects } from './currentProjects';
+
+export const Leaderboard = ({ partner, partnerStats }) => {
+  return (
+    <div className="pa4 bg-tan flex flex-column gap-1.25">
+      <div className="flex justify-between items-center">
+        <h3 className="f2 blue-dark fw7 ma0 barlow-condensed v-mid dib">
+          {partner.primary_hashtag
+            ?.split(',')
+            ?.map((str) => `#${str}`)
+            ?.join(', ')}
+        </h3>
+      </div>
+
+      <StatsSection partner={partnerStats} />
+
+      <CurrentProjects currentProjects={partner.current_projects} />
+
+      {/* activity section */}
+      <div className="w-100 fl cf">
+        <h3 className="f2 fw6 ttu barlow-condensed blue-dark mt0 pt2 mb3">
+          <FormattedMessage {...messages.activity} />
+        </h3>
+        <Activity partner={partner} />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/partners/partners.js b/frontend/src/components/partners/partners.js
@@ -95,7 +95,7 @@ export function PartnersCard({ details }) {
             <FormattedMessage {...messages.edit} />
           </CustomButton>
         </Link>
-        <Link to={`/partners/${details.permalink}/stats/`}>
+        <Link to={`/partners/${details.permalink}/stats/leaderboard`}>
           <CustomButton
             style={{ backgroundColor: '#e2e2e2' }}
             className="blue-dark ba b--grey-light pa2 br1 f5 pointer"

diff --git a/frontend/src/components/partners/partnersResources.js b/frontend/src/components/partners/partnersResources.js
@@ -1,4 +1,7 @@
-import { CustomButton } from '../button';
+import { FormattedMessage } from 'react-intl';
+
+import { CustomDropdown } from './customDropdown';
+import messages from '../../views/messages';
 
 export const Resources = ({ partner }) => {
   const renderWebsiteLinks = () => {
@@ -11,20 +14,23 @@ export const Resources = ({ partner }) => {
       name: partner[nameKey],
       url: partner[urlKeys[index]],
     }));
+
+    const resourcesData = websiteLinks.map((link) => ({
+      ...link,
+      label: link.name,
+      onClick: (item) => {
+        window.open(item.url, '_blank');
+      },
+    }));
+
+    if (!resourcesData.length) return <></>;
+
     return (
-      <div className="">
-        {websiteLinks.map((link, index) => (
-          <a
-            key={index}
-            href={link.url}
-            target="_blank"
-            rel="noreferrer"
-            className="link ttu di-l dib center m1"
-          >
-            <CustomButton className="ba b--red red pa2 mv2 mh2 w4">{link.name}</CustomButton>
-          </a>
-        ))}
-      </div>
+      <CustomDropdown
+        buttonClassname="bg-transparent partners-banner-button"
+        title={<FormattedMessage {...messages.resources} />}
+        data={resourcesData}
+      />
     );
   };
 

diff --git a/frontend/src/components/partners/styles.scss b/frontend/src/components/partners/styles.scss
@@ -23,6 +23,38 @@
 }
 
 .partners-social-icon {
-  height: 24px;
-  width: 24px;
+  height: 20px;
+  width: 20px;
+}
+
+.partners-banner-button {
+  padding: 0.75rem 0 !important;
+}
+
+.partners-banner-logo {
+  margin: 2.25rem 0 1.75rem 0;
+}
+
+.partners-custom-dropdown {
+  width: 17rem;
+  right: 0;
+  padding: 0.5rem 0;
+  z-index: 111;
+}
+
+.partners-dropdown-icon {
+  width: 12px;
+}
+
+.partners-tab-item {
+  border-radius: 3px 3px 0px 0px;
+  padding: 0.625rem 1.375rem;
+  font-weight: 500;
+}
+
+.partners-dropdown-list-item {
+  padding: 0.75rem 2rem;
+  &:hover {
+    background-color: #4e5157;
+  }
 }
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -1173,7 +1173,7 @@
   "management.partner.edit.error": "Partner name already exists",
   "management.partner.learnToMap": "Learn to Map",
   "management.partner.currentProjects": "Current Projects",
-  "management.partner.newToMapping": "¿New to Mapping?",
+  "management.partner.newToMapping": "New to Mapping?",
   "management.partner.activity": "Activity",
   "management.partner.resources": "Resources",
   "management.entity.creation.success": "{entity, select, organization {Organization} partner {Partner} license {License} project {Project} category {Category} campaign {Campaign} team {Team} other {}} created successfully",

diff --git a/frontend/src/routes.js b/frontend/src/routes.js
@@ -113,7 +113,7 @@ export const router = createBrowserRouter(
         }}
       />
       <Route
-        path="partners/:id/stats/"
+        path="partners/:id/stats/:tabname?"
         lazy={async () => {
           const { PartnersStats } = await import(
             './views/partnersStats' /* webpackChunkName: "partnersStats" */