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

change: change some products page comps, fix more QA problems

Browse Source
This commit is contained in:
MTG2000
2022-05-30 14:38:34 +03:00
parent 8353a3b19f
commit a247685f5b
12 changed files with 71 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton.tsx
View File

@@ -3,12 +3,11 @@ import Skeleton from 'react-loading-skeleton'
export default function ProjectCardMiniSkeleton() {
return (
<div className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 items-center" >
<Skeleton width={80} height={80} containerClassName='flex-shrink-0' />
<div className="bg-gray-25 select-none px-16 py-16 flex min-w-[300px] gap-16 border border-gray-200 rounded-10 items-center" >
<Skeleton circle width={64} height={64} containerClassName='flex-shrink-0' />
<div className="justify-around items-start min-w-0">
<p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap"><Skeleton width="15ch" /></p>
<p className="text-body5 text-gray-600 font-light my-[5px]"><Skeleton width="10ch" /></p>
<span className="font-light text-body5"> <Skeleton width="5ch"></Skeleton> </span>
</div>
</div>
);

18
src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
View File

@@ -1,5 +1,8 @@
import { MdLocalFireDepartment } from "react-icons/md";
import VoteButton from "src/Components/VoteButton/VoteButton";
import { Vote_Item_Type } from "src/graphql";
import { numberFormatter } from "src/utils/helperFunctions";
import { useVote } from "src/utils/hooks";
import { ProjectCard } from "src/utils/interfaces";
@@ -9,20 +12,25 @@ interface Props {
}
export default function ProjectCardMini({ project, onClick }: Props) {
const { vote } = useVote({
itemId: project.id,
itemType: Vote_Item_Type.Project
});
return (
<div
className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border-2 border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100"
onClick={() => onClick(project.id)}
className="py-16 select-none px-16 flex items-center gap-16 border-2 border-gray-100 rounded-16 hover:cursor-pointer bg-white hover:bg-gray-250"
onKeyDown={e => e.key !== 'Enter' || onClick(project.id)}
tabIndex={0}
>
<img src={project.thumbnail_image} alt={project.title} draggable="false" className="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"></img>
<div className="justify-around items-start min-w-0">
<img src={project.thumbnail_image} alt={project.title} onClick={() => onClick(project.id)} draggable="false" className="flex-shrink-0 w-64 h-64 bg-gray-200 border-0 rounded-full"></img>
<div className="justify-around items-start min-w-0 flex-1" onClick={() => onClick(project.id)}>
<p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.title}</p>
<p className="text-body5 text-gray-600 font-light my-[5px]">{project.category.title}</p>
<span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {numberFormatter(project.votes_count)} </span>
{/* <span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {numberFormatter(project.votes_count)} </span> */}
</div>
<VoteButton votes={project.votes_count} direction='vertical' dense onVote={vote}></VoteButton>
</div>
);
}