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
+32 -11
View File
@@ -1,14 +1,23 @@
<script context="module">
<script>
import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
import TextEditor from "../components/TextEditor.svelte";
let questionTitle = '';
let questionTags = [];
let questionDescription = '';
let facultyFilterOpened = false;
const faculties = [
'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
];
let checkbox = faculties.reduce((acc, cur) => {
acc[cur] = false;
return acc;
}, {});
function handleFacultyFilters() {
facultyFilterOpened = facultyFilterOpened ? false : true;
}
</script>
<svelte:head>
@@ -17,17 +26,29 @@
<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">
<button class="flex border rounded-lg border-grey py-1 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200">
<span>Факултеты</span> <ChevronDown24 class="ml-2" />
</button>
<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 class="my-1 flex">
<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" />
</button>
{#if facultyFilterOpened}
<div class="w-48 bg-white border border-grey rounded-lg mt-2 py-2 absolute">
{#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"
bind:checked={checkbox[faculty]}
>
<span>{faculty}</span>
</div>
{/each}
</div>
{/each}
{/if}
</div>
<input
class="title rounded-lg border border-1 border-gray p-2 w-full focus:outline-none"