Upvote update + complete ui of ask question
This commit is contained in:
@@ -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>
|
||||||
@@ -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
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user