diff --git a/packages/lib-user/src/components/shared/TopProjects/TopProjects.js b/packages/lib-user/src/components/shared/TopProjects/TopProjects.js
index 0a79a278d1..5c887b8c5e 100644
--- a/packages/lib-user/src/components/shared/TopProjects/TopProjects.js
+++ b/packages/lib-user/src/components/shared/TopProjects/TopProjects.js
@@ -1,22 +1,40 @@
import { Box, Grid, ResponsiveContext } from 'grommet'
import { arrayOf, bool, node, number, string, shape } from 'prop-types'
import { useContext } from 'react'
+import styled from 'styled-components'
import { Loader, ProjectCard } from '@zooniverse/react-components'
import { ContentBox } from '@components/shared'
+const StyledGridList = styled(Grid)`
+ list-style: none;
+ margin-block-end: 0;
+ margin-block-start: 0;
+ max-height: 420px;
+ overflow-x: none;
+ overflow-y: auto;
+ padding-inline-start: 0;
+`
+
+const StyledRowList = styled(Box)`
+ list-style: none;
+ margin-block-end: 0;
+ margin-block-start: 0;
+`
+
function CardsGrid({ children }) {
return (
-
{children}
-
+
)
}
@@ -26,16 +44,20 @@ CardsGrid.propTypes = {
function CardsRow({ children }) {
return (
-
{children}
-
+
)
}
@@ -64,7 +86,7 @@ function TopProjects({
return projectData
})
.filter(project => project)
- .slice(0, 6)
+ .slice(0, 20)
}
const Container = grid ? CardsGrid : CardsRow
diff --git a/packages/lib-user/src/components/shared/TopProjects/TopProjects.stories.js b/packages/lib-user/src/components/shared/TopProjects/TopProjects.stories.js
index babd99b7a6..b33595ab4d 100644
--- a/packages/lib-user/src/components/shared/TopProjects/TopProjects.stories.js
+++ b/packages/lib-user/src/components/shared/TopProjects/TopProjects.stories.js
@@ -18,8 +18,8 @@ function ComponentDecorator (Story) {
dark: 'dark-3',
light: 'neutral-6'
}}
- height='900px'
pad='30px'
+ width={{ max: '700px' }}
>
diff --git a/packages/lib-user/test/mocks/panoptes/projects.js b/packages/lib-user/test/mocks/panoptes/projects.js
index da3688fec4..0655af4df2 100644
--- a/packages/lib-user/test/mocks/panoptes/projects.js
+++ b/packages/lib-user/test/mocks/panoptes/projects.js
@@ -33,5 +33,110 @@ export const PROJECTS = [
display_name: 'Wildwatch Kenya is a short project name compared to the longest live project at 80',
id: '5',
slug: 'sandiegozooglobal/wildwatch-kenya'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/9f013988-ec58-4bf1-a207-b6b832b5c6d8.jpeg',
+ description: 'Help us track the movements of the endangered North Atlantic right whale.',
+ display_name: 'Right Whale Project',
+ id: '6',
+ slug: 'rightwhaleproject/right-whale-project'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/442e8392-6c46-4481-8ba3-11c6613fba56.jpeg',
+ description: 'Join us in the search for new exoplanets!',
+ display_name: 'Exoplanet Explorers',
+ id: '7',
+ slug: 'exoplanetexplorers/exoplanet-explorers'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/442e8392-6c46-4481-8ba3-11c6613fba56.jpeg',
+ description: 'Help us classify galaxies and learn about the universe!',
+ display_name: 'Galaxy Zoo',
+ id: '8',
+ slug: 'galaxyzoo/galaxy-zoo'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/546ce22c-f6b2-4fbb-a883-ab4157007659.png',
+ description: 'Join us in mapping the ocean floor!',
+ display_name: 'Ocean Floor Mapping',
+ id: '9',
+ slug: 'oceanfloor/mapping-the-ocean-floor'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/546ce22c-f6b2-4fbb-a883-ab4157007659.png',
+ description: 'Help us monitor the health of coral reefs.',
+ display_name: 'Coral Reef Watch',
+ id: '10',
+ slug: 'coralreefwatch/coral-reef-watch'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/9f013988-ec58-4bf1-a207-b6b832b5c6d8.jpeg',
+ description: 'Join us in the fight against plastic pollution!',
+ display_name: 'Plastic Pollution Tracker',
+ id: '11',
+ slug: 'plasticpollutiontracker/plastic-pollution-tracker'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/d93adaec-c45e-45c8-a88a-ad68bf90020b.jpeg',
+ description: 'Help us track the migration patterns of birds.',
+ display_name: 'Bird Migration Tracker',
+ id: '12',
+ slug: 'birdmigrationtracker/bird-migration-tracker'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/d93adaec-c45e-45c8-a88a-ad68bf90020b.jpeg',
+ description: 'Join us in the search for new species!',
+ display_name: 'Species Discovery Project',
+ id: '13',
+ slug: 'speciesdiscovery/species-discovery-project'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',
+ description: 'Help us understand the impact of climate change on wildlife.',
+ display_name: 'Climate Change Impact Study',
+ id: '14',
+ slug: 'climatechangeimpact/climate-change-impact-study'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',
+ description: 'Join us in restoring habitats for endangered species.',
+ display_name: 'Habitat Restoration Project',
+ id: '15',
+ slug: 'habitatrestoration/habitat-restoration-project'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/9f013988-ec58-4bf1-a207-b6b832b5c6d8.jpeg',
+ description: 'Help us study the effects of pollution on marine life.',
+ display_name: 'Marine Pollution Study',
+ id: '16',
+ slug: 'marinepollutionstudy/marine-pollution-study'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/5dc89775-a658-4d3a-8295-4d48903e142d.jpeg',
+ description: 'Join us in mapping biodiversity hotspots.',
+ display_name: 'Biodiversity Mapping Project',
+ id: '17',
+ slug: 'biodiversitymapping/biodiversity-mapping-project'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/5dc89775-a658-4d3a-8295-4d48903e142d.jpeg',
+ description: 'Help us track the health of ecosystems.',
+ display_name: 'Ecosystem Health Tracker',
+ id: '18',
+ slug: 'ecosystemhealthtracker/ecosystem-health-tracker'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',
+ description: 'Join us in the search for new medicinal plants.',
+ display_name: 'Medicinal Plant Discovery',
+ id: '19',
+ slug: 'medicinalplantdiscovery/medicinal-plant-discovery'
+ },
+ {
+ avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/442e8392-6c46-4481-8ba3-11c6613fba56.jpeg',
+ description: 'Help us understand the effects of urbanization on wildlife.',
+ display_name: 'Urban Wildlife Study',
+ id: '20',
+ slug: 'urbanwildlifestudy/urban-wildlife-study'
}
]
diff --git a/packages/lib-user/test/mocks/stats.mock.js b/packages/lib-user/test/mocks/stats.mock.js
index 39a66a6e27..fe3fcf90b1 100644
--- a/packages/lib-user/test/mocks/stats.mock.js
+++ b/packages/lib-user/test/mocks/stats.mock.js
@@ -112,24 +112,84 @@ const STATS = {
data: last7DaysFromNow,
project_contributions: [
{
- count: 123,
+ count: 2123,
project_id: 1
},
{
- count: 234,
+ count: 3234,
project_id: 2
},
{
- count: 345,
+ count: 2345,
project_id: 3
},
{
- count: 456,
+ count: 3456,
project_id: 4
},
{
- count: 567,
+ count: 2567,
project_id: 5
+ },
+ {
+ count: 3678,
+ project_id: 6
+ },
+ {
+ count: 2789,
+ project_id: 7
+ },
+ {
+ count: 3890,
+ project_id: 8
+ },
+ {
+ count: 2901,
+ project_id: 9
+ },
+ {
+ count: 1000,
+ project_id: 10
+ },
+ {
+ count: 1100,
+ project_id: 11
+ },
+ {
+ count: 1200,
+ project_id: 12
+ },
+ {
+ count: 1300,
+ project_id: 13
+ },
+ {
+ count: 1400,
+ project_id: 14
+ },
+ {
+ count: 1500,
+ project_id: 15
+ },
+ {
+ count: 1600,
+ project_id: 16
+ },
+ {
+ count: 1700,
+ project_id: 17
+ },
+ {
+ count: 1800,
+ project_id: 18
+ },
+ {
+ count: 1900,
+ project_id: 19
+ },
+ {
+ count: 2000,
+ project_id: 20
}
],
top_contributors: [