From da82c3f561802f698c6f395a8e6c836e57372284 Mon Sep 17 00:00:00 2001
From: rotimi_best <best@classroomio.com>
Date: Sat, 3 Apr 2021 16:43:02 +0300
Subject: [PATCH] UI improvements

---
 src/components/Nav.svelte         |  70 ++++++++-----
 src/routes/_layout.svelte         |  19 ++--
 src/routes/discussion/[id].svelte | 125 +++++++++++------------
 src/routes/index.svelte           | 160 +++++++++++++++++-------------
 4 files changed, 205 insertions(+), 169 deletions(-)

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 3555636a..d85554e7 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -1,14 +1,19 @@
 <script>
 	import Space from "./Space.svelte";
+	import NewQuestion from "./NewQuestion.svelte";
 	export let segment;
 </script>
 
 <style>
 	nav {
-		border-bottom: 1px solid rgba(255,62,0,0.1);
+		border-bottom: 1px solid rgba(255, 62, 0, 0.1);
 		font-weight: 300;
 		padding: 0 1em;
 		display: flex;
+		position: sticky;
+		top: 0px;
+		background-color: #fff;
+		z-index: 1;
 	}
 
 	ul {
@@ -18,7 +23,7 @@
 
 	/* clearfix */
 	ul::after {
-		content: '';
+		content: "";
 		display: block;
 		clear: both;
 	}
@@ -35,7 +40,7 @@
 
 	[aria-current]::after {
 		position: absolute;
-		content: '';
+		content: "";
 		width: calc(100% - 1em);
 		height: 2px;
 		background-color: #3182ce;
@@ -50,27 +55,42 @@
 </style>
 
 <nav>
-  <ul>
-    <li><a class="block" aria-current="{(segment === undefined || segment === 'discussion') ? 'page' : undefined}" href=".">UniDiscuss</a></li>
-  </ul>
-  <Space/>
 	<ul>
-    <li>
-      <a class="flex items-center" href="https://t.me/unidiscuss" target="_blank">
-        <img
-          alt="File:Telegram logo.svg"
-          class="mr-1"
-          src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png"
-          decoding="async"
-          width="25"
-          height="25"
-          srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1024px-Telegram_logo.svg.png 2x"
-          data-file-width="25"
-          data-file-height="25"
-        >
-        <span>Канал</span>
-      </a>
-    </li>
-    <li><a class="block" aria-current="{segment === 'profile' ? 'page' : undefined}" href="profile">Войти</a></li>
-  </ul>
+		<li>
+			<a
+				class="block"
+				aria-current={segment === undefined || segment === 'discussion' ? 'page' : undefined}
+				href=".">UniDiscuss</a>
+		</li>
+	</ul>
+	<Space />
+	<ul class="flex items-center">
+		<li>
+			<NewQuestion />
+		</li>
+		<li>
+			<a
+				class="flex items-center"
+				href="https://t.me/unidiscuss"
+				target="_blank">
+				<img
+					alt="File:Telegram logo.svg"
+					class="mr-1"
+					src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png"
+					decoding="async"
+					width="25"
+					height="25"
+					srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1024px-Telegram_logo.svg.png 2x"
+					data-file-width="25"
+					data-file-height="25" />
+				<span>Канал</span>
+			</a>
+		</li>
+		<li>
+			<a
+				class="block"
+				aria-current={segment === 'profile' ? 'page' : undefined}
+				href="profile">Войти</a>
+		</li>
+	</ul>
 </nav>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index eba050a8..70b8cbc6 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,10 +1,10 @@
 <script>
-	import Tailwindcss from '../components/Tailwindcss.svelte';
-	import Nav from '../components/Nav.svelte';
+  import Tailwindcss from "../components/Tailwindcss.svelte";
+  import Nav from "../components/Nav.svelte";
   import SideBar from "../components/SideBar.svelte";
   import Footer from "../components/Footer.svelte";
 
-	export let segment;
+  export let segment;
 </script>
 
 <style>
@@ -13,9 +13,14 @@
     padding: 15px 2em;
     margin: 0 auto;
     box-sizing: border-box;
+    /* max-width: 900px; */
   }
 
-  @media only screen and (max-width : 768px) {
+  :global(a:hover) {
+    text-decoration: underline;
+  }
+
+  @media only screen and (max-width: 768px) {
     main {
       flex-direction: column;
       align-items: center;
@@ -26,11 +31,11 @@
 
 <Tailwindcss />
 
-<Nav {segment}/>
+<Nav {segment} />
 
 <main class="flex max-w-screen-xl">
-  <slot></slot>
-	<SideBar />
+  <slot />
+  <SideBar />
 </main>
 
 <Footer />
diff --git a/src/routes/discussion/[id].svelte b/src/routes/discussion/[id].svelte
index 9b7309af..59cd5af8 100644
--- a/src/routes/discussion/[id].svelte
+++ b/src/routes/discussion/[id].svelte
@@ -1,13 +1,13 @@
 <script context="module">
-  import marked from 'marked'
+  import marked from "marked";
   import Vote from "../../components/Vote.svelte";
   import HashTags from "../../components/HashTags.svelte";
   import TextEditor from "../../components/TextEditor.svelte";
   import CheckmarkOutline20 from "carbon-icons-svelte/lib/CheckmarkOutline20";
 
-  let userComment = '';
+  let userComment = "";
 
-	export async function preload({ params }) {
+  export async function preload({ params }) {
     // the `id` parameter is available because
     // this file is called [id].svelte
     const res = await this.fetch(`discussion/${params.id}.json`);
@@ -22,75 +22,68 @@
 </script>
 
 <script>
-	export let discussion;
+  export let discussion;
 </script>
 
 <svelte:head>
-	<title>{discussion.title}</title>
+  <title>{discussion.title}</title>
 </svelte:head>
 
 <div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
-    <div class="flex items-start">
-        <Vote value="{discussion.votes}" />
-        <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">
-        <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">
-          <p class="ml-2 text-sm">
-            {discussion.author.name}
-          </p>
-          <p class="ml-2 text-sm text-gray-500">
-            12h ago
-          </p>
-        </a>
-      </header>
-      <section class="prose prose-sm sm:prose p-2">
-        {@html marked(discussion.question)}
-      </section>
-      <section class="p-2">
-        <HashTags tags={discussion.tags}/>
-      </section>
+  <div class="flex items-start">
+    <Vote value={discussion.votes} />
+    <h2 class="text-3xl mb-8">{discussion.title}</h2>
+  </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">
+      <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" />
+        <p class="ml-2 text-sm">{discussion.author.name}</p>
+        <p class="ml-2 text-sm text-gray-500">12h ago</p>
+      </a>
+    </header>
+    <section class="prose prose-sm sm:prose p-2">
+      {@html marked(discussion.question)}
+    </section>
+    <section class="p-2">
+      <HashTags tags={discussion.tags} />
+    </section>
+  </div>
+
+  <div class="my-8"><strong>{discussion.comments.length} ответы</strong></div>
+
+  {#each discussion.comments as comment}
+    <div class="my-5 px-1 flex items-start">
+      <Vote value={comment.votes} />
+      <div class="w-full rounded-lg border border-1 border-gray">
+        <header class="flex items-center justify-between leading-none p-2">
+          <a
+            class="flex items-center no-underline hover:underline text-black"
+            href="/">
+            <img
+              alt="Placeholder"
+              class="block rounded-full"
+              width="24"
+              height="20"
+              src={comment.avatar} />
+            <p class="ml-2 text-sm">{comment.name}</p>
+            <p class="ml-2 text-sm text-gray-500">12h ago</p>
+          </a>
+
+          <CheckmarkOutline20 />
+        </header>
+        <article class="prose prose-sm sm:prose p-2">
+          {@html marked(comment.comment)}
+        </article>
+      </div>
     </div>
+  {/each}
 
-    <div class="my-8">
-      <strong>{discussion.comments.length} ответы</strong>
-    </div>
-
-    {#each discussion.comments as comment}
-        <div class="my-5 px-1 flex items-start">
-            <Vote value="{comment.votes}" />
-            <div class="w-full rounded-lg border border-1 border-gray">
-              <header class="flex items-center justify-between leading-none p-2">
-                <a class="flex items-center no-underline hover:underline text-black" href="/">
-                  <img
-                    alt="Placeholder"
-                    class="block rounded-full"
-                    width="24"
-                    height="20"
-                    src="{comment.avatar}"
-                  >
-                  <p class="ml-2 text-sm">
-                    {comment.name}
-                  </p>
-                  <p class="ml-2 text-sm text-gray-500">
-                    12h ago
-                  </p>
-                </a>
-
-                <CheckmarkOutline20 />
-              </header>
-              <article class="prose prose-sm sm:prose p-2">
-                  {@html marked(comment.comment)}
-              </article>
-            </div>
-        </div>
-    {/each}
-
-    <hr>
-    <TextEditor
-      value="{userComment}"
-      placeholder="Предлогайте ваш ответ"
-    />
+  <hr />
+  <TextEditor value={userComment} placeholder="Предлогайте ваш ответ" />
 </div>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 02243edd..a456d390 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,148 +1,140 @@
 <script>
-  import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
+	import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
 	import Vote from "../components/Vote.svelte";
 	import Space from "../components/Space.svelte";
-	import NewQuestion from "../components/NewQuestion.svelte";
 	import HashTags from "../components/HashTags.svelte";
 
 	const discussions = [
 		{
 			id: 1,
-			title: 'How do I pass Anicimov?',
+			title: "How do I pass Anicimov?",
 			author: {
-				name: 'rotimibest',
+				name: "rotimibest",
 			},
-			tags: [
-				'ибэит', 'икс'
-			],
+			tags: ["ибэит", "икс"],
 			answered: false,
 			comments: 10,
 			votes: 10,
 		},
 		{
 			id: 2,
-			title: 'Where do I find the nearest restaurant. Where do I find the nearest restaurant?. Where do I find the nearest restaurant? Where do I find the nearest restaurant?',
+			title:
+				"Where do I find the nearest restaurant. Where do I find the nearest restaurant?. Where do I find the nearest restaurant? Where do I find the nearest restaurant?",
 			author: {
-				name: 'attronaldo',
+				name: "attronaldo",
 			},
-			tags: [
-				'иибрт', 'иее'
-			],
+			tags: ["иибрт", "иее"],
 			answered: false,
 			comments: 2,
 			votes: 2,
 		},
 		{
 			id: 3,
-			title: 'Who is Nikolenko?',
+			title: "Who is Nikolenko?",
 			author: {
-				name: 'donald',
+				name: "donald",
 			},
-			tags: [
-				'ибэит', 'иее', 'иибрт', 'ИПИГ'
-			],
+			tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
 			answered: false,
 			comments: 10,
 			votes: 10,
 		},
 		{
 			id: 4,
-			title: 'Archive discussion button',
+			title: "Archive discussion button",
 			author: {
-				name: 'acharlesvv',
+				name: "acharlesvv",
 			},
 			tags: [
-				'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
+				"ИЭКСУ",
+				"ИМБТ",
+				"ИМИ",
+				"ИПТДМ",
+				"ИИИР",
+				"ГФ",
+				"ХТФ",
+				"ИДЗО",
+				"УИИ",
+				"УНИ",
 			],
 			answered: false,
 			comments: 15,
 			votes: 15,
-    },
-    {
+		},
+		{
 			id: 1,
-			title: 'How do I pass Anicimov?',
+			title: "How do I pass Anicimov?",
 			author: {
-				name: 'rotimibest',
+				name: "rotimibest",
 			},
-			tags: [
-				'ибэит', 'икс'
-			],
+			tags: ["ибэит", "икс"],
 			answered: false,
 			comments: 7,
 			votes: 7,
 		},
 		{
 			id: 2,
-			title: 'Where do I find the nearest restaurant?',
+			title: "Where do I find the nearest restaurant?",
 			author: {
-				name: 'attronaldo',
+				name: "attronaldo",
 			},
-			tags: [
-				'иибрт', 'иее'
-			],
+			tags: ["иибрт", "иее"],
 			answered: false,
 			comments: 4,
 			votes: 4,
 		},
 		{
 			id: 3,
-			title: 'Who is Nikolenko?',
+			title: "Who is Nikolenko?",
 			author: {
-				name: 'donald',
+				name: "donald",
 			},
-			tags: [
-				'ибэит', 'иее', 'иибрт', 'ИПИГ'
-			],
+			tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
 			answered: false,
 			comments: 100,
 			votes: 100,
 		},
 		{
 			id: 4,
-			title: 'Archive discussion button',
+			title: "Archive discussion button",
 			author: {
-				name: 'acharlesvv',
+				name: "acharlesvv",
 			},
 			tags: [
-				'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
+				"ИЭКСУ",
+				"ИМБТ",
+				"ИМИ",
+				"ИПТДМ",
+				"ИИИР",
+				"ГФ",
+				"ХТФ",
+				"ИДЗО",
+				"УИИ",
+				"УНИ",
 			],
 			answered: false,
 			comments: 5,
 			votes: 5,
-		}
+		},
 	];
 </script>
 
-<svelte:head>
-	<title>Unidiscuss - Help students in your university</title>
-</svelte:head>
-<div class="md:w-3/4 mx-auto md:mb-20 md:pr-5">
-  <div class="flex justify-end mb-5">
-    <NewQuestion />
-  </div>
-	{#each discussions as discussion}
-		<div class="discussion-box">
-      <Vote value="{discussion.votes}" />
-			<div class="discussion-topic-author">
-				<h4><a rel="prefetch" href="discussion/{discussion.id}">{discussion.title}</a></h4>
-				<span>{discussion.author.name} asked 1 day ago</span>
-				<HashTags tags={discussion.tags}/>
-      </div>
-      <Space />
-      <div class="flex items-center">
-        <AddComment20 />
-        <span>{discussion.comments}</span>
-      </div>
-		</div>
-	{/each}
-</div>
-
 <style>
+	.root {
+		max-width: 600px;
+	}
+
+	.root .title {
+		font-size: 20px;
+		margin-left: 10px;
+	}
 	.discussion-box {
-		border-top: 1px solid #eaecef;
+		border: 1px solid #eaecef;
 		display: flex;
 		align-items: flex-start;
 		padding: 16px;
+		border-radius: 10px;
+		margin: 20px auto;
 	}
 
 	h4 {
@@ -153,11 +145,37 @@
 		margin: 0;
 	}
 
-  .discussion-topic-author {
-    margin-right: 20px;
-  }
-	.discussion-topic-author span{
+	.discussion-topic-author {
+		margin-right: 20px;
+	}
+	.discussion-topic-author span {
 		color: #586069;
 		font-size: 12px;
-  }
+	}
 </style>
+
+<svelte:head>
+	<title>Unidiscuss - Help students in your university</title>
+</svelte:head>
+<div class="root md:w-3/4 mx-auto md:mb-20 md:pr-5">
+	<h4 class="title">Разговоры</h4>
+	{#each discussions as discussion}
+		<div class="discussion-box">
+			<Vote value={discussion.votes} />
+			<div class="discussion-topic-author">
+				<h4>
+					<a
+						rel="prefetch"
+						href="discussion/{discussion.id}">{discussion.title}</a>
+				</h4>
+				<span>{discussion.author.name} asked 1 day ago</span>
+				<HashTags tags={discussion.tags} />
+			</div>
+			<Space />
+			<div class="flex items-center">
+				<AddComment20 />
+				<span>{discussion.comments}</span>
+			</div>
+		</div>
+	{/each}
+</div>