Ask page

src/components/Tailwindcss.svelte

@@ -2,4 +2,9 @@
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: revert;
+    font-weight: revert;
+  }
 </style>

src/components/TextEditor.svelte

@@ -2,7 +2,8 @@
   import marked from 'marked';
 
   let isWriteMode = true;
-  let value = ``;
+  export let value = ``;
+  export let placeholder = ``;
   const activeClassName = 'border-b-2 border-blue-700';;
 
   const handleTabClick = tab => event => {
@@ -52,7 +53,7 @@
     {#if isWriteMode}
       <textarea
         bind:value
-        placeholder="Предлогайте ваш ответ"
+        placeholder="{placeholder}"
         class="border border-gray rounded-md p-2"
       ></textarea>
     {:else}

src/routes/_layout.svelte

@@ -8,12 +8,12 @@
 </script>
 
 <style>
-	main {
+  main {
-		background-color: white;
+    background-color: white;
-		padding: 15px 2em;
+    padding: 15px 2em;
-		margin: 0 auto;
+    margin: 0 auto;
-		box-sizing: border-box;
+    box-sizing: border-box;
-	}
+  }
 
   @media only screen and (max-width : 768px) {
     main {

src/routes/ask.svelte

@@ -1,7 +1,50 @@
+<script context="module">
+  import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
+	import TextEditor from "../components/TextEditor.svelte";
+
+  let questionTitle = '';
+  let questionTags = [];
+  let questionDescription = '';
+
+  const faculties = [
+    'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
+  ];
+</script>
+
 <svelte:head>
-	<title>About</title>
+	<title>Спросить собшество вопрос</title>
 </svelte:head>
 
-<h1>About this site</h1>
+<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">
+      <span>Факултеты</span> <ChevronDown24 class="ml-2" />
+    </button>
+    <div>
+      {#each faculties as faculty}
+        <div>
+          <input type="checkbox" class="appearance-none checked:bg-blue-600 checked:border-transparent">
+          <span>{faculty}</span>
+        </div>
+      {/each}
+    </div>
+    <input
+      class="title rounded-lg border border-1 border-gray p-1 w-full"
+      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>
 
-<p>This is the 'about' page. There's not much here.</p>
+  <TextEditor
+    value="{questionDescription}"
+    placeholder="Задайте вопрос или начните разговор"
+  />
+</div>

src/routes/discussion/[id].svelte

@@ -1,32 +1,30 @@
 <script context="module">
-    import marked from 'marked'
+  import marked from 'marked'
-    import Vote from "../../components/Vote.svelte";
+  import Vote from "../../components/Vote.svelte";
-    import HashTags from "../../components/HashTags.svelte";
+  import HashTags from "../../components/HashTags.svelte";
-    import TextEditor from "../../components/TextEditor.svelte";
+  import TextEditor from "../../components/TextEditor.svelte";
-    import CheckmarkOutline20 from "carbon-icons-svelte/lib/CheckmarkOutline20";
+  import CheckmarkOutline20 from "carbon-icons-svelte/lib/CheckmarkOutline20";
+
+  let userComment = '';
 
 	export async function preload({ params }) {
-		// the `id` parameter is available because
+    // the `id` parameter is available because
-		// this file is called [id].svelte
+    // this file is called [id].svelte
     const res = await this.fetch(`discussion/${params.id}.json`);
-		const data = await res.json();
+    const data = await res.json();
 
-		if (res.status === 200) {
+    if (res.status === 200) {
-			return { discussion: data };
+      return { discussion: data };
-		} else {
+    } else {
-			this.error(res.status, data.message);
+      this.error(res.status, data.message);
-		}
+    }
-	}
+  }
 </script>
 
 <script>
 	export let discussion;
 </script>
 
-<style>
-
-</style>
-
 <svelte:head>
 	<title>{discussion.title}</title>
 </svelte:head>
@@ -37,27 +35,27 @@
         <h1 class="text-4xl mb-8">{discussion.title}</h1>
     </div>
     <div class="my-1 px-1 rounded-lg border border-1 border-gray">
-        <header class="flex items-center justify-between leading-none p-2">
+      <header class="flex items-center justify-between leading-none p-2">
-            <a class="flex items-center no-underline hover:underline text-black" href="/">
+        <a class="flex items-center no-underline hover:underline text-black" href="/">
-                <img alt="Placeholder" class="block rounded-full" src="https://picsum.photos/32/32/?random">
+          <img alt="Placeholder" class="block rounded-full" src="https://picsum.photos/32/32/?random">
-                <p class="ml-2 text-sm">
+          <p class="ml-2 text-sm">
-                    {discussion.author.name}
+            {discussion.author.name}
-                </p>
+          </p>
-                <p class="ml-2 text-sm text-gray-500">
+          <p class="ml-2 text-sm text-gray-500">
-                    12h ago
+            12h ago
-                </p>
+          </p>
-            </a>
+        </a>
-        </header>
+      </header>
-        <section class="prose prose-sm sm:prose p-2">
+      <section class="prose prose-sm sm:prose p-2">
-            {@html marked(discussion.question)}
+        {@html marked(discussion.question)}
-        </section>
+      </section>
-        <section class="p-2">
+      <section class="p-2">
-            <HashTags tags={discussion.tags}/>
+        <HashTags tags={discussion.tags}/>
-        </section>
+      </section>
     </div>
 
     <div class="my-8">
-        <strong>{discussion.comments.length} ответы</strong>
+      <strong>{discussion.comments.length} ответы</strong>
     </div>
 
     {#each discussion.comments as comment}
@@ -91,5 +89,8 @@
     {/each}
 
     <hr>
-    <TextEditor />
+    <TextEditor
+      value="{userComment}"
+      placeholder="Предлогайте ваш ответ"
+    />
 </div>