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: [