Skip to content

Commit

Permalink
Merge pull request #6562 from hotosm/style/6513-redesign-leaderboard-…
Browse files Browse the repository at this point in the history
…stats-banner

Redesign Leaderboard Stats Banner
  • Loading branch information
ramyaragupathy authored Sep 18, 2024
2 parents 525a972 + bd217ee commit 62a4e36
Show file tree
Hide file tree
Showing 10 changed files with 251 additions and 93 deletions.
16 changes: 16 additions & 0 deletions frontend/src/assets/styles/_extra.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 10 additions & 1 deletion frontend/src/components/button.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand Down
45 changes: 45 additions & 0 deletions frontend/src/components/partners/customDropdown.js
Original file line number Diff line number Diff line change
@@ -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>
);
};
33 changes: 33 additions & 0 deletions frontend/src/components/partners/leaderboard.js
Original file line number Diff line number Diff line change
@@ -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>
);
};
2 changes: 1 addition & 1 deletion frontend/src/components/partners/partners.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
34 changes: 20 additions & 14 deletions frontend/src/components/partners/partnersResources.js
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -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}
/>
);
};

Expand Down
36 changes: 34 additions & 2 deletions frontend/src/components/partners/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
2 changes: 1 addition & 1 deletion frontend/src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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" */
Expand Down
Loading

0 comments on commit 62a4e36

Please sign in to comment.