CLASSROOMIO-T-21: Course landing page + editor
This commit is contained in:
Rotimi Best
@@ -1,163 +1,347 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
// import paystack from 'paystack';
|
||||
import get from 'lodash/get';
|
||||
import { onMount } from 'svelte';
|
||||
import RecentlyViewed16 from 'carbon-icons-svelte/lib/RecentlyViewed16';
|
||||
import CurrencyDollar16 from 'carbon-icons-svelte/lib/CurrencyDollar16';
|
||||
import Alarm16 from 'carbon-icons-svelte/lib/Alarm16';
|
||||
import pluralize from 'pluralize';
|
||||
import { stores } from '@sapper/app';
|
||||
import Expandable from '../Expandable/index.svelte';
|
||||
import Notebook from 'carbon-icons-svelte/lib/Notebook16/Notebook16.svelte'; //note
|
||||
import PresentationFile from 'carbon-icons-svelte/lib/PresentationFile16/PresentationFile16.svelte'; // exercise
|
||||
import Video from 'carbon-icons-svelte/lib/Video16/Video16.svelte'; //video
|
||||
import PageNumber from 'carbon-icons-svelte/lib/PageNumber16/PageNumber16.svelte';
|
||||
import PlayFilled from 'carbon-icons-svelte/lib/PlayFilled16/PlayFilled16.svelte';
|
||||
import PrimaryButton from '../PrimaryButton/index.svelte';
|
||||
import MarkdownRender from '../MarkdownRender/index.svelte';
|
||||
import { NAV_ITEMS, SECTION_KEYS } from './constants';
|
||||
import { landingPageStore } from './store';
|
||||
import PricingSection from './components/PricingSection.svelte';
|
||||
import { getLectureNo } from '../Course/function';
|
||||
import { NAV_ITEMS } from './constants';
|
||||
import Chip from '../Chip/index.svelte';
|
||||
import { getEmbedId } from '../../utils/functions/formatYoutubeVideo';
|
||||
import type { Course, Lesson } from '../../utils/types';
|
||||
|
||||
let activeNavItem = '';
|
||||
export let courseData: Course = {
|
||||
id: '',
|
||||
title: '',
|
||||
description: '',
|
||||
};
|
||||
let lessons: Array<Lesson> = [];
|
||||
let player: any;
|
||||
|
||||
const expandableRootClass =
|
||||
'max-w-4xl pt-5 my-3 border-r-0 border-b border-l-0 border-gray-300';
|
||||
const { page } = stores();
|
||||
// const paystackApi = paystack('');
|
||||
|
||||
function handleEnrol() {}
|
||||
function handleNavItemClick(navItem) {
|
||||
return () => {
|
||||
activeNavItem = navItem;
|
||||
};
|
||||
let activeNav = NAV_ITEMS[0].key;
|
||||
let instructor = {};
|
||||
let video: string | undefined;
|
||||
|
||||
function playVideo() {
|
||||
console.log('open modal with video');
|
||||
}
|
||||
|
||||
function locationHashChanged() {
|
||||
activeNav = window.location.hash;
|
||||
}
|
||||
|
||||
function addToCart() {}
|
||||
|
||||
function buyNow() {
|
||||
// if (courseData.cost) {
|
||||
// paystackApi.tra;
|
||||
// } else {
|
||||
// // Course is free
|
||||
// }
|
||||
}
|
||||
|
||||
function initPlyr(_player: any, _video: string | undefined) {
|
||||
if (!player) return;
|
||||
|
||||
// @ts-ignore
|
||||
const plyr = new Plyr('#player', {});
|
||||
// @ts-ignore
|
||||
window.player = plyr;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
activeNavItem = (window.location.hash || NAV_ITEMS[0].key).replace('#', '');
|
||||
window.onhashchange = locationHashChanged;
|
||||
});
|
||||
|
||||
$: video = get(courseData, 'metadata.videoUrl');
|
||||
$: lessons = get(courseData, 'lessons', []);
|
||||
$: instructor = courseData?.metadata?.instructor || {};
|
||||
$: initPlyr(player, video);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$landingPageStore.header.title}</title>
|
||||
<title>{get(courseData, 'title', '')}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="w-full bg-white flex flex-col items-center">
|
||||
<section
|
||||
class="w-full flex items-center justify-center bg-gray-900 text-white p-6 pb-10"
|
||||
>
|
||||
<div class="container flex justify-between items-center">
|
||||
<div class="course-description mr-3">
|
||||
<h1>
|
||||
{$landingPageStore.header.title}
|
||||
<!-- Header Section -->
|
||||
<header class="banner w-full flex items-center justify-center p-">
|
||||
<div
|
||||
class="md:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row"
|
||||
>
|
||||
<!-- Course Description -->
|
||||
<div class="md:w-2/5 w-11/12 py-10">
|
||||
<h1 class="text-5xl text-white my-4 font-bold">
|
||||
{get(courseData, 'title', '')}
|
||||
</h1>
|
||||
<h5>
|
||||
{$landingPageStore.header.description}
|
||||
</h5>
|
||||
<div>
|
||||
<span class="flex items-center">
|
||||
<RecentlyViewed16 class="carbon-icon mr-2" />
|
||||
Last updated 10/2021
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-container bg-white p-3 flex items-start flex-col">
|
||||
<p class="mb-2 text-black text-md flex items-center">
|
||||
<Alarm16 class="carbon-icon active mr-2" />
|
||||
{$landingPageStore.header.duration}
|
||||
<p class="text-md text-white mb-6">
|
||||
{get(courseData, 'description', '')}
|
||||
</p>
|
||||
<p class="mb-2 text-black text-md flex items-center">
|
||||
<CurrencyDollar16 class="carbon-icon active mr-2" />
|
||||
{$landingPageStore.header.currency}{$landingPageStore.header.cost}
|
||||
|
||||
<p class="author my-3 text-sm">
|
||||
{get(courseData, 'metadata.instructor.name', '')}
|
||||
</p>
|
||||
<PrimaryButton
|
||||
label={$landingPageStore.header.buttonLabel}
|
||||
onClick={handleEnrol}
|
||||
className="md:w-full"
|
||||
label="Start Course"
|
||||
className="px-6 py-5 mt-6 sm:w-fit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Banner Image getEmbedId(videoUrl) -->
|
||||
{#if video}
|
||||
<div class="banner-image md:w-2/3 w-full flex">
|
||||
<div
|
||||
bind:this={player}
|
||||
id="player"
|
||||
data-plyr-provider="youtube"
|
||||
data-plyr-embed-id={getEmbedId(video)}
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="container">
|
||||
<div
|
||||
bind:this={player}
|
||||
id="player"
|
||||
class="banner-image w-2/3 h-96 relative"
|
||||
data-plyr-provider="youtube"
|
||||
data-plyr-embed-id="bTqVqk7FSmY"
|
||||
/>
|
||||
</div> -->
|
||||
{:else}
|
||||
<!-- <div
|
||||
class="banner-image w-2/3 h-96 relative cursor-pointer"
|
||||
on:click={playVideo}
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="absolute top-0 left-0 backdrop w-full h-full"
|
||||
/>
|
||||
<img
|
||||
src="/images/course-banner-image.png"
|
||||
alt="banner"
|
||||
class="w-full h-full"
|
||||
/>
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full z-50 flex items-center justify-center"
|
||||
>
|
||||
<img src="/images/play_video.png" alt="play video" />
|
||||
</div>
|
||||
</div> -->
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
<PricingSection className="md:hidden" {courseData} />
|
||||
<!-- Body -->
|
||||
<div class="bg-white w-full">
|
||||
<div class="py-8 lg:w-10/12 w-full m-2 lg:m-auto flex justify-between">
|
||||
<!-- Course Details -->
|
||||
<div class="course-content w-full p-3 md:w-9/12 md:mr-14">
|
||||
<!-- Navigation -->
|
||||
<nav class="flex items-center border-b border-gray-300 pb-3">
|
||||
{#each NAV_ITEMS as navItem}
|
||||
<a
|
||||
href="{$page.path}{navItem.key}"
|
||||
class="{navItem.key === activeNav &&
|
||||
'active text-blue-700'} rounded-lg px-2 mr-6 text-slate-700 font-normal hover:bg-slate-100 hover:text-slate-900"
|
||||
>
|
||||
{navItem.label}
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<nav
|
||||
class="w-full z-10 max-w-4xl flex items-center justify-evenly py-4 px-4 bg-gray-100 mt-4 sticky top-0"
|
||||
>
|
||||
{#each NAV_ITEMS as navItem}
|
||||
<p
|
||||
class="text-md text-gray-900 {activeNavItem === navItem.key &&
|
||||
'font-bold'}"
|
||||
on:click={handleNavItemClick(navItem.key)}
|
||||
>
|
||||
<a href="{$page.path}#{navItem.key}">{navItem.label}</a>
|
||||
</p>
|
||||
{/each}
|
||||
</nav>
|
||||
<!-- Sections - Requirement -->
|
||||
<section id="requirement" class="border-b border-gray-300 mt-8 pb-10">
|
||||
<h3 class="text-2xl font-bold mt-0 mb-3">Requirement</h3>
|
||||
<ul class="list font-light">
|
||||
{@html get(courseData, 'metadata.requirements', '')}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<Expandable
|
||||
id={SECTION_KEYS.REQUIREMENT}
|
||||
title="Requirement"
|
||||
titleClass="text-2xl"
|
||||
rootClass={expandableRootClass}
|
||||
supportsLink={true}
|
||||
>
|
||||
<MarkdownRender
|
||||
content={$landingPageStore.requirement.content}
|
||||
disableMaxWidth={true}
|
||||
/>
|
||||
</Expandable>
|
||||
<!-- Sections - Course Description -->
|
||||
<section id="description" class="border-b border-gray-300 mt-8 pb-10">
|
||||
<h3 class="text-2xl font-bold mt-0 mb-3">Course Description</h3>
|
||||
<p class="text-sm font-light">
|
||||
{@html get(courseData, 'metadata.description', '')}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Expandable
|
||||
id={SECTION_KEYS.DESCRIPTION}
|
||||
title="Description"
|
||||
titleClass="text-2xl"
|
||||
rootClass={expandableRootClass}
|
||||
supportsLink={true}
|
||||
>
|
||||
<MarkdownRender
|
||||
content={$landingPageStore.description.content}
|
||||
disableMaxWidth={true}
|
||||
/>
|
||||
</Expandable>
|
||||
<!-- Sections - Goal -->
|
||||
<section id="goals" class="mt-8 pb-10">
|
||||
<h3 class="text-2xl font-bold mt-0 mb-3">What you'll learn</h3>
|
||||
<ul class="list font-light">
|
||||
{@html get(courseData, 'metadata.goals', '')}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<Expandable
|
||||
id={SECTION_KEYS.SYLLABUS}
|
||||
title="Syllabus"
|
||||
titleClass="text-2xl"
|
||||
rootClass={expandableRootClass}
|
||||
supportsLink={true}
|
||||
>
|
||||
{#each $landingPageStore.syllabus.lessons as lesson, index}
|
||||
<div class="flex items-center my-2">
|
||||
<strong class="mr-2">Lesson {index + 1}. </strong>
|
||||
{lesson.title}
|
||||
<!-- Sections - Certificate -->
|
||||
<section class="border-b border-gray-300 mt-8 pb-10">
|
||||
<h3 class="text-2xl font-bold mt-0">Certificate</h3>
|
||||
<p class="text-sm font-light mb-3">
|
||||
When you complete all of the courses in the program, you'll earn a
|
||||
Certificate to share with your professional network.
|
||||
</p>
|
||||
<img
|
||||
src="/images/certificate-template.svg"
|
||||
alt="certificate template"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<!-- Sections - Lessons -->
|
||||
<section id="lessons" class="border-b border-gray-300 mt-8 pb-10">
|
||||
<div class="flex items-center justify-between w-full mb-3">
|
||||
<h3 class="text-2xl font-bold mt-0 mb-3">Course Content</h3>
|
||||
<p class="text-sm font-light">
|
||||
<!-- {lessons.length} lessons -->
|
||||
{pluralize('lesson', lessons.length, true)}
|
||||
</p>
|
||||
</div>
|
||||
{#each lessons as lesson, index}
|
||||
<div
|
||||
class="w-full flex md:items-center justify-between mb-6 flex-col md:flex-row"
|
||||
>
|
||||
<div class="flex items-center mb-3">
|
||||
<Chip
|
||||
value={getLectureNo(index + 1, '0')}
|
||||
className="bg-blue-100 text-blue-700"
|
||||
/>
|
||||
<p class="ml-2 text-sm font-light">{lesson.title}</p>
|
||||
</div>
|
||||
|
||||
<div class="w-2/4">
|
||||
<div class="flex items-center">
|
||||
{#if lesson.slide_url}
|
||||
<span class="text-sm font-light flex w-2/4"
|
||||
><PresentationFile class="mr-1" />1 slide</span
|
||||
>
|
||||
{/if}
|
||||
{#if lesson.note}
|
||||
<span class="text-sm font-light flex w-2/4"
|
||||
><Notebook class="mr-1" />1 note</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
{#if lesson.video_url}
|
||||
<span class="text-sm font-light flex w-2/4"
|
||||
><Video class="mr-1" />1 video</span
|
||||
>
|
||||
{/if}
|
||||
{#if get(lesson, 'totalExercises[0].count')}
|
||||
<span class="text-sm font-light flex w-2/4"
|
||||
><PageNumber class="mr-1" />{pluralize(
|
||||
'exercise',
|
||||
get(lesson, 'totalExercises[0].count', 0),
|
||||
true
|
||||
)}</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<!-- Sections - Instructor -->
|
||||
<section id="instructor" class="mt-8 pb-10">
|
||||
<h3 class="text-2xl font-bold mt-0 mb-3">Instructor</h3>
|
||||
<div class="flex items-center mb-4">
|
||||
<img
|
||||
alt="Author Avatar"
|
||||
class="block rounded-full h-20 w-20 mr-3"
|
||||
src={get(instructor, 'imgUrl', '')}
|
||||
/>
|
||||
<div>
|
||||
<p class="text-md font-light">{get(instructor, 'name', '')}</p>
|
||||
<p class="text-xs font-light">{get(instructor, 'role', '')}</p>
|
||||
<p class="text-md font-light flex items-center">
|
||||
<PlayFilled class="text-blue-700" />
|
||||
<span class="ml-1"
|
||||
>{get(instructor, 'courseNo', '')} courses</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm font-light">
|
||||
{get(instructor, 'description', '')}
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
{/each}
|
||||
</Expandable>
|
||||
|
||||
<Expandable
|
||||
id={SECTION_KEYS.ABOUT_US}
|
||||
title="About Us - {$landingPageStore.aboutUs.companyName}"
|
||||
titleClass="text-2xl"
|
||||
rootClass={expandableRootClass}
|
||||
supportsLink={true}
|
||||
>
|
||||
<div class="w-full">
|
||||
<img
|
||||
src={$landingPageStore.aboutUs.logoUrl}
|
||||
alt={$landingPageStore.aboutUs.companyName}
|
||||
height="260"
|
||||
width="260"
|
||||
class="rounded-full m-auto"
|
||||
/>
|
||||
<!-- Pricing Details -->
|
||||
<PricingSection className="hidden md:block" {courseData} />
|
||||
</div>
|
||||
<MarkdownRender
|
||||
content={$landingPageStore.aboutUs.description}
|
||||
disableMaxWidth={true}
|
||||
/>
|
||||
</Expandable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
max-width: 800px;
|
||||
.banner {
|
||||
background-color: #040f2d;
|
||||
min-height: 472px;
|
||||
}
|
||||
|
||||
.course-description {
|
||||
max-width: 500px;
|
||||
}
|
||||
.author {
|
||||
color: #7888b7;
|
||||
}
|
||||
|
||||
.action-container {
|
||||
height: fit-content;
|
||||
width: 200px;
|
||||
}
|
||||
.banner-image {
|
||||
max-width: 559px;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.active::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: var(--main-primary-color);
|
||||
display: block;
|
||||
bottom: -14px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.price-container {
|
||||
width: 405px;
|
||||
min-width: 330px;
|
||||
height: fit-content;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.course-content {
|
||||
max-width: 608px;
|
||||
}
|
||||
|
||||
nav {
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.list ul li) {
|
||||
margin-left: 1rem;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
:global(.plyr) {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user