ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements

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