UI improvements

This commit is contained in:
rotimi_best
2021-04-03 16:43:02 +03:00
parent ae501ac5b4
commit da82c3f561
4 changed files with 205 additions and 169 deletions
+89 -71
View File
@@ -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>