Skip to content

Commit 78a3201

Browse files
codercatdevcodercatdev
authored
Merge pull request CodingCatDev#355 from CodingCatDev/fix/354-course-layout
fix issue 354
2 parents 8af33f1 + 22a2676 commit 78a3201

File tree

3 files changed

+101
-107
lines changed

3 files changed

+101
-107
lines changed

‎frontend/main/src/components/Course.tsx renamed to ‎frontend/main/src/layout/CourseLayout.tsx

Lines changed: 95 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function Course({
6060
</>
6161
)}
6262
<BreakBarLeft>
63-
<div className="grid w-full gap-4 ">
63+
<div className="grid w-full gap-4">
6464
<section className="grid items-center justify-between gap-2 lg:flex">
6565
<h1 className="font-sans text-5xl lg:flex-1 sm:text-4xl text-basics-50 dark:text-basics-50">
6666
{post.title}
@@ -134,121 +134,115 @@ export default function Course({
134134
</BreakBarLeft>
135135
</section>
136136
<div className="grid grid-cols-1 gap-4 px-4 pb-4 lg:px-10 lg:pb-10 lg:grid-cols-sidebar">
137-
<section>
137+
<section className="max-w-2xl flex flex-col gap-4">
138138
<PostMedia post={post} noImage={true} />
139-
<div className="mt-2">
139+
<div className="mt-2 flex flex-col gap-2">
140140
{source && <MDXRemote {...source} components={components} />}
141141
</div>
142-
</section>
143-
<section className="flex flex-col mb-2">
144142
{post._type === PostType.course && (
145-
<div className="">
146-
{post.coverPhoto?.public_id ? (
147-
<>
148-
<Image
149-
src={post.coverPhoto?.public_id}
150-
alt={post.title}
151-
width="480"
152-
height="270"
153-
layout="responsive"
154-
className="rounded-md rounded-b-none cursor-pointer"
155-
/>
156-
</>
157-
) : (
158-
<div className="relative" style={{ paddingBottom: '56.25%' }}>
159-
<div className="absolute flex items-center flex-auto w-full h-full rounded-t-md bg-primary-900 dark:bg-primary-900">
160-
<AJPrimary className="w-full h-full p-4" />
161-
</div>
162-
</div>
163-
)}
143+
<div>
164144
{signInCheckResult?.user ? (
165-
<div className="grid grid-cols-1 gap-2 p-4 justify-items-center">
166-
<CourseBuyButton
167-
product={product}
168-
user={signInCheckResult.user}
169-
post={post}
170-
/>
171-
</div>
145+
<CourseBuyButton
146+
product={product}
147+
user={signInCheckResult.user}
148+
post={post}
149+
/>
172150
) : (
173-
<div className="grid grid-cols-1 gap-2 p-4 justify-items-center">
174-
<Link href="/user/profile">
175-
<a className="border-none">
176-
<button className="btn-primary">Membership Login</button>
177-
</a>
178-
</Link>
179-
</div>
151+
<Link href="/user/profile">
152+
<a className="border-none">
153+
<button className="btn-primary">Membership Login</button>
154+
</a>
155+
</Link>
180156
)}
181157
</div>
182158
)}
183-
<section>
184-
<div className="flex items-center justify-between p-4 mb-2 bg-primary-900 dark:bg-primary-900 text-basics-50 dark:text-basics-50 rounded-t-md">
185-
<h2 className="text-xl">Course Content</h2>
186-
{/* Beginner/Intermediate/Advanced descriptor */}
187-
<p className="p-2 text-base rounded-full text-basics-50 dark:text-basics-50 bg-secondary-600 dark:bg-secondary-600">
188-
Beginner
189-
</p>
159+
</section>
160+
<section className="flex flex-col mb-2">
161+
{post.coverPhoto?.public_id ? (
162+
<>
163+
<Image
164+
src={post.coverPhoto?.public_id}
165+
alt={post.title}
166+
width="480"
167+
height="270"
168+
layout="responsive"
169+
className="rounded-md rounded-b-none cursor-pointer"
170+
/>
171+
</>
172+
) : (
173+
<div className="relative" style={{ paddingBottom: '56.25%' }}>
174+
<div className="absolute flex items-center flex-auto w-full h-full rounded-t-md bg-primary-900 dark:bg-primary-900">
175+
<AJPrimary className="w-full h-full p-4" />
176+
</div>
190177
</div>
191-
{/* LESSONS */}
192-
{post && post.sections && (
193-
<section className="grid content-start grid-cols-1 row-start-2 gap-4 2xl:col-start-2 2xl:row-start-1">
194-
{post.sections.map((section) => (
195-
<section
196-
key={section._key}
197-
className="flex flex-col rounded-t-md"
198-
>
199-
<div className="p-2 m-0 text-2xl font-bold xl:p-4 rounded-t-md xl:flex-shrink-0 bg-secondary-600 dark:bg-secondary-600 text-basics-50 dark:text-basics-50">
200-
{section.title}
201-
</div>
202-
<ul className="flex flex-col flex-grow rounded-b rounded-tr bg-basics-50 justify-items-stretch">
203-
{section.lessons &&
204-
section.lessons.map((lesson) => (
205-
<li key={lesson._id} className="ml-0 list-none">
206-
<Link
207-
href={`/course/${post.slug}/lesson/${lesson.slug}`}
208-
key={lesson._id}
209-
passHref
210-
>
211-
<div
212-
className={`p-2 cursor-pointer hover:bg-primary-200 rounded m-1 flex flex-wrap justify-between
178+
)}
179+
<div className="flex items-center justify-between p-4 mb-2 bg-primary-900 dark:bg-primary-900 text-basics-50 dark:text-basics-50 rounded-t-md">
180+
<h2 className="text-xl">Course Content</h2>
181+
{/* Beginner/Intermediate/Advanced descriptor */}
182+
<p className="p-2 text-base rounded-full text-basics-50 dark:text-basics-50 bg-secondary-600 dark:bg-secondary-600">
183+
Beginner
184+
</p>
185+
</div>
186+
{/* LESSONS */}
187+
{post && post.sections && (
188+
<section className="grid content-start grid-cols-1 row-start-2 gap-4 2xl:col-start-2 2xl:row-start-1">
189+
{post.sections.map((section) => (
190+
<section
191+
key={section._key}
192+
className="flex flex-col rounded-t-md"
193+
>
194+
<div className="p-2 m-0 text-2xl font-bold xl:p-4 rounded-t-md xl:flex-shrink-0 bg-secondary-600 dark:bg-secondary-600 text-basics-50 dark:text-basics-50">
195+
{section.title}
196+
</div>
197+
<ul className="flex flex-col flex-grow rounded-b rounded-tr bg-basics-50 justify-items-stretch">
198+
{section.lessons &&
199+
section.lessons.map((lesson) => (
200+
<li key={lesson._id} className="ml-0 list-none">
201+
<Link
202+
href={`/course/${post.slug}/lesson/${lesson.slug}`}
203+
key={lesson._id}
204+
passHref
205+
>
206+
<div
207+
className={`p-2 cursor-pointer hover:bg-primary-200 rounded m-1 flex flex-wrap justify-between
213208
${
214209
isActiveLink(post, lesson)
215210
? 'bg-primary-200'
216211
: 'bg-transparent'
217212
}
218213
`}
219-
>
220-
<a className="no-underline text-basics-900 hover:text-primary-900">
221-
{lesson.title}
222-
</a>
223-
{lesson?.accessSettings?.accessMode && (
224-
<div className="no-underline text-basics-900 hover:text-primary-900">
225-
{lesson?.accessSettings?.accessMode !=
226-
AccessMode.free && (
227-
<svg
228-
xmlns="http://www.w3.org/2000/svg"
229-
className="w-5 h-5"
230-
viewBox="0 0 20 20"
231-
fill="currentColor"
232-
>
233-
<path
234-
fillRule="evenodd"
235-
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
236-
clipRule="evenodd"
237-
/>
238-
</svg>
239-
)}
240-
</div>
241-
)}
242-
</div>
243-
</Link>
244-
</li>
245-
))}
246-
</ul>
247-
</section>
248-
))}
249-
</section>
250-
)}
251-
</section>
214+
>
215+
<a className="no-underline text-basics-900 hover:text-primary-900">
216+
{lesson.title}
217+
</a>
218+
{lesson?.accessSettings?.accessMode && (
219+
<div className="no-underline text-basics-900 hover:text-primary-900">
220+
{lesson?.accessSettings?.accessMode !=
221+
AccessMode.free && (
222+
<svg
223+
xmlns="http://www.w3.org/2000/svg"
224+
className="w-5 h-5"
225+
viewBox="0 0 20 20"
226+
fill="currentColor"
227+
>
228+
<path
229+
fillRule="evenodd"
230+
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
231+
clipRule="evenodd"
232+
/>
233+
</svg>
234+
)}
235+
</div>
236+
)}
237+
</div>
238+
</Link>
239+
</li>
240+
))}
241+
</ul>
242+
</section>
243+
))}
244+
</section>
245+
)}
252246
</section>
253247
</div>
254248
<style global jsx>{`
@@ -264,7 +258,7 @@ export default function Course({
264258
article > p + blockquote {
265259
margin: 1rem 0;
266260
}
267-
main a {
261+
main a > :not(button) {
268262
word-wrap: break-word;
269263
border-bottom: 2px solid #bc2261;
270264
}

‎frontend/main/src/components/PostLayout.tsx renamed to ‎frontend/main/src/layout/PostLayout.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import PostAdminButton from '@/components/PostAdminButton';
1717
import { useUser } from 'reactfire';
1818
import { components } from '@/components/code/MDXComponents';
1919
import { AccessMode } from '@/models/access.model';
20-
import MemberValidShow from './user/MemberValidShow';
21-
import MemberNotValidShow from './user/MemberNotValidShow';
22-
import PostMediaLocked from './PostMediaLocked';
20+
import MemberValidShow from '../components/user/MemberValidShow';
21+
import MemberNotValidShow from '../components/user/MemberNotValidShow';
22+
import PostMediaLocked from '../components/PostMediaLocked';
2323

2424
export default function PostLayout({
2525
post,

‎frontend/main/src/pages/[...permalink].tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { NextSeo } from 'next-seo';
44
import { Post, PostType } from '@/models/post.model';
55
import matter from 'gray-matter';
66
import { serialize } from 'next-mdx-remote/serialize';
7-
import PostLayout from '@/components/PostLayout';
8-
import Course from '@/components/Course';
7+
import PostLayout from '@/layout/PostLayout';
8+
import CourseLayout from '@/layout/CourseLayout';
99
import { Site } from '@/models/site.model';
1010
import AJLoading from '@/components/global/icons/AJLoading';
1111
import Layout from '@/layout/Layout';
@@ -289,7 +289,7 @@ export default function PostPage({
289289
<Layout site={site}>
290290
<>
291291
{post._type === PostType.course ? (
292-
<Course
292+
<CourseLayout
293293
post={post}
294294
source={source}
295295
product={product}

0 commit comments

Comments
 (0)