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

update: QA improvements & fixes

Browse Source
This commit is contained in:
MTG2000
2022-10-03 18:00:49 +03:00
parent 01be1d8287
commit 4981fdd35b
7 changed files with 38 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/Profiles/pages/ProfilePage/StoriesCard/StoriesCard.tsx
View File

@@ -52,7 +52,7 @@ export default function StoriesCard({ stories, isOwner, onlyMd }: Props) {
</ul>}
{stories.length === 0 &&
<div className="flex flex-col gap-16 mt-24">
<p className="text-body3 text-gray-500 font-medium">
<p className="text-body4 text-gray-600">
😐 No Stories Added Yet
</p>
{/* <p className="text-body5 text-gray-500">

13
src/features/Projects/pages/ProjectPage/Components/AboutCard/AboutCard.tsx
View File

@@ -10,6 +10,7 @@ import { setVoteAmount } from 'src/redux/features/vote.slice'
import { numberFormatter } from 'src/utils/helperFunctions'
import { useAppDispatch } from 'src/utils/hooks'
import { createRoute } from 'src/utils/routing'
import LinksCard from '../LinksCard/LinksCard'
interface Props {
project: Pick<ProjectDetailsQuery['getProject'],
@@ -25,6 +26,12 @@ interface Props {
| "tagline"
| "website"
| "votes_count"
| 'discord'
| 'website'
| 'github'
| 'twitter'
| 'slack'
| 'telegram'
>
}
@@ -52,7 +59,7 @@ export default function AboutCard({ project }: Props) {
return (
<Card defaultPadding={false} onlyMd>
{/* Cover Image */}
<div className="relative rounded-t-12 md:rounded-t-16 h-[120px] lg:h-[160px]">
<div className="hidden md:block relative rounded-t-12 md:rounded-t-16 h-[120px] lg:h-[160px]">
<img className="w-full h-full object-cover rounded-12 md:rounded-0 md:rounded-t-16" src={project.cover_image} alt="" />
<div className="absolute top-16 md:top-24 left-24 flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
{project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
@@ -82,7 +89,9 @@ export default function AboutCard({ project }: Props) {
<MdLocalFireDepartment />{<span className="align-middle w-[4ch]"> {numberFormatter(project.votes_count)}</span>}
</Button>
</div>
<div className="md:hidden">
<LinksCard links={project} />
</div>
{/* About */}
<div>

2
src/features/Projects/pages/ProjectPage/Components/CapabilitiesCard/CapabilitiesCard.tsx
View File

@@ -17,7 +17,7 @@ export default function CapabilitiesCard({ capabilities }: Props) {
{capabilities.length === 0 && <>
<p className="text-gray-700 text-body4">No capabilities added</p>
</>}
<div className="flex flex-wrap gap-16">
<div className="flex flex-wrap gap-8 md:gap-16">
{capabilities.map(cap => <Badge key={cap.id} size='sm'>{cap.icon} {cap.title}</Badge>)}
</div>
</div>

2
src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx
View File

@@ -40,7 +40,7 @@ export default function MakersCard({ members, recruit_roles }: Props) {
{recruit_roles.length === 0 && <>
<p className="text-gray-700 text-body4">No open roles for now</p>
</>}
<div className="flex flex-wrap gap-16">
<div className="flex flex-wrap gap-8">
{recruit_roles.map(role => <Badge key={role.id} size='sm'>{role.icon} {role.title}</Badge>)}
</div>
</div>

2
src/features/Projects/pages/ProjectPage/Components/SimilarProjectsCard/SimilarProjectsCard.tsx
View File

@@ -22,7 +22,7 @@ export default function SimilarProjectsCard({ id }: Props) {
<h3 className="text-body2 font-bolder">🚀 Similar projects</h3>
<ul className='flex flex-col'>
{query.data?.similarProjects.map(project => {
return <Link key={project.id} to={createRoute({ type: "project", tag: project.hashtag })} className="border-b py-16 last-of-type:border-b-0 last-of-type:pb-0">
return <Link key={project.id} to={createRoute({ type: "project", tag: project.hashtag })} className="md:border-b py-16 last-of-type:border-b-0 last-of-type:pb-0">
<li className="flex items-center gap-12">
<img className='w-48 aspect-square rounded-12 border border-gray-100' alt='' src={project.thumbnail_image} />
<div className='overflow-hidden'>

20
src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
View File

@@ -120,14 +120,16 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
{/* Cover Image */}
<div className="relative h-[120px] lg:h-[80px]">
<img className="w-full h-full object-cover" src={project.cover_image} alt="" />
<div className="absolute top-16 md:top-24 left-24 flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
{project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
{project.launch_status === ProjectLaunchStatusEnum.Wip && `🔧 WIP`}
</div>
<div className="absolute top-16 md:top-24 right-24 flex gap-8">
{project.permissions.includes(ProjectPermissionEnum.UpdateInfo) &&
<Link className="w-32 h-32 bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={() => props.onClose?.()} to={createRoute({ type: "edit-project", id: project.id })}><FiEdit2 /></Link>}
<button className="w-32 h-32 bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={closeModal}><IoMdClose className=' inline-block' /></button>
<div className="absolute w-full px-16 md:px-24 top-16 md:top-24 flex justify-between items-center">
<div className="flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
{project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
{project.launch_status === ProjectLaunchStatusEnum.Wip && `🔧 WIP`}
</div>
<div className="flex gap-8">
{project.permissions.includes(ProjectPermissionEnum.UpdateInfo) &&
<Link className="w-32 h-32 bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={() => props.onClose?.()} to={createRoute({ type: "edit-project", id: project.id })}><FiEdit2 /></Link>}
<button className="w-32 h-32 bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={closeModal}><IoMdClose className=' inline-block' /></button>
</div>
</div>
</div>
<div className="p-24 flex flex-col gap-24">
@@ -248,7 +250,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
</div>
</div>}
<Button color='gray' fullWidth href={createRoute({ type: "project", tag: project.hashtag })} onClick={props.onClose}>View Project Details</Button>
<Button color='white' fullWidth href={createRoute({ type: "project", tag: project.hashtag })} onClick={props.onClose}>View project details</Button>
{/* <div className="text-center">
<h3 className="text-body4 font-regular">Are you the creator of this project</h3>

15
src/features/Projects/pages/ProjectPage/ProjectPage.tsx
View File

@@ -1,7 +1,7 @@
import { useParams } from "react-router-dom"
import LoadingPage from "src/Components/LoadingPage/LoadingPage"
import NotFoundPage from "src/features/Shared/pages/NotFoundPage/NotFoundPage"
import { useProjectDetailsQuery } from "src/graphql"
import { ProjectLaunchStatusEnum, useProjectDetailsQuery } from "src/graphql"
import { Helmet } from 'react-helmet'
import { useAppDispatch, useMediaQuery } from 'src/utils/hooks';
import styles from './styles.module.scss'
@@ -60,6 +60,16 @@ export default function ProjectPage() {
}
<meta property="og:image" content={project.cover_image} />
</Helmet>
<div className="relative w-full md:hidden h-[120px]">
<img className="w-full h-full object-cover" src={project.cover_image} alt="" />
<div className="absolute top-16 md:top-24 left-24 flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
{project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
{project.launch_status === ProjectLaunchStatusEnum.Wip && `🔧 WIP`}
</div>
<div className="absolute left-24 bottom-0 translate-y-1/2 w-[108px] aspect-square">
<img className="w-full h-full border-2 border-white rounded-24" src={project.thumbnail_image} alt="" />
</div>
</div>
<div className={`page-container bg-white md:bg-inherit`}
>
<div className={` ${styles.grid}`}
@@ -84,13 +94,12 @@ export default function ProjectPage() {
<>
<main>
<AboutCard project={project} />
<LinksCard links={project} />
<CapabilitiesCard capabilities={project.capabilities} />
<hr className="bg-gray-100" />
<MakersCard members={project.members} recruit_roles={project.recruit_roles} />
<hr className="bg-gray-100" />
<TournamentsCard onlyMd tournaments={[]} />
<StoriesCard onlyMd stories={[]} />
<TournamentsCard onlyMd tournaments={[]} />
<SimilarProjectsCard id={project.id} />
</main>
</>