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>
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>
src/routes/_layout.svelte
+12 -7
View File
@@ -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 />
src/routes/discussion/[id].svelte
+59 -66
View File
@@ -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>
src/routes/index.svelte
+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>