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

Restructure components

Browse Source
This commit is contained in:
Ibitoye Rotimi Best
2021-05-06 07:15:40 +03:00
parent a80ecc31d0
commit c15c421fee
17 changed files with 174 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AskPage.svelte → src/components/AskPage/AskPage.svelte
+35 -25
View File
@@ -1,46 +1,52 @@
<script context="module">
import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
import TextEditor from "./TextEditor.svelte";
import TextEditor from "../TextEditor/index.svelte";
let questionTitle = '';
let questionTitle = "";
let questionTags = [];
let questionDescription = '';
let questionDescription = "";
let facultyFilterOpened = true;
const faculties = [
'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
"ИЭКСУ",
"ИМБТ",
"ИМИ",
"ИПТДМ",
"ИИИР",
"ГФ",
"ХТФ",
"ИДЗО",
"УИИ",
"УНИ",
];
function handleFacultyFilters() {
console.log('clicking')
console.log("clicking");
facultyFilterOpened = facultyFilterOpened ? false : true;
}
let things = [
{ id: 1, color: 'darkblue' },
{ id: 2, color: 'indigo' },
{ id: 3, color: 'deeppink' },
{ id: 4, color: 'salmon' },
{ id: 5, color: 'gold' }
];
{ id: 1, color: "darkblue" },
{ id: 2, color: "indigo" },
{ id: 3, color: "deeppink" },
{ id: 4, color: "salmon" },
{ id: 5, color: "gold" },
];
function handleClick() {
function handleClick() {
things = things.slice(1);
console.log('things', things)
}
console.log("things", things);
}
</script>
<svelte:head>
<title>Спросить собшество вопрос</title>
<title>Спросить собшество вопрос</title>
</svelte:head>
<div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
<h2 class="pb-2">Спросить собшество вопрос</h2>
<div class="my-1 px-1">
<div class="mb-5">
<button on:click={handleClick}>
Remove first thing
</button>
<button on:click={handleClick}> Remove first thing </button>
{#each things as thing}
<p style="color: {thing.color}">{thing.id}</p>
{/each}
@@ -48,14 +54,18 @@
class="flex border rounded-lg border-grey py-1 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200"
on:click={handleFacultyFilters}
>
<span>Факултеты</span> <ChevronDown24 class="ml-2" />
<span>Факултеты</span>
<ChevronDown24 class="ml-2" />
</button>
{#if facultyFilterOpened}
<div class="w-48 bg-white border border-grey rounded-lg mt-2 py-2">
{#each faculties as faculty}
<div class="block px-4 py-2 border-b">
<input type="checkbox" class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer">
<input
type="checkbox"
class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer"
/>
<span>{faculty}</span>
</div>
{/each}
@@ -72,12 +82,12 @@
type="text"
name="discussion[title]"
id="discussion_title"
value="{questionTitle}"
>
value={questionTitle}
/>
</div>
<TextEditor
value="{questionDescription}"
value={questionDescription}
placeholder="Задайте вопрос или начните разговор"
/>
</div>
</div>
src/components/Chip.svelte → src/components/Chip/index.svelte
+2 -2
View File
@@ -1,5 +1,5 @@
<script>
export let value;
export let value;
</script>
<p>{value}</p>
@@ -19,4 +19,4 @@
border-radius: 2em;
margin: 6px 0 0;
}
</style>
</style>
src/components/Footer.svelte → src/components/Footer/index.svelte
View File
src/components/HashTags.svelte → src/components/HashTags/index.svelte
View File
src/components/Hoverable.svelte → src/components/Hoverable/index.svelte
View File
src/components/LeftNav.svelte → src/components/LeftNav/index.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script>
import NewQuestion from "./NewQuestion.svelte";
import NewQuestion from "../NewQuestion/index.svelte";
import Home32 from "carbon-icons-svelte/lib/Home32";
import SendAlt32 from "carbon-icons-svelte/lib/SendAlt32";
import UserAvatar32 from "carbon-icons-svelte/lib/UserAvatar32";
src/components/Nav.svelte
-96
View File
@@ -1,96 +0,0 @@
<script>
import Space from "./Space.svelte";
import NewQuestion from "./NewQuestion.svelte";
export let segment;
</script>
<style>
nav {
border-bottom: 1px solid rgba(255, 62, 0, 0.1);
font-weight: 300;
padding: 0 1em;
display: flex;
position: sticky;
top: 0px;
background-color: #fff;
z-index: 1;
}
ul {
margin: 0;
padding: 0;
}
/* clearfix */
ul::after {
content: "";
display: block;
clear: both;
}
li {
display: block;
float: left;
}
[aria-current] {
position: relative;
display: inline-block;
}
[aria-current]::after {
position: absolute;
content: "";
width: calc(100% - 1em);
height: 2px;
background-color: #3182ce;
display: block;
bottom: -1px;
}
a {
text-decoration: none;
padding: 1em 0.5em;
}
</style>
<nav>
<ul>
<li>
<a
class="block"
aria-current={segment === undefined || segment === 'discussion' ? 'page' : undefined}
href=".">UniDiscuss</a>
</li>
</ul>
<Space />
<ul class="flex items-center">
<li>
<NewQuestion />
</li>
<li>
<a
class="flex items-center"
href="https://t.me/unidiscuss"
target="_blank">
<img
alt="File:Telegram logo.svg"
class="mr-1"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png"
decoding="async"
width="25"
height="25"
srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1024px-Telegram_logo.svg.png 2x"
data-file-width="25"
data-file-height="25" />
<span>Канал</span>
</a>
</li>
<li>
<a
class="block"
aria-current={segment === 'profile' ? 'page' : undefined}
href="profile">Войти</a>
</li>
</ul>
</nav>
src/components/Nav/index.svelte
+102
View File
@@ -0,0 +1,102 @@
<script>
import Space from "../Space/index.svelte";
import NewQuestion from "../NewQuestion/index.svelte";
export let segment;
</script>
<nav>
<ul>
<li>
<a
class="block"
aria-current={segment === undefined || segment === "discussion"
? "page"
: undefined}
href=".">UniDiscuss</a
>
</li>
</ul>
<Space />
<ul class="flex items-center">
<li>
<NewQuestion />
</li>
<li>
<a
class="flex items-center"
href="https://t.me/unidiscuss"
target="_blank"
>
<img
alt="File:Telegram logo.svg"
class="mr-1"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png"
decoding="async"
width="25"
height="25"
srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1024px-Telegram_logo.svg.png 2x"
data-file-width="25"
data-file-height="25"
/>
<span>Канал</span>
</a>
</li>
<li>
<a
class="block"
aria-current={segment === "profile" ? "page" : undefined}
href="profile">Войти</a
>
</li>
</ul>
</nav>
<style>
nav {
border-bottom: 1px solid rgba(255, 62, 0, 0.1);
font-weight: 300;
padding: 0 1em;
display: flex;
position: sticky;
top: 0px;
background-color: #fff;
z-index: 1;
}
ul {
margin: 0;
padding: 0;
}
/* clearfix */
ul::after {
content: "";
display: block;
clear: both;
}
li {
display: block;
float: left;
}
[aria-current] {
position: relative;
display: inline-block;
}
[aria-current]::after {
position: absolute;
content: "";
width: calc(100% - 1em);
height: 2px;
background-color: #3182ce;
display: block;
bottom: -1px;
}
a {
text-decoration: none;
padding: 1em 0.5em;
}
</style>
src/components/NewQuestion.svelte → src/components/NewQuestion/index.svelte
View File
src/components/SideBar.svelte → src/components/SideBar/index.svelte
View File
src/components/Space.svelte → src/components/Space/index.svelte
View File
src/components/TextEditor.svelte → src/components/TextEditor/index.svelte
View File
src/components/Vote.svelte
-31
View File
@@ -1,31 +0,0 @@
<script>
import ArrowUp16 from "carbon-icons-svelte/lib/ArrowUp16";
import Chip from "./Chip.svelte";
export let value = 0;
function upVote() {
value = value + 1;
}
</script>
<div
class="vote border-none cursor-pointer"
on:click={upVote}
>
<ArrowUp16 />
<Chip value="{value}" />
</div>
<style>
.vote {
display: flex;
flex-direction: column;
align-items: center;
min-width: 25px;
width: 25px;
justify-content: center;
margin-right: 10px;
}
</style>
src/components/Vote/index.svelte
+27
View File
@@ -0,0 +1,27 @@
<script>
import ArrowUp16 from "carbon-icons-svelte/lib/ArrowUp16";
import Chip from "../Chip/index.svelte";
export let value = 0;
function upVote() {
value = value + 1;
}
</script>
<div class="vote border-none cursor-pointer" on:click={upVote}>
<ArrowUp16 />
<Chip {value} />
</div>
<style>
.vote {
display: flex;
flex-direction: column;
align-items: center;
min-width: 25px;
width: 25px;
justify-content: center;
margin-right: 10px;
}
</style>
src/routes/_layout.svelte
+3 -3
View File
@@ -1,9 +1,9 @@
<script>
import Tailwindcss from "../components/Tailwindcss.svelte";
// import Nav from "../components/Nav.svelte";
import LeftNav from "../components/LeftNav.svelte";
import SideBar from "../components/SideBar.svelte";
import Footer from "../components/Footer.svelte";
import LeftNav from "../components/LeftNav/index.svelte";
import SideBar from "../components/SideBar/index.svelte";
import Footer from "../components/Footer/index.svelte";
export let segment;
</script>
src/routes/ask.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script>
import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
import TextEditor from "../components/TextEditor.svelte";
import TextEditor from "../components/TextEditor/index.svelte";
let questionTitle = "";
let questionDescription = "";
src/routes/index.svelte
+3 -3
View File
@@ -1,9 +1,9 @@
<script>
import { stores } from "@sapper/app";
import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
import Vote from "../components/Vote.svelte";
import Space from "../components/Space.svelte";
import HashTags from "../components/HashTags.svelte";
import Vote from "../components/Vote/index.svelte";
import Space from "../components/Space/index.svelte";
import HashTags from "../components/HashTags/index.svelte";
function getDiscussion(filterBy, allDiscussions) {
switch (filterBy) {