Redesign course page
This commit is contained in:
Ibitoye Rotimi Best
@@ -0,0 +1,75 @@
|
||||
<script>
|
||||
import marked from "marked";
|
||||
import Education16 from "carbon-icons-svelte/lib/Education16";
|
||||
import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
|
||||
import readme from "./readme.js";
|
||||
|
||||
// export let lectures = [
|
||||
// "Today",
|
||||
// "Yesterday",
|
||||
// "April 24, 2021",
|
||||
// "April 17, 2021",
|
||||
// "March 25, 2021",
|
||||
// ];
|
||||
</script>
|
||||
|
||||
<div class="course">
|
||||
{@html marked(readme, {
|
||||
breaks: true,
|
||||
gfm: true,
|
||||
})}
|
||||
<!-- {#each lectures as lecture, key}
|
||||
<p class="lesson-date">{lecture}</p>
|
||||
<div class="lecture">
|
||||
<h4 class="lecture-title text-blue-700">
|
||||
<a rel="prefetch" href="courses/1">Lecture {lectures.length - key}</a>
|
||||
</h4>
|
||||
<p>
|
||||
Here is some description about the course that you should know. It will
|
||||
begin on the first and end on the second of the next month.
|
||||
</p>
|
||||
<div class="flex mt-3 mb-2">
|
||||
<span class="flex mr-2"
|
||||
><Education16 class="mr-2" />
|
||||
5</span
|
||||
>
|
||||
<span class="flex"
|
||||
><Catalog16 class="mr-2" />
|
||||
20</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/each} -->
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* .lesson-date {
|
||||
margin: 10px 10px 5px;
|
||||
color: #171717;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
} */
|
||||
.course {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
/* .lecture {
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.lecture-title {
|
||||
width: fit-content;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #586069;
|
||||
font-size: 12px;
|
||||
width: 40px;
|
||||
} */
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<script>
|
||||
import { stores } from "@sapper/app";
|
||||
import Expandable from "../../Expandable/index.svelte";
|
||||
import PageNav from "../../PageNav/index.svelte";
|
||||
// export let lectureId;
|
||||
const { page } = stores();
|
||||
|
||||
function handleLecturesClick(goTo) {
|
||||
return () => {
|
||||
console.log("goto", goTo);
|
||||
};
|
||||
}
|
||||
|
||||
const lectures = [
|
||||
{
|
||||
title: "Lecture 1",
|
||||
link: "/courses/1/lecture/1",
|
||||
},
|
||||
{
|
||||
title: "Lecture 2",
|
||||
link: "/courses/1/lecture/2",
|
||||
},
|
||||
{
|
||||
title: "Lecture 3",
|
||||
link: "/courses/1/lecture/3",
|
||||
},
|
||||
{
|
||||
title: "Lecture 4",
|
||||
link: "/courses/1/lecture/4",
|
||||
},
|
||||
{
|
||||
title: "Lecture 5",
|
||||
link: "/courses/1/lecture/5",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<PageNav title="React.JS" />
|
||||
<div>
|
||||
<Expandable
|
||||
label="Lectures"
|
||||
handleClick={handleLecturesClick("/courses/1/lecture/1")}
|
||||
>
|
||||
{#each lectures as lecture}
|
||||
<a
|
||||
class="{(lecture.link === $page.path || !$page.path.length > 3) &&
|
||||
'active'} pl-4 py-2"
|
||||
href={lecture.link}
|
||||
>
|
||||
# <span>{lecture.title}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</Expandable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 250px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
border-right: 1px solid var(--border-color);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #cae2f9;
|
||||
border-left: 3px solid var(--main-primary-color);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
export default `
|
||||
<p align="center">
|
||||
<a href="https://nextjs.org">
|
||||
<img src="https://assets.vercel.com/image/upload/v1607554385/repositories/next-js/next-logo.png" height="128">
|
||||
<h1 align="center">React.js</h1>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Getting Started
|
||||
|
||||
Visit <a aria-label="next.js learn" href="https://nextjs.org/learn">https://nextjs.org/learn</a> to get started with Next.js.
|
||||
|
||||
## Documentation
|
||||
|
||||
Visit [https://nextjs.org/docs](https://nextjs.org/docs) to view the full documentation.
|
||||
|
||||
## Who is using Next.js?
|
||||
|
||||
Next.js is used by the world's leading companies. Check out the [Next.js Showcase](https://nextjs.org/showcase) to learn more.
|
||||
|
||||
## Community
|
||||
|
||||
The Next.js community can be found on [GitHub Discussions](https://github.com/vercel/next.js/discussions), where you can ask questions, voice ideas, and share your projects.
|
||||
|
||||
To chat with other community members you can join the [Next.js Discord](https://nextjs.org/discord).
|
||||
|
||||
Our [Code of Conduct](https://github.com/vercel/next.js/blob/canary/CODE_OF_CONDUCT.md) applies to all Next.js community channels.
|
||||
|
||||
## Contributing
|
||||
|
||||
Please see our [contributing.md](/contributing.md).
|
||||
|
||||
## Authors
|
||||
|
||||
- Tim Neutkens ([@timneutkens](https://twitter.com/timneutkens)) – [Vercel](https://vercel.com/about/timneutkens)
|
||||
- Naoyuki Kanezawa ([@nkzawa](https://twitter.com/nkzawa)) – [Vercel](https://vercel.com/about/nkzawa)
|
||||
- Guillermo Rauch ([@rauchg](https://twitter.com/rauchg)) – [Vercel](https://vercel.com/about/rauchg)
|
||||
- Arunoda Susiripala ([@arunoda](https://twitter.com/arunoda))
|
||||
- Tony Kovanen ([@tonykovanen](https://twitter.com/tonykovanen))
|
||||
- Dan Zajdband ([@impronunciable](https://twitter.com/impronunciable))
|
||||
|
||||
`
|
||||
@@ -0,0 +1,70 @@
|
||||
<script>
|
||||
import Education16 from "carbon-icons-svelte/lib/Education16";
|
||||
import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
|
||||
import Chip from "../Chip/index.svelte";
|
||||
|
||||
export let courses = [
|
||||
{
|
||||
chipClassName: "bg-green-600 text-white",
|
||||
chipLabel: "In progress",
|
||||
},
|
||||
{
|
||||
chipClassName: "bg-red-600 text-white",
|
||||
chipLabel: "Completed",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="courses">
|
||||
{#each courses as courseData, index}
|
||||
<div class="course">
|
||||
<h4 class="course-title">
|
||||
<a rel="prefetch" href="courses/1"
|
||||
>QA Automation 0{courses.length - index}</a
|
||||
>
|
||||
<Chip
|
||||
value={courseData.chipLabel}
|
||||
className={courseData.chipClassName}
|
||||
/>
|
||||
</h4>
|
||||
<p>
|
||||
Here is some description about the course that you should know. It will
|
||||
begin on the first and end on the second of the next month.
|
||||
</p>
|
||||
<div class="flex mt-3 mb-2">
|
||||
<span class="flex mr-2"
|
||||
><Education16 class="mr-2" />
|
||||
5</span
|
||||
>
|
||||
<span class="flex"
|
||||
><Catalog16 class="mr-2" />
|
||||
20</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.courses {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.course {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 5px 0 10px;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
width: fit-content;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #586069;
|
||||
font-size: 12px;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user