aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-07 16:34:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: project grid layout

Browse Source
This commit is contained in:
MTG2000
2022-09-07 10:17:39 +03:00
parent b449d11eb4
commit 5cd6b12951
2 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/features/Tournaments/pages/ProjectsPage/ProjectCard/ProjectCard.tsx
View File

@@ -29,21 +29,22 @@ export default function ProjectCard({ project }: Props) {
}
return (
<Card>
<Card className="flex flex-col gap-24">
<div className="flex flex-wrap gap-24 items-start">
<img src={project.thumbnail_image} className='shrink-0 w-64 md:w-80 aspect-square rounded-full outline outline-2 outline-gray-200' alt="" />
<img src={project.thumbnail_image} className='shrink-0 w-64 aspect-square rounded-full outline outline-2 outline-gray-200' alt="" />
<div className="flex flex-col gap-4 flex-1 overflow-hidden">
<p className="text-body2 text-gray-900 font-bold">{project.title}</p>
<p className="text-body4 text-gray-600 font-medium">{project.category.icon} {project.category.title}</p>
</div>
</div>
<p className="mt-24 text-body5 text-gray-400 line-clamp-2 max-w-[60ch]">{project.description} </p>
<div className="mt-24">
<p className="text-body5 text-gray-900 font-medium mb-12">👾 Makers</p>
<FaUsers className='text-body2 mr-4' /> <span className='align-middle'>6 makers</span>
<p className=" text-body5 text-gray-400 line-clamp-2 max-w-[60ch]">{project.description} </p>
<div className="mt-auto">
{/* <p className="text-body5 text-gray-900 font-medium mb-12">👾 Makers</p> */}
<p className="text-body5 text-gray-600 font-medium">
<FaUsers className='text-body2 mr-4' /> <span className='align-middle'>6 makers</span>
</p>
</div>
<Button fullWidth color='primary' onClick={openProject} size='sm' className='mt-24'>View Details</Button>
<Button fullWidth color='primary' onClick={openProject} className=''>View Details</Button>
</Card>
)
}

4
src/features/Tournaments/pages/ProjectsPage/ProjectsPage.tsx
View File

@@ -39,7 +39,7 @@ export default function ProjectsPage({ data: { id } }: Props) {
return (
<div className='pb-42 flex flex-col gap-24'>
<h2 className='text-body1 font-bolder text-gray-900 mb-24'>Projects {projectsCount && `(${projectsCount})`}</h2>
<h2 className='text-body1 font-bolder text-gray-900'>Projects {projectsCount && `(${projectsCount})`}</h2>
<div className="input-wrapper relative">
<FiSearch className="self-center ml-16 flex-shrink-0 w-[20px] text-gray-400" />
@@ -51,7 +51,7 @@ export default function ProjectsPage({ data: { id } }: Props) {
onChange={e => changeSearchFilter(e.target.value)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 lg:gap-24">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-16 lg:gap-24">
{query.loading ?
Array(9).fill(0).map((_, idx) => <ProjectCardSkeleton key={idx} />)
: