Skip to content

Commit 628e9e2

Browse files
author
Alex Patterson
authored
Merge pull request CodingCatDev#130 from CodingCatDev/feature/course-layout
completely overhauled the course page and fixed the alignment on the …
2 parents c3dea80 + b45fe4c commit 628e9e2

2 files changed

Lines changed: 297 additions & 223 deletions

File tree

‎frontend/main/src/components/PostsCards.tsx‎

Lines changed: 101 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -7,102 +7,111 @@ export default function PostsCards({ posts }: { posts: Post[] }): JSX.Element {
77
return (
88
<>
99
{posts && posts.length > 0 ? (
10-
<section className="relative grid gap-4 p-4 grid-cols-fit sm:gap-10 sm:p-10">
11-
{posts.map((post) => {
12-
return (
13-
<div
14-
className="grid transition-all transform rounded-md shadow-lg grid-rows-auto-2 hover:shadow-2xl hover:scale-105 bg-basics-50"
15-
key={post.id}
16-
>
17-
<Link href={`/${post.type}/${post.slug}`}>
18-
<a className="self-start">
19-
{post.coverPhoto?.path && post.type === 'course' ? (
20-
<>
21-
<Image
22-
src={post.coverPhoto?.path}
23-
alt={post.title}
24-
width="480"
25-
height="270"
26-
layout="responsive"
27-
className="rounded-md rounded-b-none cursor-pointer"
28-
/>
29-
</>
30-
) : post.coverPhoto?.path ? (
31-
<>
32-
<Image
33-
src={post.coverPhoto?.path}
34-
alt={post.title}
35-
width="480"
36-
height="270"
37-
layout="responsive"
38-
className="rounded-md rounded-b-none cursor-pointer"
39-
/>
40-
</>
41-
) : (
42-
<div
43-
className="relative"
44-
style={{ paddingBottom: '56.25%' }}
45-
>
46-
<div className="absolute flex items-center flex-auto w-full h-full rounded-t-md bg-primary-900 dark:bg-primary-900">
47-
<AJPrimary className="w-full h-full p-4" />
10+
<div className="p-4 sm:p-10">
11+
<h1 className="mb-4 text-5xl text-center lg:text-7xl">
12+
{posts[0].type.charAt(0).toUpperCase() + posts[0].type.slice(1)}s
13+
</h1>
14+
<section className="relative grid gap-4 grid-cols-fit sm:gap-10">
15+
{posts.map((post) => {
16+
return (
17+
<div
18+
className="grid transition-all transform rounded-md shadow-lg grid-rows-auto-2 hover:shadow-2xl hover:scale-105 bg-basics-50"
19+
key={post.id}
20+
>
21+
<Link href={`/${post.type}/${post.slug}`}>
22+
<a className="self-start">
23+
{post.coverPhoto?.path && post.type === 'course' ? (
24+
<>
25+
<Image
26+
src={post.coverPhoto?.path}
27+
alt={post.title}
28+
width="480"
29+
height="270"
30+
layout="responsive"
31+
className="rounded-md rounded-b-none cursor-pointer"
32+
/>
33+
</>
34+
) : post.coverPhoto?.path ? (
35+
<>
36+
<Image
37+
src={post.coverPhoto?.path}
38+
alt={post.title}
39+
width="480"
40+
height="270"
41+
layout="responsive"
42+
className="rounded-md rounded-b-none cursor-pointer"
43+
/>
44+
</>
45+
) : (
46+
<div
47+
className="relative"
48+
style={{ paddingBottom: '56.25%' }}
49+
>
50+
<div className="absolute flex items-center flex-auto w-full h-full rounded-t-md bg-primary-900 dark:bg-primary-900">
51+
<AJPrimary className="w-full h-full p-4" />
52+
</div>
53+
{post.type === 'course' ? (
54+
<p className="absolute px-4 py-2 rounded-full bg-secondary-600 dark:bg-secondary-600 -bottom-12 -right-8 text-basics-50 dark:text-basics-50">
55+
Start now
56+
</p>
57+
) : (
58+
<></>
59+
)}
4860
</div>
49-
{post.type === 'course' ? (
50-
<p className="absolute px-4 py-2 rounded-full bg-secondary-600 dark:bg-secondary-600 -bottom-12 -right-8 text-basics-50 dark:text-basics-50">
51-
Start now
52-
</p>
53-
) : (
54-
<></>
55-
)}
56-
</div>
57-
)}
58-
</a>
59-
</Link>
61+
)}
62+
</a>
63+
</Link>
6064

61-
<section className="grid h-full gap-2 p-4">
62-
<h3 className="font-sans text-lg tracking-wide text-basics-900 text-bold">
63-
<Link href={`/${post.type}/${post.slug}`}>
64-
<a>{post.title}</a>
65-
</Link>
66-
</h3>
67-
<p className="text-sm font-hairline text-basics-900">
68-
{post.excerpt}
69-
</p>
70-
<div>
71-
{post.authors?.map((author, i) => (
72-
<h4 key={i} className="font-sans text-lg">
73-
{author.displayName}
74-
</h4>
75-
))}
76-
</div>
77-
<div className="grid self-end justify-start grid-cols-2 gap-2 font-bold tracking-wider">
78-
{post.type === 'course' && (
79-
<>
80-
{post.accessSettings?.accessMode === 'closed' ? (
81-
<>
82-
<p className="px-4 py-2 text-sm rounded-full justify-self-start bg-primary-900 dark:bg-primary-900 text-basics-50 dark:text-basics-50">
83-
Paid
65+
<section className="grid h-full grid-cols-1 gap-2 p-4">
66+
<div className="space-y-2">
67+
<h3 className="font-sans text-lg tracking-wide text-basics-900 text-bold">
68+
<Link href={`/${post.type}/${post.slug}`}>
69+
<a>{post.title}</a>
70+
</Link>
71+
</h3>
72+
{post.excerpt && (
73+
<p className="text-sm font-hairline text-basics-900">
74+
{post.excerpt}
75+
</p>
76+
)}
77+
<div>
78+
{post.authors?.map((author, i) => (
79+
<h4 key={i} className="font-sans text-lg">
80+
{author.displayName}
81+
</h4>
82+
))}
83+
</div>
84+
</div>
85+
<div className="grid self-end justify-start grid-cols-2 gap-2 font-bold tracking-wider">
86+
{post.type === 'course' && (
87+
<>
88+
{post.accessSettings?.accessMode === 'closed' ? (
89+
<>
90+
<p className="px-4 py-2 text-sm rounded-full justify-self-start bg-primary-900 dark:bg-primary-900 text-basics-50 dark:text-basics-50">
91+
Paid
92+
</p>
93+
<p className="px-4 py-2 text-sm font-bold tracking-wider transform -skew-y-12 justify-self-end bg-secondary-600 dark:bg-secondary-600 text-basics-50 dark:text-basics-50">
94+
${post.accessSettings?.price}
95+
</p>
96+
</>
97+
) : post.accessSettings?.accessMode === 'free' ? (
98+
<p className="px-4 py-2 text-sm font-bold tracking-wider rounded-full justify-self-start bg-primary-50 dark:bg-primary-50 text-primary-900 dark:text-primary-900">
99+
Free
84100
</p>
85-
<p className="px-4 py-2 text-sm font-bold tracking-wider transform -skew-y-12 justify-self-end bg-secondary-600 dark:bg-secondary-600 text-basics-50 dark:text-basics-50">
86-
${post.accessSettings?.price}
101+
) : (
102+
<p className="px-4 py-2 text-sm font-bold tracking-wider rounded-full justify-self-start bg-secondary-600 dark:bg-secondary-600 text-basics-50 dark:text-basics-50">
103+
Start now
87104
</p>
88-
</>
89-
) : post.accessSettings?.accessMode === 'free' ? (
90-
<p className="px-4 py-2 text-sm font-bold tracking-wider rounded-full justify-self-start bg-primary-50 dark:bg-primary-50 text-primary-900 dark:text-primary-900">
91-
Free
92-
</p>
93-
) : (
94-
<p className="px-4 py-2 text-sm font-bold tracking-wider rounded-full justify-self-start bg-secondary-600 dark:bg-secondary-600 text-basics-50 dark:text-basics-50">
95-
Start now
96-
</p>
97-
)}
98-
</>
99-
)}
100-
</div>
101-
</section>
102-
</div>
103-
);
104-
})}
105-
</section>
105+
)}
106+
</>
107+
)}
108+
</div>
109+
</section>
110+
</div>
111+
);
112+
})}
113+
</section>
114+
</div>
106115
) : (
107116
<>
108117
<div className="p-4 pt-8">

0 commit comments

Comments
 (0)