info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-30 12:40:03 +02:00
Code Issues Releases Wiki Activity

Responsiveness of course content

Browse Source
This commit is contained in:
Kamran Ahmed
2025-03-08 16:02:01 +00:00
parent b451d582fa
commit 0327ca74c4
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/GenerateCourse/AICourseModuleView.tsx
View File

@@ -193,7 +193,7 @@ export function AICourseModuleView(props: AICourseModuleViewProps) {
return ( return (
<div className="mx-auto max-w-4xl"> <div className="mx-auto max-w-4xl">
<div className="relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm"> <div className="relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm max-lg:pt-3 max-lg:px-4 max-lg:pb-4">
{(isGenerating || isLoading) && ( {(isGenerating || isLoading) && (
<div className="absolute right-3 top-3 flex items-center justify-center"> <div className="absolute right-3 top-3 flex items-center justify-center">
<Loader2Icon <Loader2Icon
@@ -214,7 +214,7 @@ export function AICourseModuleView(props: AICourseModuleViewProps) {
<button <button
disabled={isLoading || isTogglingDone} disabled={isLoading || isTogglingDone}
className={cn( className={cn(
'absolute right-3 top-3 flex items-center gap-1.5 rounded-full bg-black py-1 pl-2 pr-3 text-sm text-white hover:bg-gray-800 disabled:opacity-50', 'absolute right-3 top-3 flex items-center gap-1.5 rounded-full bg-black py-1 pl-2 pr-3 text-sm text-white hover:bg-gray-800 disabled:opacity-50 max-lg:text-xs',
isLessonDone isLessonDone
? 'bg-red-500 hover:bg-red-600' ? 'bg-red-500 hover:bg-red-600'
: 'bg-green-500 hover:bg-green-600', : 'bg-green-500 hover:bg-green-600',
@@ -250,13 +250,13 @@ export function AICourseModuleView(props: AICourseModuleViewProps) {
)} )}
</div> </div>
<h1 className="mb-6 text-3xl font-semibold"> <h1 className="mb-6 max-lg:mb-3 max-lg:text-xl text-balance text-3xl font-semibold">
{currentLessonTitle?.replace(/^Lesson\s*?\d+[\.:]\s*/, '')} {currentLessonTitle?.replace(/^Lesson\s*?\d+[\.:]\s*/, '')}
</h1> </h1>
{!error && isLoggedIn() && ( {!error && isLoggedIn() && (
<div <div
className="course-content prose prose-lg mt-8 max-w-full text-black prose-headings:mb-3 prose-headings:mt-8 prose-blockquote:font-normal prose-pre:rounded-2xl prose-pre:text-lg prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800" className="course-content max-lg:prose-pre:text-sm max-lg:prose-pre:px-3 max-lg:prose-h3:text-base max-lg:prose-h2:text-lg max-lg:prose-h2:mt-3 prose prose-lg max-lg:mt-4 max-lg:text-base mt-8 max-w-full text-black prose-headings:mb-3 prose-headings:mt-8 prose-blockquote:font-normal prose-pre:rounded-2xl prose-pre:text-lg prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800"
dangerouslySetInnerHTML={{ __html: lessonHtml }} dangerouslySetInnerHTML={{ __html: lessonHtml }}
/> />
)} )}