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

Course profile, course fluid layout, fluid iframe

Browse Source
This commit is contained in:
rotimi_best
2021-05-08 22:03:44 +03:00
parent 026be1911f
commit 618644b663
17 changed files with 317 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Course/components/CourseNav.svelte
+44 -51
View File
@@ -7,7 +7,6 @@
function handleMainGroupClick(href) {
return () => {
console.log("goto", href);
goto(href);
};
}
@@ -36,60 +35,13 @@
];
</script>
<div class="root">
<PageNav title="React.JS" />
<div>
<Expandable
label="Overview"
handleClick={handleMainGroupClick("/courses/1")}
isGroupActive={$page.path === "/courses/1"}
hideSortIcon
/>
<Expandable label="Lectures">
{#each lectures as lecture}
<a
class="item {(lecture.link === $page.path ||
!$page.path.length > 3) &&
'active'} pl-7 py-2"
href={lecture.link}
>
# <span>{lecture.title}</span>
</a>
{/each}
</Expandable>
<Expandable
label="People"
handleClick={handleMainGroupClick("/courses/1/people")}
isGroupActive={$page.path === "/courses/1/people"}
hideSortIcon
/>
<Expandable
label="Timetable"
handleClick={handleMainGroupClick("/courses/1/timetable")}
isGroupActive={$page.path === "/courses/1/timetable"}
hideSortIcon
/>
<Expandable
label="Scoreboard"
handleClick={handleMainGroupClick("/courses/1/score")}
isGroupActive={$page.path === "/courses/1/score"}
hideSortIcon
/>
<Expandable
label="Home tasks"
handleClick={handleMainGroupClick("/courses/1/hometasks")}
isGroupActive={$page.path === "/courses/1/hometasks"}
hideSortIcon
/>
</div>
</div>
<style>
.root {
height: 90vh;
display: flex;
flex-direction: column;
width: 250px;
width: 20%;
max-width: 250px;
position: sticky;
top: 0;
border-right: 1px solid var(--border-color);
@@ -99,10 +51,51 @@
.active {
background-color: #cae2f9;
border-left: 3px solid var(--main-primary-color);
padding-left: 0.85rem;
padding-left: 1.5rem;
}
.item:hover {
background-color: #cae2f9;
}
</style>
<div class="root">
<PageNav title="React.JS" />
<div>
<Expandable
label="Overview"
handleClick={handleMainGroupClick('/courses/1')}
isGroupActive={$page.path === '/courses/1'}
hideSortIcon />
<Expandable label="Lectures">
{#each lectures as lecture}
<a
class="item {(lecture.link === $page.path || !$page.path.length > 3) && 'active'} pl-7 py-2"
href={lecture.link}>
#
<span>{lecture.title}</span>
</a>
{/each}
</Expandable>
<Expandable
label="People"
handleClick={handleMainGroupClick('/courses/1/people')}
isGroupActive={$page.path === '/courses/1/people'}
hideSortIcon />
<Expandable
label="Timetable"
handleClick={handleMainGroupClick('/courses/1/timetable')}
isGroupActive={$page.path === '/courses/1/timetable'}
hideSortIcon />
<Expandable
label="Scoreboard"
handleClick={handleMainGroupClick('/courses/1/score')}
isGroupActive={$page.path === '/courses/1/score'}
hideSortIcon />
<Expandable
label="Home tasks"
handleClick={handleMainGroupClick('/courses/1/hometasks')}
isGroupActive={$page.path === '/courses/1/hometasks'}
hideSortIcon />
</div>
</div>
src/components/Course/components/HomeTask.svelte
+2 -7
View File
@@ -2,12 +2,7 @@
import PageNav from "../../PageNav/index.svelte";
</script>
<div class="root">
<PageNav title="Home tasks" />
</div>
<style>
.root {
width: 100%;
}
</style>
<PageNav title="Home tasks" />
src/components/Course/components/Lecture/Readme.svelte
+2 -3
View File
@@ -12,9 +12,8 @@
title="Lecture"
src="https://docs.google.com/presentation/d/e/2PACX-1vTi_ATSrNBL-FMP7oDSi2DtXU7L8yzL0KAocNc-k7EqXaMM-oCbnbVmQjHYP0QKAw3r-QZayNfx5EpM/embed?start=false&loop=false&delayms=3000"
frameborder="0"
width="960"
width="100%"
height="569"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"
/>
webkitallowfullscreen="true" />
src/components/Course/components/Lecture/index.svelte
-2
View File
@@ -44,8 +44,6 @@
<style>
.course {
max-width: 600px;
margin: 0 auto;
padding: 0 40px;
}
</style>
src/components/Course/components/People.svelte
+68 -7
View File
@@ -1,13 +1,74 @@
<script>
import { stores } from "@sapper/app";
import PageNav from "../../PageNav/index.svelte";
import UserCard from "../../UserCard/index.svelte";
const { page } = stores();
const teachers = [
{
name: "Alexander Pokidin",
title: "Senior Software Engineer",
avatar:
"https://media-exp1.licdn.com/dms/image/C5603AQFWia2m2J0syA/profile-displayphoto-shrink_100_100/0/1517423655318?e=1625702400&v=beta&t=SVGGkisvjOVcbz6Ejtb8pEDzRnqqFxMAMXGZgW-WE70",
telegramLink: "https://t.me/seed_of_abraham",
mailLink: "mailto:[email protected]",
},
{
name: "Andrey Filatov",
title: "Fullstack Software Engineer",
avatar:
"https://media-exp1.licdn.com/dms/image/C5103AQHuKuAX7RdoRw/profile-displayphoto-shrink_100_100/0/1517226025504?e=1625702400&v=beta&t=dReL72K1hYLVXBw_-v5LTDfjHLeDqfRC6IzBYOdqjqc",
telegramLink: "https://t.me/seed_of_abraham",
mailLink: "mailto:[email protected]",
},
{
name: "Sergey Semko",
title: "Senior Software Engineer",
avatar:
"https://media-exp1.licdn.com/dms/image/C5603AQFUEHk5pxnIyA/profile-displayphoto-shrink_100_100/0/1558013476527?e=1625702400&v=beta&t=Y3uBohyYlRvVf_U-1o4elfRGdcTFkKQMH9NqbD5lHlc",
telegramLink: "https://t.me/seed_of_abraham",
mailLink: "mailto:[email protected]",
},
{
name: "Natalia Fedii",
title: "Project Manager",
avatar:
"https://media-exp1.licdn.com/dms/image/C5603AQEi-IuSUG6kTQ/profile-displayphoto-shrink_100_100/0/1517884922407?e=1625702400&v=beta&t=rbj0wEM20msiDSQnTdwr68E4uv9N6xJTvObl3hLuRLc",
telegramLink: "https://t.me/seed_of_abraham",
mailLink: "mailto:[email protected]",
},
];
const students = [...teachers, ...teachers, ...teachers];
</script>
<div class="root">
<PageNav title="People" />
<PageNav title="People" disableSticky={true} />
<div class="m-3">
<h3>
<a id="teachers" name="teachers" href="{$page.path}#teachers">Teachers</a>
</h3>
<div class="flex flex-wrap">
{#each teachers as teacher}
<UserCard
name={teacher.name}
avatarUrl={teacher.avatar}
title={teacher.title}
telegramLink={teacher.telegramLink}
mailLink={teacher.mailLink} />
{/each}
</div>
</div>
<style>
.root {
width: 100%;
}
</style>
<div class="m-3">
<h3>
<a id="students" name="students" href="{$page.path}#students">Students</a>
</h3>
<div class="flex flex-wrap">
{#each students as student}
<UserCard
name={student.name}
avatarUrl={student.avatar}
title={student.title} />
{/each}
</div>
</div>
src/components/Course/components/Scoreboard.svelte
+2 -7
View File
@@ -2,12 +2,7 @@
import PageNav from "../../PageNav/index.svelte";
</script>
<div class="root">
<PageNav title="Scoreboard" />
</div>
<style>
.root {
width: 100%;
}
</style>
<PageNav title="Scoreboard" />
src/components/Course/components/TimeTable.svelte
+2 -7
View File
@@ -2,12 +2,7 @@
import PageNav from "../../PageNav/index.svelte";
</script>
<div class="root">
<PageNav title="Time table" />
</div>
<style>
.root {
width: 100%;
}
</style>
<PageNav title="Time table" />
src/components/Course/index.svelte
+7 -16
View File
@@ -15,24 +15,15 @@
`;
</script>
<div class="root">
<PageNav title="Overview" />
<div class="body">
{@html marked(readme, {
breaks: true,
gfm: true,
})}
</div>
</div>
<style>
.root {
width: 100%;
}
.body {
max-width: 600px;
max-width: 1000px;
margin: 10px;
}
</style>
<PageNav title="Overview" disableSticky={true} />
<div class="body">
{@html marked(readme, { breaks: true, gfm: true })}
</div>