Upvote update + complete ui of ask question

This commit is contained in:
rotimi_best
2021-01-21 22:23:23 +02:00
parent 31e3d301fd
commit aa3048351b
3 changed files with 123 additions and 12 deletions
+83
View File
@@ -0,0 +1,83 @@
<script context="module">
import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
import TextEditor from "./TextEditor.svelte";
let questionTitle = '';
let questionTags = [];
let questionDescription = '';
let facultyFilterOpened = true;
const faculties = [
'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
];
function handleFacultyFilters() {
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' }
];
function handleClick() {
things = things.slice(1);
console.log('things', things)
}
</script>
<svelte:head>
<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>
{#each things as thing}
<p style="color: {thing.color}">{thing.id}</p>
{/each}
<button
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" />
</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">
<span>{faculty}</span>
</div>
{/each}
</div>
{/if}
</div>
<input
class="title rounded-lg border border-1 border-gray p-2 w-full focus:outline-none"
error="false"
autocomplete="off"
placeholder="Title"
aria-label="Title"
aria-describedby="title-input-validation"
type="text"
name="discussion[title]"
id="discussion_title"
value="{questionTitle}"
>
</div>
<TextEditor
value="{questionDescription}"
placeholder="Задайте вопрос или начните разговор"
/>
</div>
+8 -1
View File
@@ -3,10 +3,17 @@
import Chip from "./Chip.svelte"; import Chip from "./Chip.svelte";
export let value = 0; export let value = 0;
function upVote() {
value = value + 1;
}
</script> </script>
<div class="vote"> <div
class="vote border-none cursor-pointer"
on:click={upVote}
>
<ArrowUp16 /> <ArrowUp16 />
<Chip value="{value}" /> <Chip value="{value}" />
</div> </div>
+26 -5
View File
@@ -1,14 +1,23 @@
<script context="module"> <script>
import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24"; import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
import TextEditor from "../components/TextEditor.svelte"; import TextEditor from "../components/TextEditor.svelte";
let questionTitle = ''; let questionTitle = '';
let questionTags = []; let questionTags = [];
let questionDescription = ''; let questionDescription = '';
let facultyFilterOpened = false;
const faculties = [ const faculties = [
'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ' 'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
]; ];
let checkbox = faculties.reduce((acc, cur) => {
acc[cur] = false;
return acc;
}, {});
function handleFacultyFilters() {
facultyFilterOpened = facultyFilterOpened ? false : true;
}
</script> </script>
<svelte:head> <svelte:head>
@@ -17,18 +26,30 @@
<div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20"> <div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
<h2 class="pb-2">Спросить собшество вопрос</h2> <h2 class="pb-2">Спросить собшество вопрос</h2>
<div class="my-1 px-1"> <div class="my-1 flex">
<button class="flex border rounded-lg border-grey py-1 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200"> <div class="mr-1">
<button
class="flex border rounded-lg border-grey py-2 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200 relative"
on:click={handleFacultyFilters}
>
<span>Факултеты</span> <ChevronDown24 class="ml-2" /> <span>Факултеты</span> <ChevronDown24 class="ml-2" />
</button> </button>
<div class="w-48 bg-white border border-grey rounded-lg mt-2 py-2">
{#if facultyFilterOpened}
<div class="w-48 bg-white border border-grey rounded-lg mt-2 py-2 absolute">
{#each faculties as faculty} {#each faculties as faculty}
<div class="block px-4 py-2 border-b"> <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"
bind:checked={checkbox[faculty]}
>
<span>{faculty}</span> <span>{faculty}</span>
</div> </div>
{/each} {/each}
</div> </div>
{/if}
</div>
<input <input
class="title rounded-lg border border-1 border-gray p-2 w-full focus:outline-none" class="title rounded-lg border border-1 border-gray p-2 w-full focus:outline-none"
error="false" error="false"