Improve style of QandA

2021-05-30 14:17:08 +03:00
parent ba2412d2b1
commit d22bb7d0e3
7 changed files with 227 additions and 82 deletions
@@ -3,7 +3,7 @@
  import PageNav from "../../../PageNav/index.svelte";
  import CloseButton from "../../../Buttons/Close/index.svelte";
  import TextField from "../../../Form/TextField.svelte";
-  import SendButton from "../../../Buttons/Send/index.svelte";
+  // import SendButton from "../../../Buttons/Send/index.svelte";

  export let handleClose;

@@ -63,17 +63,6 @@
  }
 </script>

-<style>
-  .body {
-    overflow: auto;
-    height: 88%;
-  }
-  .footer {
-    position: absolute;
-    bottom: 0px;
-  }
-</style>
-
 <PageNav title="LiveChat" overidableStyle="padding: 0 10px">
  <div slot="widget">
    <CloseButton onClick={handleClose} />
@@ -83,17 +72,16 @@
 <div bind:this={bodyRef} class="body">
  {#each chats as chat}
    <div class="pl-2 pb-4">
-      <a
-        class="flex items-center no-underline hover:underline text-black"
-        href="#">
+      <div class="flex items-center no-underline hover:underline text-black">
        <img
          alt="Placeholder"
          class="block rounded-full"
          width="24"
          height="20"
-          src={chat.avatar} />
+          src={chat.avatar}
+        />
        <p class="ml-2 text-sm font-bold">{chat.name}</p>
-      </a>
+      </div>
      <article class="prose prose-sm sm:prose pt-2 pl-8">
        {@html marked(chat.message)}
      </article>
@@ -102,11 +90,24 @@
 </div>

 <div class="footer">
-  <div class="flex items-center justify-between leading-none pl-2">
-    <TextField
-      placeholder="Say something"
-      bind:value={message}
-      onKeyDown={handleKeyDown} />
-    <SendButton onClick={handleSend} />
-  </div>
+  <!-- <div class="flex items-center justify-between leading-none pl-2"> -->
+  <TextField
+    placeholder="Say something"
+    bind:value={message}
+    onKeyDown={handleKeyDown}
+  />
+  <!-- <SendButton onClick={handleSend} /> -->
+  <!-- </div> -->
 </div>
+
+<style>
+  .body {
+    overflow: auto;
+    height: 80%;
+  }
+  .footer {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+  }
+</style>
@@ -1,8 +1,92 @@
 <script>
+  import marked from "marked";
+  import CheckmarkOutline20 from "carbon-icons-svelte/lib/CheckmarkOutline20";
  import PageNav from "../../../PageNav/index.svelte";
  import CloseButton from "../../../Buttons/Close/index.svelte";
+  import Vote from "../../../Vote/index.svelte";
+  import TextField from "../../../Form/TextField.svelte";

  export let handleClose;
+  let bodyRef;
+  let question;
+
+  let questions = [
+    {
+      id: 1,
+      name: "Evgeniy",
+      question: "I'am looking at this and it looks great",
+      vote: 1,
+      answered: false,
+    },
+    {
+      id: 2,
+      name: "Sergey Semko",
+      question:
+        "Thanks for the feedback, what do you think about my website. https://rotimibest.com",
+      vote: 4,
+      answered: false,
+    },
+    {
+      id: 3,
+      name: "Vitalii Marushko",
+      question: "Всем привет",
+      vote: 20,
+      answered: false,
+    },
+    {
+      id: 4,
+      name: "Natasha",
+      question: "Привет Виталий",
+      vote: 0,
+      answered: false,
+    },
+  ];
+
+  function handleSend() {
+    if (!question) {
+      return;
+    }
+
+    questions = [
+      ...questions,
+      {
+        id: questions.length,
+        name: "You",
+        question,
+        vote: 0,
+        answered: false,
+      },
+    ];
+
+    question = null;
+
+    setTimeout(() => {
+      bodyRef.scrollTo({
+        top: bodyRef.scrollHeight,
+      });
+    }, 100);
+  }
+
+  function handleMarkAnswered(id) {
+    return () => {
+      console.log(`id`, id);
+      questions = questions
+        .map((question) => {
+          if (question.id === id) {
+            question.answered = !question.answered;
+          }
+
+          return question;
+        })
+        .sort((a, b) => Number(a.answered) - Number(b.answered));
+    };
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      handleSend();
+    }
+  }
 </script>

 <PageNav title="Q/A" overidableStyle="padding: 0 10px">
@@ -10,3 +94,51 @@
    <CloseButton onClick={handleClose} />
  </div>
 </PageNav>
+
+<div bind:this={bodyRef} class="body">
+  {#each questions as question}
+    <div class="flex items-start ml-2 mb-2 mt-2">
+      <Vote bind:value={question.vote} />
+      <div class="ml-2 flex-grow">
+        <p class="text-sm font-bold">{question.name}</p>
+        <article class="prose prose-sm sm:prose">
+          {@html marked(question.question)}
+        </article>
+      </div>
+      <button
+        class={`${question.answered && "active"}`}
+        on:click={handleMarkAnswered(question.id)}
+      >
+        <CheckmarkOutline20 class="carbon-icon" />
+      </button>
+    </div>
+  {/each}
+</div>
+
+<div class="footer">
+  <TextField
+    placeholder="Say something"
+    bind:value={question}
+    onKeyDown={handleKeyDown}
+  />
+</div>
+
+<style lang="scss">
+  .body {
+    overflow: auto;
+    height: 80%;
+
+    & button {
+      display: none;
+    }
+    & div:hover button,
+    & button.active {
+      display: block;
+    }
+  }
+  .footer {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+  }
+</style>
@@ -26,6 +26,60 @@
  }
 </script>

+<div class="root">
+  <div class="apps">
+    <IconButton
+      title="Live Chat"
+      value={APPS_CONSTANTS.APPS.LIVE_CHAT}
+      onClick={handleAppClick}
+      selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}
+    >
+      <SendAlt24 class="carbon-icon" />
+    </IconButton>
+
+    <IconButton
+      title="QandA"
+      value={APPS_CONSTANTS.APPS.QANDA}
+      onClick={handleAppClick}
+      selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}
+    >
+      <Forum24 class="carbon-icon" />
+    </IconButton>
+
+    <IconButton
+      title="Notes"
+      value={APPS_CONSTANTS.APPS.NOTES}
+      onClick={handleAppClick}
+      selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}
+    >
+      <AlignBoxTopLeft24 class="carbon-icon" />
+    </IconButton>
+
+    <IconButton
+      title="Poll"
+      value={APPS_CONSTANTS.APPS.POLL}
+      onClick={handleAppClick}
+      selected={APPS_CONSTANTS.APPS.POLL === selectedApp}
+    >
+      <ChartPie24 class="carbon-icon" />
+    </IconButton>
+  </div>
+
+  {#if !!selectedApp}
+    <div class="app">
+      {#if selectedApp === APPS_CONSTANTS.APPS.QANDA}
+        <QandA {handleClose} />
+      {:else if selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
+        <LiveChat {handleClose} />
+      {:else if selectedApp === APPS_CONSTANTS.APPS.POLL}
+        <Poll {handleClose} />
+      {:else if selectedApp === APPS_CONSTANTS.APPS.NOTES}
+        <Notes {handleClose} />
+      {/if}
+    </div>
+  {/if}
+</div>
+
 <style lang="scss">
  .root {
    height: 95vh;
@@ -52,53 +106,3 @@
    }
  }
 </style>
-
-<div class="root">
-  <div class="apps">
-    <IconButton
-      title="Live Chat"
-      value={APPS_CONSTANTS.APPS.LIVE_CHAT}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}>
-      <SendAlt24 class="carbon-icon" />
-    </IconButton>
-
-    <IconButton
-      title="QandA"
-      value={APPS_CONSTANTS.APPS.QANDA}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}>
-      <Forum24 class="carbon-icon" />
-    </IconButton>
-
-    <IconButton
-      title="Notes"
-      value={APPS_CONSTANTS.APPS.NOTES}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}>
-      <AlignBoxTopLeft24 class="carbon-icon" />
-    </IconButton>
-
-    <IconButton
-      title="Poll"
-      value={APPS_CONSTANTS.APPS.POLL}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.POLL === selectedApp}>
-      <ChartPie24 class="carbon-icon" />
-    </IconButton>
-  </div>
-
-  {#if !!selectedApp}
-    <div class="app">
-      {#if selectedApp === APPS_CONSTANTS.APPS.QANDA}
-        <QandA {handleClose} />
-      {:else if selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
-        <LiveChat {handleClose} />
-      {:else if selectedApp === APPS_CONSTANTS.APPS.POLL}
-        <Poll {handleClose} />
-      {:else if selectedApp === APPS_CONSTANTS.APPS.NOTES}
-        <Notes {handleClose} />
-      {/if}
-    </div>
-  {/if}
-</div>
@@ -60,7 +60,7 @@
            'active'} pl-7 py-2"
          href={lecture.link}
        >
-          <span class="course-counter"> {getLectureNo(index)} </span>
+          <span class="course-counter"> {getLectureNo(index + 1)} </span>
          <span>{lecture.title}</span>
        </a>
      {/each}
@@ -8,9 +8,10 @@
 <label class="block">
  {#if label}<span class="text-gray-700">{label}</span>{/if}
  <input
-    class="form-input mt-1 block w-full rounded-lg"
+    class="form-input p-4 mt-1 block w-full rounded-t-lg bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
    type="text"
    on:keydown={onKeyDown}
    {placeholder}
-    bind:value />
+    bind:value
+  />
 </label>