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
+28 -8
View File
@@ -1,5 +1,6 @@
<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>
@@ -9,6 +10,10 @@
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;
@@ -51,12 +56,23 @@
<nav> <nav>
<ul> <ul>
<li><a class="block" aria-current="{(segment === undefined || segment === 'discussion') ? 'page' : undefined}" href=".">UniDiscuss</a></li> <li>
<a
class="block"
aria-current={segment === undefined || segment === 'discussion' ? 'page' : undefined}
href=".">UniDiscuss</a>
</li>
</ul> </ul>
<Space /> <Space />
<ul> <ul class="flex items-center">
<li> <li>
<a class="flex items-center" href="https://t.me/unidiscuss" target="_blank"> <NewQuestion />
</li>
<li>
<a
class="flex items-center"
href="https://t.me/unidiscuss"
target="_blank">
<img <img
alt="File:Telegram logo.svg" alt="File:Telegram logo.svg"
class="mr-1" class="mr-1"
@@ -66,11 +82,15 @@
height="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" 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-width="25"
data-file-height="25" data-file-height="25" />
>
<span>Канал</span> <span>Канал</span>
</a> </a>
</li> </li>
<li><a class="block" aria-current="{segment === 'profile' ? 'page' : undefined}" href="profile">Войти</a></li> <li>
<a
class="block"
aria-current={segment === 'profile' ? 'page' : undefined}
href="profile">Войти</a>
</li>
</ul> </ul>
</nav> </nav>
src/routes/_layout.svelte
+8 -3
View File
@@ -1,6 +1,6 @@
<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";
@@ -13,6 +13,11 @@
padding: 15px 2em; padding: 15px 2em;
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
/* max-width: 900px; */
}
:global(a:hover) {
text-decoration: underline;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@@ -29,7 +34,7 @@
<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>
src/routes/discussion/[id].svelte
+23 -30
View File
@@ -1,11 +1,11 @@
<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
@@ -31,19 +31,20 @@
<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>
<p class="ml-2 text-sm text-gray-500">12h ago</p>
</a> </a>
</header> </header>
<section class="prose prose-sm sm:prose p-2"> <section class="prose prose-sm sm:prose p-2">
@@ -54,29 +55,24 @@
</section> </section>
</div> </div>
<div class="my-8"> <div class="my-8"><strong>{discussion.comments.length} ответы</strong></div>
<strong>{discussion.comments.length} ответы</strong>
</div>
{#each discussion.comments as comment} {#each discussion.comments as comment}
<div class="my-5 px-1 flex items-start"> <div class="my-5 px-1 flex items-start">
<Vote value="{comment.votes}" /> <Vote value={comment.votes} />
<div class="w-full rounded-lg border border-1 border-gray"> <div class="w-full 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
class="flex items-center no-underline hover:underline text-black"
href="/">
<img <img
alt="Placeholder" alt="Placeholder"
class="block rounded-full" class="block rounded-full"
width="24" width="24"
height="20" height="20"
src="{comment.avatar}" src={comment.avatar} />
> <p class="ml-2 text-sm">{comment.name}</p>
<p class="ml-2 text-sm"> <p class="ml-2 text-sm text-gray-500">12h ago</p>
{comment.name}
</p>
<p class="ml-2 text-sm text-gray-500">
12h ago
</p>
</a> </a>
<CheckmarkOutline20 /> <CheckmarkOutline20 />
@@ -88,9 +84,6 @@
</div> </div>
{/each} {/each}
<hr> <hr />
<TextEditor <TextEditor value={userComment} placeholder="Предлогайте ваш ответ" />
value="{userComment}"
placeholder="Предлогайте ваш ответ"
/>
</div> </div>
src/routes/index.svelte
+81 -63
View File
@@ -2,57 +2,60 @@
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,
@@ -60,89 +63,78 @@
}, },
{ {
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 {
@@ -161,3 +153,29 @@
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>