UI improvements
This commit is contained in:
rotimi_best
@@ -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 />
|
||||
|
||||
@@ -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>
|
||||
|
||||
+89
-71
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user