ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add classes and class pages

Browse Source
This commit is contained in:
rotimi_best
2021-05-06 15:26:28 +03:00
parent 5268d10ba6
commit 9838095235
6 changed files with 176 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Chip/index.svelte
+8 -4
View File
@@ -1,9 +1,8 @@
<script>
export let value;
export let className;
</script>
<p>{value}</p>
<style>
p {
display: inline-block;
@@ -12,11 +11,16 @@
font-size: 12px;
font-weight: 500;
line-height: 18px;
color: #586069;
text-align: center;
background-color: #d1d5da80;
border: 1px solid transparent;
border-radius: 2em;
margin: 6px 0 0;
}
.bg-set {
/* color: #586069;
background-color: #d1d5da80; */
}
</style>
<p class="{className} bg-set">{value}</p>
src/components/Classes/Class.svelte
+61 -3
View File
@@ -1,8 +1,66 @@
<script>
export let classData = {};
import Education16 from "carbon-icons-svelte/lib/Education16";
import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
export let lectures = [
"Today",
"Yesterday",
"April 24, 2021",
"April 17, 2021",
"March 25, 2021",
];
</script>
<div class="class" />
<style>
.lesson-date {
margin: 10px 10px 5px;
color: #171717;
font-size: 0.875rem;
font-weight: 400;
}
.class {
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;
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">
<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>
src/components/Classes/index.svelte
+32 -19
View File
@@ -1,28 +1,20 @@
<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 classes = [1, 2, 3, 4, 5, 6, 7];
export let classes = [
{
chipClassName: "bg-green-400 text-gray-100",
chipLabel: "In progress",
},
{
chipClassName: "bg-red-500 text-gray-100",
chipLabel: "Completed",
},
];
</script>
<div class="classes">
{#each classes as classData}
<div class="class">
<h4 class="class-title">
<a rel="prefetch" href="classes/1">React.JS 001</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>
.classes {
max-width: 600px;
@@ -46,3 +38,24 @@
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>
src/routes/_layout.svelte
+12 -12
View File
@@ -8,18 +8,6 @@
export let segment;
</script>
<Tailwindcss />
<!-- <Nav {segment} /> -->
<main class="flex max-w-screen-xl">
<LeftNav {segment} />
<slot />
<SideBar />
</main>
<Footer />
<style>
main {
background-color: white;
@@ -37,3 +25,15 @@
--border-color: #eaecef;
}
</style>
<Tailwindcss />
<!-- <Nav {segment} /> -->
<main class="flex max-w-screen-xl">
<LeftNav {segment} />
<slot />
<SideBar />
</main>
<Footer />
src/routes/classes/[id].svelte
+31
View File
@@ -0,0 +1,31 @@
<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>
src/routes/classes[id].svelte
+32
View File
@@ -0,0 +1,32 @@
<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>