Redesign course page
This commit is contained in:
Ibitoye Rotimi Best
+43
-34
@@ -1,30 +1,61 @@
|
||||
<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",
|
||||
];
|
||||
// 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 {
|
||||
/* .lesson-date {
|
||||
margin: 10px 10px 5px;
|
||||
color: #171717;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.class {
|
||||
} */
|
||||
.course {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.lecture {
|
||||
/* .lecture {
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
@@ -34,33 +65,11 @@
|
||||
.lecture-title {
|
||||
width: fit-content;
|
||||
font-size: 18px;
|
||||
/* color: var(--main-primary-color); */
|
||||
}
|
||||
|
||||
span {
|
||||
color: #586069;
|
||||
font-size: 12px;
|
||||
width: 40px;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
|
||||
<div class="class">
|
||||
{#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="classes/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>
|
||||
@@ -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))
|
||||
|
||||
`
|
||||
@@ -3,7 +3,7 @@
|
||||
import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
|
||||
import Chip from "../Chip/index.svelte";
|
||||
|
||||
export let classes = [
|
||||
export let courses = [
|
||||
{
|
||||
chipClassName: "bg-green-600 text-white",
|
||||
chipLabel: "In progress",
|
||||
@@ -15,19 +15,49 @@
|
||||
];
|
||||
</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>
|
||||
.classes {
|
||||
.courses {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.class {
|
||||
.course {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 5px 0 10px;
|
||||
}
|
||||
|
||||
.class-title {
|
||||
.course-title {
|
||||
width: fit-content;
|
||||
font-size: 18px;
|
||||
}
|
||||
@@ -38,24 +68,3 @@
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="classes">
|
||||
{#each classes as classData, index}
|
||||
<div class="class">
|
||||
<h4 class="class-title">
|
||||
<a rel="prefetch" href="classes/1">QA Automation 0{classes.length - index}</a>
|
||||
<Chip value={classData.chipLabel} className={classData.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>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script>
|
||||
import CaretSortDown20 from "carbon-icons-svelte/lib/CaretSortDown20";
|
||||
|
||||
let isExpanded = true;
|
||||
export let handleClick = () => {};
|
||||
export let label = "";
|
||||
|
||||
function onClick() {
|
||||
isExpanded = !isExpanded;
|
||||
handleClick();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="relative flex items-center"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:click={onClick}
|
||||
>
|
||||
<CaretSortDown20
|
||||
class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}"
|
||||
/>
|
||||
<span class="ml-6 mb-2 {isExpanded ? 'font-bold' : ''}">{label}</span>
|
||||
</div>
|
||||
{#if isExpanded}
|
||||
<div class="flex flex-col">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(svg.carbon-icon-sort) {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 0;
|
||||
}
|
||||
:global(svg.carbon-icon-minimize) {
|
||||
transform: rotate(270deg);
|
||||
top: 2px;
|
||||
left: -6px;
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,7 @@
|
||||
import NewQuestion from "../NewQuestion/index.svelte";
|
||||
import Forum32 from "carbon-icons-svelte/lib/Forum32";
|
||||
import SendAlt32 from "carbon-icons-svelte/lib/SendAlt32";
|
||||
import Catalog32 from "carbon-icons-svelte/lib/Catalog32";
|
||||
import UserAvatar32 from "carbon-icons-svelte/lib/UserAvatar32";
|
||||
import Calendar32 from "carbon-icons-svelte/lib/Calendar32";
|
||||
export let segment;
|
||||
@@ -11,7 +12,7 @@
|
||||
</script>
|
||||
|
||||
<nav class={navClass}>
|
||||
<ul class="flex items-start flex-col justify-evenly">
|
||||
<ul class="flex items-center flex-col justify-evenly">
|
||||
<div class="logo">
|
||||
<a href="/" title="Go to univapros Home" id="logo" data-hveid="8"
|
||||
><img
|
||||
@@ -26,9 +27,8 @@
|
||||
<li>
|
||||
<a
|
||||
class="block"
|
||||
aria-current={segment === "classes" ? "page" : undefined}
|
||||
href="classes"
|
||||
><Calendar32 class="carbon-icon" /> <span>Classes</span></a
|
||||
aria-current={segment === "courses" ? "page" : undefined}
|
||||
href="courses"><Catalog32 class="carbon-icon" /> <span>Courses</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
@@ -69,21 +69,23 @@
|
||||
<SendAlt32 class="carbon-icon" /> <span>Канал</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="new-question">
|
||||
<!-- <li class="new-question">
|
||||
<NewQuestion />
|
||||
</li>
|
||||
</li> -->
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
height: 100vh;
|
||||
height: 95vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 20%;
|
||||
width: fit-content;
|
||||
padding-top: 10px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
border-right: 1px solid var(--border-color);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -98,9 +100,9 @@
|
||||
clear: both;
|
||||
}
|
||||
|
||||
li.new-question {
|
||||
/* li.new-question {
|
||||
margin-top: 10px;
|
||||
}
|
||||
} */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
@@ -108,6 +110,7 @@
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:global(svg.carbon-icon) {
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
<script>
|
||||
export let title = "";
|
||||
export let navItems = [];
|
||||
let dynamicRootClass = "";
|
||||
|
||||
$: dynamicRootClass =
|
||||
Array.isArray(navItems) && navItems.length > 4 ? "bring-down" : "";
|
||||
</script>
|
||||
|
||||
<div class="header flex justify-between mb-2">
|
||||
<div class="header flex justify-between mb-2 {dynamicRootClass}">
|
||||
{#if !!title}
|
||||
<h4 class="title">{title}</h4>
|
||||
{/if}
|
||||
{#if Array.isArray(navItems) && navItems.length}
|
||||
<div class="flex justify-evenly items-center">
|
||||
{#each navItems as item}
|
||||
@@ -20,6 +26,10 @@
|
||||
.header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 15px;
|
||||
min-height: 61px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -48,6 +58,11 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header.bring-down {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1002px) {
|
||||
.header {
|
||||
flex-direction: column;
|
||||
|
||||
+13
-13
@@ -8,11 +8,23 @@
|
||||
export let segment;
|
||||
</script>
|
||||
|
||||
<Tailwindcss />
|
||||
|
||||
<!-- <Nav {segment} /> -->
|
||||
|
||||
<main class="flex">
|
||||
<LeftNav {segment} />
|
||||
<slot />
|
||||
<!-- <SideBar /> -->
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
main {
|
||||
background-color: white;
|
||||
/* padding: 15px 2em; */
|
||||
margin: 0 auto;
|
||||
/* margin: 0 auto; */
|
||||
box-sizing: border-box;
|
||||
/* max-width: 900px; */
|
||||
}
|
||||
@@ -25,15 +37,3 @@
|
||||
--border-color: #eaecef;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Tailwindcss />
|
||||
|
||||
<!-- <Nav {segment} /> -->
|
||||
|
||||
<main class="flex max-w-screen-xl">
|
||||
<LeftNav {segment} />
|
||||
<slot />
|
||||
<SideBar />
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
<script>
|
||||
import { stores } from "@sapper/app";
|
||||
import PageNav from "../../components/PageNav/index.svelte";
|
||||
import Class from "../../components/Classes/Class.svelte";
|
||||
|
||||
const { page } = stores();
|
||||
const path = $page.path;
|
||||
let tab = "";
|
||||
|
||||
$: tab = $page.query.tab || "lectures";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
min-width: 600px;
|
||||
margin: 0 auto;
|
||||
border-left: 1px solid var(--border-color);
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>QA Automation</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="root">
|
||||
<PageNav
|
||||
title="QA Automation"
|
||||
navItems={[{ label: 'Lectures', isActive: tab === 'lectures', href: `${path}?tab=lectures` }, { label: 'Class work', isActive: tab === 'classwork', href: `${path}?tab=classwork` }, { label: 'Hometasks', isActive: tab === 'hometasks', href: `${path}?tab=hometasks` }]} />
|
||||
<Class />
|
||||
</div>
|
||||
@@ -1,32 +0,0 @@
|
||||
<script>
|
||||
import { stores } from "@sapper/app";
|
||||
import PageNav from "../components/PageNav/index.svelte";
|
||||
import Class from "../components/Classes/Class.svelte";
|
||||
|
||||
const { page } = stores();
|
||||
let path = "";
|
||||
let discussions = [];
|
||||
|
||||
$: path = $page.path || "lectures";
|
||||
console.log($page.path);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
min-width: 600px;
|
||||
margin: 0 auto;
|
||||
border-left: 1px solid var(--border-color);
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>QA Automation</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="root">
|
||||
<PageNav
|
||||
title="QA Automation"
|
||||
navItems={[{ label: 'Lectures', isActive: path.includes('lectures'), href: `${path}lectures` }, { label: 'Class work', isActive: path.includes('classwork'), href: `${path}classwork` }, { label: 'Hometasks', isActive: path.includes('hometasks'), href: `${path}hometasks` }]} />
|
||||
<Class />
|
||||
</div>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import PageNav from "../components/PageNav/index.svelte";
|
||||
import Classes from "../components/Classes/index.svelte";
|
||||
import { stores } from "@sapper/app";
|
||||
import PageNav from "../components/PageNav/index.svelte";
|
||||
import Courses from "../components/Courses/index.svelte";
|
||||
|
||||
const { page } = stores();
|
||||
let tab = "";
|
||||
@@ -10,12 +10,12 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Classes</title>
|
||||
<title>Courses</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="root">
|
||||
<PageNav title="Classes" />
|
||||
<Classes />
|
||||
<PageNav title="Courses" />
|
||||
<Courses />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [slug, lecture, lectureId] = params.id;
|
||||
|
||||
return { slug, lecture, lectureId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { stores } from "@sapper/app";
|
||||
import PageNav from "../../components/PageNav/index.svelte";
|
||||
import Course from "../../components/Courses/components/Course.svelte";
|
||||
import CourseNav from "../../components/Courses/components/CourseNav.svelte";
|
||||
|
||||
export let slug;
|
||||
export let lecture;
|
||||
export let lectureId;
|
||||
console.log("slug", slug);
|
||||
console.log("lecture", lecture);
|
||||
console.log("lectureId", lectureId);
|
||||
|
||||
const { page } = stores();
|
||||
const path = $page.path;
|
||||
let tab = "";
|
||||
|
||||
$: tab = $page.query.tab || "lectures";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>QA Automation</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="root">
|
||||
<CourseNav />
|
||||
<div>
|
||||
<PageNav
|
||||
navItems={[
|
||||
{
|
||||
label: "README.md",
|
||||
isActive: tab === "lectures",
|
||||
href: `${path}?tab=lectures`,
|
||||
},
|
||||
{
|
||||
label: "Class work",
|
||||
isActive: tab === "classwork",
|
||||
href: `${path}?tab=classwork`,
|
||||
},
|
||||
{
|
||||
label: "Hometasks",
|
||||
isActive: tab === "hometasks",
|
||||
href: `${path}?tab=hometasks`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Course />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
/* min-width: 600px;
|
||||
margin: 0 auto; */
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user