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

Add classes list page

Browse Source
This commit is contained in:
Ibitoye Rotimi Best
2021-05-06 08:22:25 +03:00
parent 7ea20260d4
commit 5268d10ba6
11 changed files with 254 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Classes/Class.svelte
+8
View File
@@ -0,0 +1,8 @@
<script>
export let classData = {};
</script>
<div class="class" />
<style>
</style>
src/components/Classes/index.svelte
+48
View File
@@ -0,0 +1,48 @@
<script>
import Education16 from "carbon-icons-svelte/lib/Education16";
import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
export let classes = [1, 2, 3, 4, 5, 6, 7];
</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;
margin: 0 auto;
padding: 0 40px;
}
.class {
border-bottom: 1px solid var(--border-color);
padding: 5px 0 10px;
}
.class-title {
width: fit-content;
font-size: 18px;
}
span {
color: #586069;
font-size: 12px;
width: 40px;
}
</style>
src/components/LeftNav/index.svelte
+12 -12
View File
@@ -1,6 +1,6 @@
<script>
import NewQuestion from "../NewQuestion/index.svelte";
import Home32 from "carbon-icons-svelte/lib/Home32";
import Forum32 from "carbon-icons-svelte/lib/Forum32";
import SendAlt32 from "carbon-icons-svelte/lib/SendAlt32";
import UserAvatar32 from "carbon-icons-svelte/lib/UserAvatar32";
import Calendar32 from "carbon-icons-svelte/lib/Calendar32";
@@ -23,13 +23,21 @@
/></a
>
</div>
<li>
<a
class="block"
aria-current={segment === "classes" ? "page" : undefined}
href="classes"
><Calendar32 class="carbon-icon" /> <span>Classes</span></a
>
</li>
<li>
<a
class="block"
aria-current={segment === undefined || segment === "discussion"
? "page"
: undefined}
href="."><Home32 class="carbon-icon" /><span>Home</span></a
href="."><Forum32 class="carbon-icon" /><span>Discussion</span></a
>
</li>
<li>
@@ -40,14 +48,6 @@
><UserAvatar32 class="carbon-icon" /> <span>Профиль</span></a
>
</li>
<li>
<a
class="block"
aria-current={segment === "timetable" ? "page" : undefined}
href="timetable"
><Calendar32 class="carbon-icon" /> <span>Расписание</span></a
>
</li>
<li>
<a
class="flex items-center"
@@ -115,11 +115,11 @@
}
[aria-current] :global(svg.carbon-icon) {
fill: #3182ce;
fill: var(--main-primary-color);
}
[aria-current] {
color: #3182ce;
color: var(--main-primary-color);
}
@media only screen and (max-width: 1002px) {
src/components/Nav/index.svelte
+1 -1
View File
@@ -90,7 +90,7 @@
content: "";
width: calc(100% - 1em);
height: 2px;
background-color: #3182ce;
background-color: var(--main-primary-color);
display: block;
bottom: -1px;
}
src/components/PageNav/index.svelte
+57
View File
@@ -0,0 +1,57 @@
<script>
export let title = "";
export let navItems = [];
</script>
<div class="header flex justify-between mb-2">
<h4 class="title">{title}</h4>
{#if Array.isArray(navItems) && navItems.length}
<div class="flex justify-evenly items-center">
{#each navItems as item}
<a class="mr-5 text-sm {item.isActive && 'active'}" href={item.href}>
{item.label}
</a>
{/each}
</div>
{/if}
</div>
<style>
.header {
border-bottom: 1px solid var(--border-color);
padding: 15px;
}
.title {
font-size: 20px;
}
h4 {
font-size: 16px;
font-weight: 900;
word-break: break-word;
overflow-wrap: break-word;
margin: 0;
}
.active {
position: relative;
display: inline-block;
}
.active::after {
position: absolute;
content: "";
width: 100%;
height: 3px;
background-color: var(--main-primary-color);
display: block;
}
@media only screen and (max-width: 1002px) {
.header {
flex-direction: column;
align-items: flex-start;
}
}
</style>
src/routes/_layout.svelte
+16 -12
View File
@@ -8,6 +8,18 @@
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;
@@ -20,16 +32,8 @@
:global(a:hover) {
text-decoration: underline;
}
:global(:root) {
--main-primary-color: #3182ce;
--border-color: #eaecef;
}
</style>
<Tailwindcss />
<!-- <Nav {segment} /> -->
<main class="flex max-w-screen-xl">
<LeftNav {segment} />
<slot />
<SideBar />
</main>
<Footer />
src/routes/classes.svelte
+28
View File
@@ -0,0 +1,28 @@
<script>
import PageNav from "../components/PageNav/index.svelte";
import Classes from "../components/Classes/index.svelte";
import { stores } from "@sapper/app";
const { page } = stores();
let tab = "";
$: tab = $page.query.tab || "mine";
</script>
<svelte:head>
<title>Classes</title>
</svelte:head>
<div class="root">
<PageNav title="Classes" />
<Classes />
</div>
<style>
.root {
min-width: 600px;
margin: 0 auto;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
}
</style>
src/routes/discussion/[id].svelte
+3 -3
View File
@@ -1,8 +1,8 @@
<script context="module">
import marked from "marked";
import Vote from "../../components/Vote.svelte";
import HashTags from "../../components/HashTags.svelte";
import TextEditor from "../../components/TextEditor.svelte";
import Vote from "../../components/Vote/index.svelte";
import HashTags from "../../components/HashTags/index.svelte";
import TextEditor from "../../components/TextEditor/index.svelte";
import CheckmarkOutline20 from "carbon-icons-svelte/lib/CheckmarkOutline20";
let userComment = "";
src/routes/index.svelte
+24 -56
View File
@@ -4,6 +4,7 @@
import Vote from "../components/Vote/index.svelte";
import Space from "../components/Space/index.svelte";
import HashTags from "../components/HashTags/index.svelte";
import PageNav from "../components/PageNav/index.svelte";
function getDiscussion(filterBy, allDiscussions) {
switch (filterBy) {
@@ -150,29 +151,26 @@
<title>Unidiscuss - Help students in your university</title>
</svelte:head>
<div class="root md:w-3/4 mx-auto md:mb-20">
<div class="header flex justify-between mb-2">
<h4 class="title">Разговоры 😉😁</h4>
<div class="flex justify-evenly items-center">
<a
class="mr-5 text-sm {filterBy === 'popular' && 'active'}"
href="?filter=popular"
>
Popular
</a>
<a
class="mr-5 text-sm {filterBy === 'recent' && 'active'}"
href="?filter=recent"
>
Recent
</a>
<a
class="mr-5 text-sm {filterBy === 'upvoted' && 'active'}"
href="?filter=upvoted"
>
Upvoted
</a>
</div>
</div>
<PageNav
title="Разговоры 😉😁"
navItems={[
{
label: "Popular",
isActive: filterBy === "popular",
href: "?filter=popular",
},
{
label: "Recent",
isActive: filterBy === "recent",
href: "?filter=recent",
},
{
label: "Upvoted",
isActive: filterBy === "upvoted",
href: "?filter=upvoted",
},
]}
/>
{#each discussions as discussion}
<div class="discussion-box">
<Vote value={discussion.votes} />
@@ -198,20 +196,11 @@
.root {
max-width: 600px;
margin: 0 auto;
border-left: 1px solid #eaecef;
border-right: 1px solid #eaecef;
}
.root .header {
border-bottom: 1px solid #eaecef;
padding: 15px;
}
.root .title {
font-size: 20px;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
}
.discussion-box {
/* border: 1px solid #eaecef; */
/* border: 1px solid var(--border-color); */
display: flex;
align-items: flex-start;
padding: 10px 15px;
@@ -235,25 +224,4 @@
color: #586069;
font-size: 12px;
}
.active {
position: relative;
display: inline-block;
}
.active::after {
position: absolute;
content: "";
width: 100%;
height: 3px;
background-color: #3182ce;
display: block;
}
@media only screen and (max-width: 1002px) {
.header {
flex-direction: column;
align-items: flex-start;
}
}
</style>
src/routes/profile.svelte
+26 -24
View File
@@ -2,12 +2,36 @@
let photos = [];
</script>
<svelte:head>
<title>Profile</title>
</svelte:head>
<div class="root">
<figure>
<img
src="https://pbs.twimg.com/media/EzHwj4wVgAEVbUY?format=jpg&name=4096x4096"
alt="Elon musk"
/>
<figcaption>Elon musk</figcaption>
</figure>
<p>
NASA has selected Starship to land the first astronauts on the lunar surface
since the Apollo program! We are humbled to help @NASAArtemis usher in a new
era of human space exploration → http://go.nasa.gov/3tur510
</p>
<button
class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-1 px-3 rounded"
>
Connect
</button>
</div>
<style>
.root {
max-width: 600px;
margin: 20px auto;
border-left: 1px solid #eaecef;
border-right: 1px solid #eaecef;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
text-align: center;
padding: 5px;
}
@@ -22,25 +46,3 @@
border-radius: 50%;
}
</style>
<svelte:head>
<title>Profile</title>
</svelte:head>
<div class="root">
<figure>
<img
src="https://pbs.twimg.com/media/EzHwj4wVgAEVbUY?format=jpg&name=4096x4096"
alt="Elon musk" />
<figcaption>Elon musk</figcaption>
</figure>
<p>
NASA has selected Starship to land the first astronauts on the lunar surface
since the Apollo program! We are humbled to help @NASAArtemis usher in a new
era of human space exploration → http://go.nasa.gov/3tur510
</p>
<button
class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-1 px-3 rounded">
Connect
</button>
</div>
src/routes/timetable.svelte
+31 -29
View File
@@ -8,14 +8,41 @@
$: tab = $page.query.tab || "mine";
</script>
<svelte:head>
<title>Расписание</title>
</svelte:head>
<div class="root">
<div class="header flex justify-between mb-2">
<h4 class="title">Расписание</h4>
<div class="flex justify-evenly items-center">
<a
class="mr-5 text-sm {tab === 'mine' && 'active'}"
href="/timetable?tab=mine"
>
Мои
</a>
<a
class="mr-5 text-sm {tab === 'saved' && 'active'}"
href="/timetable?tab=saved"
>
Сохранение
</a>
</div>
</div>
<TimeTable />
<TimeTable />
<TimeTable />
</div>
<style>
.root {
margin: 0 auto;
border-left: 1px solid #eaecef;
border-right: 1px solid #eaecef;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
}
.root .header {
border-bottom: 1px solid #eaecef;
border-bottom: 1px solid var(--border-color);
padding: 15px;
}
@@ -29,32 +56,7 @@
content: "";
width: 100%;
height: 3px;
background-color: #3182ce;
background-color: var(--main-primary-color);
display: block;
}
</style>
<svelte:head>
<title>Расписание</title>
</svelte:head>
<div class="root">
<div class="header flex justify-between mb-2">
<h4 class="title">Расписание</h4>
<div class="flex justify-evenly items-center">
<a
class="mr-5 text-sm {tab === 'mine' && 'active'}"
href="/timetable?tab=mine">
Мои
</a>
<a
class="mr-5 text-sm {tab === 'saved' && 'active'}"
href="/timetable?tab=saved">
Сохранение
</a>
</div>
</div>
<TimeTable />
<TimeTable />
<TimeTable />
</div>