Restructure ui of app

src/routes/ask.svelte

@@ -1,19 +1,28 @@
 <script>
   import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
-	import TextEditor from "../components/TextEditor.svelte";
+  import TextEditor from "../components/TextEditor.svelte";
 
-  let questionTitle = '';
-  let questionTags = [];
-  let questionDescription = '';
+  let questionTitle = "";
+  let questionDescription = "";
   let facultyFilterOpened = false;
 
   const faculties = [
-    'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
+    "ИЭКСУ",
+    "ИМБТ",
+    "ИМИ",
+    "ИПТДМ",
+    "ИИИР",
+    "ГФ",
+    "ХТФ",
+    "ИДЗО",
+    "УИИ",
+    "УНИ",
   ];
   let checkbox = faculties.reduce((acc, cur) => {
     acc[cur] = false;
     return acc;
   }, {});
+  $: clickedTotal = Object.values(checkbox).filter((box) => !!box).length;
 
   function handleFacultyFilters() {
     facultyFilterOpened = facultyFilterOpened ? false : true;
@@ -21,29 +30,34 @@
 </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 flex">
-    <div class="mr-1">
+  <div class="main-title my-1 flex">
+    <div class="faculty-filter 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 class="flex flex-row"
+          >Факултеты <span>&nbsp;({clickedTotal})</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">
+        <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}
@@ -60,12 +74,23 @@
       type="text"
       name="discussion[title]"
       id="discussion_title"
-      value="{questionTitle}"
-    >
+      value={questionTitle}
+    />
   </div>
 
   <TextEditor
-    value="{questionDescription}"
+    value={questionDescription}
     placeholder="Задайте вопрос или начните разговор"
   />
-</div>
+</div>
+
+<style>
+  @media only screen and (max-width: 1002px) {
+    .faculty-filter {
+      margin-bottom: 10px;
+    }
+    .main-title {
+      flex-direction: column;
+    }
+  }
+</style>