Skip to content

Commit

Permalink
Merge pull request #3118 from flacial/improve-lesson-page-readability-2
Browse files Browse the repository at this point in the history 
Improve the lesson page spacing and elements
  • Loading branch information
@flacial
flacial committed Jul 15, 2023
2 parents 98917a0 + e39b054 commit 6c5d4c1
Show file tree
Hide file tree
Showing 10 changed files with 158 additions and 124 deletions.
50 changes: 28 additions & 22 deletions __tests__/__snapshots__/storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31166,40 +31166,46 @@ exports[`Storyshots mdx/BlockQuote Quote 1`] = `

exports[`Storyshots mdx/ChallengeBar Standart 1`] = `
<div
className="d-flex justify-content-center my-3"
className="my-3 mt-5"
>
<div
className="card shadow-sm bg-primary text-white px-4 py-2 border-0"
className="d-flex flex-col flex-md-row gap-3 justify-content-between align-items-none align-items-md-center card shadow-sm bg-primary text-white p-4 border-0"
>
<h1
className="text-center fw-bold align-self-center"
>
Master your skill by solving challenges
</h1>
<a
className="text-white text-center noUnderline"
href="/docs/setup#submitting-challenges"
rel="noopener noreferrer"
target="_blank"
>
Submitting challenges
</a>
<p
className="px-2 m-0 text-center fw-bold"
>
Complete the first seven of JS0 challenges
</p>
<div>
<span
className="align-self-center fs-4"
>
Master your skill by solving challenges
</span>
<p
className="m-0"
>
Complete the first seven of JS0 challenges
</p>
</div>
<div
className="text-center"
className="d-flex flex-column gap-2"
>
<a
className="btn btn-light mt-2 text-primary noUnderline"
className="btn btn-light text-primary p-3 noUnderline"
href="/"
rel="noopener noreferrer"
target="_blank"
>
View Challenges
</a>
<a
className="MDX_a"
>
<a
className="text-white d-block noUnderline"
href="/docs/setup#submitting-challenges"
rel="noopener noreferrer"
target="_blank"
>
How to submit challenges?
</a>
</a>
</div>
</div>
</div>
Expand Down
92 changes: 50 additions & 42 deletions __tests__/pages/curriculum/[lessonSlug]/__snapshots__/[subLessonSlug].test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,59 +72,67 @@ exports[`[subLessonSlug] Page should match screenshot 1`] = `
</div>
</div>
<div
class="card shadow-sm d-block border-0 p-3 p-md-4 bg-white lesson-wrapper "
class="card shadow-sm d-flex flex-column gap-5 border-0 p-3 p-md-4 bg-white lesson-wrapper"
>
<nav
aria-label="Sub-lesson Links"
>
<a
aria-current="page"
class="subtitle link-dark dark d-block"
href="/curriculum/js0/first_sub_lesson"
<div>
<nav
aria-label="Sub-lesson Links"
>
Part 1: first sub lesson
</a>
<a
class="subtitle text-muted d-block"
href="/curriculum/js0/second_sub_lesson"
<a
aria-current="page"
class="subtitle link-dark dark d-block"
href="/curriculum/js0/first_sub_lesson"
>
Part 1: first sub lesson
</a>
<a
class="subtitle text-muted d-block"
href="/curriculum/js0/second_sub_lesson"
>
Part 2: second sub lesson
</a>
<a
class="subtitle text-muted d-block"
href="/curriculum/js0/third_sub_lesson"
>
Part 3: third sub lesson
</a>
</nav>
<h1
class="MDX_h1"
id="first"
>
Part 2: second sub lesson
</a>
<a
class="subtitle text-muted d-block"
href="/curriculum/js0/third_sub_lesson"
first
</h1>
<p
class="MDX_p"
>
Part 3: third sub lesson
</a>
</nav>
<h1
class="MDX_h1"
id="first"
>
first
</h1>
<p>
simple
</p>
<div
class="d-flex"
>
<a
class="lessonLink next"
href="/curriculum/js0/second_sub_lesson"
simple
</p>
<div
class="mt-5"
>
Next part:
<span>
second sub lesson
</span>
</a>
<div
class="d-flex"
>
<a
class="lessonLink next"
href="/curriculum/js0/second_sub_lesson"
>
Next part:
<span>
second sub lesson
</span>
</a>
</div>
</div>
</div>
<a
class="MDX_a edit"
href="https://github.com/garageScript/c0d3-app/edit/master/some/fake/path"
title="Edit this page on Github"
>
Edit this page
Edit this page on Github
</a>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion __tests__/pages/docs/__snapshots__/[docSlug].test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ exports[`[docSlug] Page should match screenshot 1`] = `
href="https://github.com/garageScript/c0d3-app/edit/master/some/fake/path"
title="Edit this page on Github"
>
Edit this page
Edit this page on Github
</a>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions components/EditPage/EditPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ const EditPage: React.FC<Props> = ({ filePath }) => {
<a
href={`https://github.com/garageScript/c0d3-app/edit/master/${filePath}`}
title="Edit this page on Github"
className={`${styles['MDX_a']} ${styles['edit']}`}
className={`${styles.MDX_a} ${styles.edit}`}
>
Edit this page
Edit this page on Github
</a>
)
}
Expand Down
32 changes: 18 additions & 14 deletions components/mdx/ChallengBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,36 @@
import React from 'react'
import NavLink from '../NavLink'
import MDXcomponents from '../../helpers/mdxComponents'

const ChallengeBar: React.FC<{
href: string
description: string
title: string
}> = ({ href, description, title }) => {
return (
<div className="d-flex justify-content-center my-3">
<div className="card shadow-sm bg-primary text-white px-4 py-2 border-0">
<h1 className="text-center fw-bold align-self-center">{title}</h1>
<NavLink
path="/docs/setup#submitting-challenges"
className="text-white text-center "
external
>
Submitting challenges
</NavLink>
<p className="px-2 m-0 text-center fw-bold">{description}</p>

<div className="text-center">
<div className="my-3 mt-5">
<div className="d-flex flex-col flex-md-row gap-3 justify-content-between align-items-none align-items-md-center card shadow-sm bg-primary text-white p-4 border-0">
<div>
<span className="align-self-center fs-4">{title}</span>
<p className="m-0">{description}</p>
</div>
<div className="d-flex flex-column gap-2">
<NavLink
path={href}
className={`btn btn-light mt-2 text-primary `}
className="btn btn-light text-primary p-3"
external
>
View Challenges
</NavLink>
<MDXcomponents.a>
<NavLink
path="/docs/setup#submitting-challenges"
className="text-white d-block"
external
>
How to submit challenges?
</NavLink>
</MDXcomponents.a>
</div>
</div>
</div>
Expand Down
43 changes: 25 additions & 18 deletions components/mdx/__snapshots__/ChallengeBar.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,35 @@
exports[`ChallengeBar component Should created redirect based on input 1`] = `
<div>
<div
class="d-flex justify-content-center my-3"
class="my-3 mt-5"
>
<div
class="card shadow-sm bg-primary text-white px-4 py-2 border-0"
class="d-flex flex-col flex-md-row gap-3 justify-content-between align-items-none align-items-md-center card shadow-sm bg-primary text-white p-4 border-0"
>
<h1
class="text-center fw-bold align-self-center"
/>
<a
class="text-white text-center noUnderline"
href="/docs/setup#submitting-challenges"
rel="noopener noreferrer"
target="_blank"
>
Submitting challenges
</a>
<p
class="px-2 m-0 text-center fw-bold"
/>
<div>
<span
class="align-self-center fs-4"
/>
<p
class="m-0"
/>
</div>
<div
class="text-center"
/>
class="d-flex flex-column gap-2"
>
<a
class="MDX_a"
>
<a
class="text-white d-block noUnderline"
href="/docs/setup#submitting-challenges"
rel="noopener noreferrer"
target="_blank"
>
How to submit challenges?
</a>
</a>
</div>
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions helpers/mdxComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const MDXcomponents = {
ul: (props: any) => <ul className={`${styles['MDX_ul']}`} {...props} />,
ol: (props: any) => <ol className={`${styles['MDX_ol']}`} {...props} />,
a: (props: any) => <a className={`${styles['MDX_a']}`} {...props} />,
p: (props: any) => <p className={`${styles['MDX_p']}`} {...props} />,
td: (props: any) => <td className={`${styles['MDX_td']}`} {...props} />,
th: (props: any) => <th className={`${styles['MDX_th']}`} {...props} />
}
Expand Down
46 changes: 26 additions & 20 deletions pages/curriculum/[lessonSlug]/[subLessonSlug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,30 +151,36 @@ const SubLessonPage: React.FC<Props> & WithLayout = ({
breakpoint={breakpoint}
/>
<div
className={`card shadow-sm d-block border-0 p-3 p-md-4 bg-white ${mdxStyles['lesson-wrapper']} `}
className={`card shadow-sm d-flex flex-column gap-5 border-0 p-3 p-md-4 bg-white ${mdxStyles['lesson-wrapper']}`}
>
<Title
title={`${selectedSubLesson.frontMatter.title} | ${lessonSlug} | C0D3`}
/>
<ScrollTopArrow />
{hasMultipleSubLessons && (
<SubLessonLinks
subLessons={subLessons}
lessonSlug={lessonSlug}
subLessonSlug={subLessonSlug}
<div>
<Title
title={`${selectedSubLesson.frontMatter.title} | ${lessonSlug} | C0D3`}
/>
)}

<MDXRemote {...selectedSubLesson.source!} components={MDXcomponents} />

{hasMultipleSubLessons && (
<NextPreviousLessons
subLessons={subLessons}
subLessonSlug={subLessonSlug}
lessonSlug={lessonSlug}
<ScrollTopArrow />
{hasMultipleSubLessons && (
<SubLessonLinks
subLessons={subLessons}
lessonSlug={lessonSlug}
subLessonSlug={subLessonSlug}
/>
)}

<MDXRemote
{...selectedSubLesson.source!}
components={MDXcomponents}
/>
)}

{hasMultipleSubLessons && (
<div className="mt-5">
<NextPreviousLessons
subLessons={subLessons}
subLessonSlug={subLessonSlug}
lessonSlug={lessonSlug}
/>
</div>
)}
</div>
<EditPage filePath={githubFilePath} />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion scss/_text.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ h2 {

h3 {
@include rubik-bold;
font-size: 18px;
font-size: 20px;
line-height: 160%;
}

Expand Down
Loading

1 comment on commit 6c5d4c1

@vercel
Copy link

@vercel vercel bot commented on 6c5d4c1 Jul 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

c0d3-app – ./

v2.c0d3.app
www.c0d3.com
c0d3-app-git-master-c0d3-prod.vercel.app
c0d3-app-c0d3-prod.vercel.app
c0d3-app.vercel.app

Please sign in to comment.