Restructure ui of app
This commit is contained in:
Ibitoye Rotimi Best
@@ -0,0 +1,127 @@
|
||||
<script>
|
||||
import NewQuestion from "./NewQuestion.svelte";
|
||||
import Home32 from "carbon-icons-svelte/lib/Home32";
|
||||
import SendAlt32 from "carbon-icons-svelte/lib/SendAlt32";
|
||||
import UserAvatar32 from "carbon-icons-svelte/lib/UserAvatar32";
|
||||
export let segment;
|
||||
let navClass = "";
|
||||
|
||||
$: navClass = ["discussion"].includes(segment) ? "hide" : "";
|
||||
</script>
|
||||
|
||||
<nav class={navClass}>
|
||||
<ul class="flex items-start flex-col justify-evenly">
|
||||
<div class="logo">
|
||||
<a href="/" title="Go to univapros Home" id="logo" data-hveid="8"
|
||||
><img
|
||||
src="/logo-192.png"
|
||||
alt="Univapros logo"
|
||||
height="48"
|
||||
width="48"
|
||||
data-atf="1"
|
||||
/></a
|
||||
>
|
||||
</div>
|
||||
<li>
|
||||
<a
|
||||
class="block"
|
||||
aria-current={segment === undefined || segment === "discussion"
|
||||
? "page"
|
||||
: undefined}
|
||||
href="."><Home32 class="carbon-icon" /><span>Home</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="block"
|
||||
aria-current={segment === "profile" ? "page" : undefined}
|
||||
href="profile"
|
||||
><UserAvatar32 class="carbon-icon" /> <span>Профиль</span></a
|
||||
>
|
||||
</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><SendAlt32 class="carbon-icon" /> Канал</span> -->
|
||||
<SendAlt32 class="carbon-icon" /> <span>Канал</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="new-question">
|
||||
<NewQuestion />
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 20%;
|
||||
padding-top: 10px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* clearfix */
|
||||
ul::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
li.new-question {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
padding: 1em 0.5em;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:global(svg.carbon-icon) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
[aria-current] :global(svg.carbon-icon) {
|
||||
fill: #3182ce;
|
||||
}
|
||||
|
||||
[aria-current] {
|
||||
color: #3182ce;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1002px) {
|
||||
nav.hide {
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
align-items: center;
|
||||
}
|
||||
li a span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +1,31 @@
|
||||
<script>
|
||||
import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
|
||||
|
||||
import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
|
||||
</script>
|
||||
|
||||
<a
|
||||
class="root bg-blue-700 hover:bg-blue-900 text-white font-bold py-3 px-8 rounded inline-flex items-center float-right"
|
||||
href="/ask"
|
||||
>
|
||||
<AddComment20 class="carbon-icon fill-current w-4 h-4 mr-2" />
|
||||
<span>Спросить</span>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
height: fit-content;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1002px) {
|
||||
a {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
a span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a :global(svg.carbon-icon) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<button class="root bg-blue-700 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded inline-flex items-center float-right">
|
||||
<AddComment20 class="fill-current w-4 h-4 mr-2" />
|
||||
<a href="/ask">Спросить</a>
|
||||
</button>
|
||||
@@ -2,34 +2,27 @@
|
||||
// your script goes here
|
||||
const contributors = [
|
||||
{
|
||||
name: 'Koskting'
|
||||
name: "Koskting",
|
||||
},
|
||||
{
|
||||
name: 'Koskting'
|
||||
name: "Koskting",
|
||||
},
|
||||
{
|
||||
name: 'Koskting'
|
||||
name: "Koskting",
|
||||
},
|
||||
{
|
||||
name: 'Koskting'
|
||||
name: "Koskting",
|
||||
},
|
||||
{
|
||||
name: 'Koskting'
|
||||
name: "Koskting",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sidebar-root {
|
||||
width: 250px;
|
||||
min-width: 250px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- markup (zero or more items) goes here -->
|
||||
<div class="sidebar-root p-5 w-100 border border-1 border-gray rounded-md md:mt-12">
|
||||
<div
|
||||
class="sidebar-root p-5 w-100 border border-1 border-gray rounded-md md:mt-12"
|
||||
>
|
||||
<h4 class="border-b border-gray text-base font-bold pb-1">Самые полезные</h4>
|
||||
{#each contributors as contributor}
|
||||
<a class="flex pt-3" href="/{contributor.name}">
|
||||
@@ -39,8 +32,23 @@
|
||||
width="23"
|
||||
height="20"
|
||||
alt="@jamesmosier"
|
||||
/>
|
||||
<span class="hover:text-blue-700 hover:underline">{contributor.name}</span
|
||||
>
|
||||
<span class="hover:text-blue-700 hover:underline">{contributor.name}</span>
|
||||
</a>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.sidebar-root {
|
||||
width: 250px;
|
||||
min-width: 250px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1002px) {
|
||||
.sidebar-root {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+14
-20
@@ -1,12 +1,25 @@
|
||||
<script>
|
||||
import Tailwindcss from "../components/Tailwindcss.svelte";
|
||||
import Nav from "../components/Nav.svelte";
|
||||
// import Nav from "../components/Nav.svelte";
|
||||
import LeftNav from "../components/LeftNav.svelte";
|
||||
import SideBar from "../components/SideBar.svelte";
|
||||
import Footer from "../components/Footer.svelte";
|
||||
|
||||
export let segment;
|
||||
</script>
|
||||
|
||||
<Tailwindcss />
|
||||
|
||||
<!-- <Nav {segment} /> -->
|
||||
|
||||
<main class="flex max-w-screen-xl">
|
||||
<LeftNav {segment} />
|
||||
<slot />
|
||||
<SideBar />
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
main {
|
||||
background-color: white;
|
||||
@@ -19,23 +32,4 @@
|
||||
:global(a:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
main {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* padding: 10px; */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<Tailwindcss />
|
||||
|
||||
<Nav {segment} />
|
||||
|
||||
<main class="flex max-w-screen-xl">
|
||||
<slot />
|
||||
<SideBar />
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
+40
-15
@@ -1,19 +1,28 @@
|
||||
<script>
|
||||
import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
|
||||
import TextEditor from "../components/TextEditor.svelte";
|
||||
import TextEditor from "../components/TextEditor.svelte";
|
||||
|
||||
let questionTitle = '';
|
||||
let questionTags = [];
|
||||
let questionDescription = '';
|
||||
let questionTitle = "";
|
||||
let questionDescription = "";
|
||||
let facultyFilterOpened = false;
|
||||
|
||||
const faculties = [
|
||||
'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
|
||||
"ИЭКСУ",
|
||||
"ИМБТ",
|
||||
"ИМИ",
|
||||
"ИПТДМ",
|
||||
"ИИИР",
|
||||
"ГФ",
|
||||
"ХТФ",
|
||||
"ИДЗО",
|
||||
"УИИ",
|
||||
"УНИ",
|
||||
];
|
||||
let checkbox = faculties.reduce((acc, cur) => {
|
||||
acc[cur] = false;
|
||||
return acc;
|
||||
}, {});
|
||||
$: clickedTotal = Object.values(checkbox).filter((box) => !!box).length;
|
||||
|
||||
function handleFacultyFilters() {
|
||||
facultyFilterOpened = facultyFilterOpened ? false : true;
|
||||
@@ -21,29 +30,34 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Спросить собшество вопрос</title>
|
||||
<title>Спросить собшество вопрос</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
|
||||
<h2 class="pb-2">Спросить собшество вопрос</h2>
|
||||
<div class="my-1 flex">
|
||||
<div class="mr-1">
|
||||
<div class="main-title my-1 flex">
|
||||
<div class="faculty-filter mr-1">
|
||||
<button
|
||||
class="flex border rounded-lg border-grey py-2 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200 relative"
|
||||
on:click={handleFacultyFilters}
|
||||
>
|
||||
<span>Факултеты</span> <ChevronDown24 class="ml-2" />
|
||||
<span class="flex flex-row"
|
||||
>Факултеты <span> ({clickedTotal})</span></span
|
||||
>
|
||||
<ChevronDown24 class="ml-2" />
|
||||
</button>
|
||||
|
||||
{#if facultyFilterOpened}
|
||||
<div class="w-48 bg-white border border-grey rounded-lg mt-2 py-2 absolute">
|
||||
<div
|
||||
class="w-48 bg-white border border-grey rounded-lg mt-2 py-2 absolute"
|
||||
>
|
||||
{#each faculties as faculty}
|
||||
<div class="block px-4 py-2 border-b">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer"
|
||||
bind:checked={checkbox[faculty]}
|
||||
>
|
||||
/>
|
||||
<span>{faculty}</span>
|
||||
</div>
|
||||
{/each}
|
||||
@@ -60,12 +74,23 @@
|
||||
type="text"
|
||||
name="discussion[title]"
|
||||
id="discussion_title"
|
||||
value="{questionTitle}"
|
||||
>
|
||||
value={questionTitle}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TextEditor
|
||||
value="{questionDescription}"
|
||||
value={questionDescription}
|
||||
placeholder="Задайте вопрос или начните разговор"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media only screen and (max-width: 1002px) {
|
||||
.faculty-filter {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.main-title {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -25,12 +25,6 @@
|
||||
export let discussion;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>{discussion.title}</title>
|
||||
</svelte:head>
|
||||
@@ -44,11 +38,13 @@
|
||||
<header class="flex items-center justify-between leading-none p-2">
|
||||
<a
|
||||
class="flex items-center no-underline hover:underline text-black"
|
||||
href="/">
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="Placeholder"
|
||||
class="block rounded-full"
|
||||
src="https://picsum.photos/32/32/?random" />
|
||||
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>
|
||||
@@ -70,13 +66,15 @@
|
||||
<header class="flex items-center justify-between leading-none p-2">
|
||||
<a
|
||||
class="flex items-center no-underline hover:underline text-black"
|
||||
href="/">
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="Placeholder"
|
||||
class="block rounded-full"
|
||||
width="24"
|
||||
height="20"
|
||||
src={comment.avatar} />
|
||||
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>
|
||||
@@ -93,3 +91,9 @@
|
||||
<hr />
|
||||
<TextEditor value={userComment} placeholder="Предлогайте ваш ответ" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
margin: 15px 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
+238
-223
@@ -1,244 +1,259 @@
|
||||
<script>
|
||||
import { stores } from "@sapper/app";
|
||||
import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
|
||||
import Vote from "../components/Vote.svelte";
|
||||
import Space from "../components/Space.svelte";
|
||||
import HashTags from "../components/HashTags.svelte";
|
||||
import { stores } from "@sapper/app";
|
||||
import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
|
||||
import Vote from "../components/Vote.svelte";
|
||||
import Space from "../components/Space.svelte";
|
||||
import HashTags from "../components/HashTags.svelte";
|
||||
|
||||
function getDiscussion(filterBy, allDiscussions) {
|
||||
switch (filterBy) {
|
||||
case "popular":
|
||||
return allDiscussions.filter((a, i) => i >= 0 && i < 2);
|
||||
case "recent":
|
||||
return allDiscussions.filter((a, i) => i >= 2 && i < 5);
|
||||
case "upvoted":
|
||||
return allDiscussions.filter((a, i) => i > 4 && i < 8);
|
||||
default:
|
||||
return allDiscussions;
|
||||
}
|
||||
}
|
||||
function getDiscussion(filterBy, allDiscussions) {
|
||||
switch (filterBy) {
|
||||
case "popular":
|
||||
return allDiscussions.filter((a, i) => i >= 0 && i < 2);
|
||||
case "recent":
|
||||
return allDiscussions.filter((a, i) => i >= 2 && i < 5);
|
||||
case "upvoted":
|
||||
return allDiscussions.filter((a, i) => i > 4 && i < 8);
|
||||
default:
|
||||
return allDiscussions;
|
||||
}
|
||||
}
|
||||
|
||||
const { page } = stores();
|
||||
let filterBy = "";
|
||||
let discussions = [];
|
||||
const { page } = stores();
|
||||
let filterBy = "";
|
||||
let discussions = [];
|
||||
|
||||
$: filterBy = $page.query.filter || "popular";
|
||||
$: filterBy = $page.query.filter || "popular";
|
||||
|
||||
const allDiscussions = [
|
||||
{
|
||||
id: 1,
|
||||
title: "How do I pass Anicimov?",
|
||||
author: {
|
||||
name: "rotimibest",
|
||||
},
|
||||
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?",
|
||||
author: {
|
||||
name: "attronaldo",
|
||||
},
|
||||
tags: ["иибрт", "иее"],
|
||||
answered: false,
|
||||
comments: 2,
|
||||
votes: 2,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Who is Nikolenko?",
|
||||
author: {
|
||||
name: "donald",
|
||||
},
|
||||
tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
|
||||
answered: false,
|
||||
comments: 10,
|
||||
votes: 10,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Archive discussion button",
|
||||
author: {
|
||||
name: "acharlesvv",
|
||||
},
|
||||
tags: [
|
||||
"ИЭКСУ",
|
||||
"ИМБТ",
|
||||
"ИМИ",
|
||||
"ИПТДМ",
|
||||
"ИИИР",
|
||||
"ГФ",
|
||||
"ХТФ",
|
||||
"ИДЗО",
|
||||
"УИИ",
|
||||
"УНИ",
|
||||
],
|
||||
answered: false,
|
||||
comments: 15,
|
||||
votes: 15,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "How do I pass Anicimov?",
|
||||
author: {
|
||||
name: "rotimibest",
|
||||
},
|
||||
tags: ["ибэит", "икс"],
|
||||
answered: false,
|
||||
comments: 7,
|
||||
votes: 7,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Where do I find the nearest restaurant?",
|
||||
author: {
|
||||
name: "attronaldo",
|
||||
},
|
||||
tags: ["иибрт", "иее"],
|
||||
answered: false,
|
||||
comments: 4,
|
||||
votes: 4,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Who is Nikolenko?",
|
||||
author: {
|
||||
name: "donald",
|
||||
},
|
||||
tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
|
||||
answered: false,
|
||||
comments: 100,
|
||||
votes: 100,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Archive discussion button",
|
||||
author: {
|
||||
name: "acharlesvv",
|
||||
},
|
||||
tags: [
|
||||
"ИЭКСУ",
|
||||
"ИМБТ",
|
||||
"ИМИ",
|
||||
"ИПТДМ",
|
||||
"ИИИР",
|
||||
"ГФ",
|
||||
"ХТФ",
|
||||
"ИДЗО",
|
||||
"УИИ",
|
||||
"УНИ",
|
||||
],
|
||||
answered: false,
|
||||
comments: 5,
|
||||
votes: 5,
|
||||
},
|
||||
];
|
||||
const _allDiscussions = [
|
||||
{
|
||||
id: 1,
|
||||
title: "How do I pass Anicimov?",
|
||||
author: {
|
||||
name: "rotimibest",
|
||||
},
|
||||
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?",
|
||||
author: {
|
||||
name: "attronaldo",
|
||||
},
|
||||
tags: ["иибрт", "иее"],
|
||||
answered: false,
|
||||
comments: 2,
|
||||
votes: 2,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Who is Nikolenko?",
|
||||
author: {
|
||||
name: "donald",
|
||||
},
|
||||
tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
|
||||
answered: false,
|
||||
comments: 10,
|
||||
votes: 10,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Archive discussion button",
|
||||
author: {
|
||||
name: "acharlesvv",
|
||||
},
|
||||
tags: [
|
||||
"ИЭКСУ",
|
||||
"ИМБТ",
|
||||
"ИМИ",
|
||||
"ИПТДМ",
|
||||
"ИИИР",
|
||||
"ГФ",
|
||||
"ХТФ",
|
||||
"ИДЗО",
|
||||
"УИИ",
|
||||
"УНИ",
|
||||
],
|
||||
answered: false,
|
||||
comments: 15,
|
||||
votes: 15,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "How do I pass Anicimov?",
|
||||
author: {
|
||||
name: "rotimibest",
|
||||
},
|
||||
tags: ["ибэит", "икс"],
|
||||
answered: false,
|
||||
comments: 7,
|
||||
votes: 7,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Where do I find the nearest restaurant?",
|
||||
author: {
|
||||
name: "attronaldo",
|
||||
},
|
||||
tags: ["иибрт", "иее"],
|
||||
answered: false,
|
||||
comments: 4,
|
||||
votes: 4,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Who is Nikolenko?",
|
||||
author: {
|
||||
name: "donald",
|
||||
},
|
||||
tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
|
||||
answered: false,
|
||||
comments: 100,
|
||||
votes: 100,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Archive discussion button",
|
||||
author: {
|
||||
name: "acharlesvv",
|
||||
},
|
||||
tags: [
|
||||
"ИЭКСУ",
|
||||
"ИМБТ",
|
||||
"ИМИ",
|
||||
"ИПТДМ",
|
||||
"ИИИР",
|
||||
"ГФ",
|
||||
"ХТФ",
|
||||
"ИДЗО",
|
||||
"УИИ",
|
||||
"УНИ",
|
||||
],
|
||||
answered: false,
|
||||
comments: 5,
|
||||
votes: 5,
|
||||
},
|
||||
];
|
||||
const allDiscussions = [];
|
||||
|
||||
$: discussions = getDiscussion(filterBy, allDiscussions);
|
||||
_allDiscussions.forEach((d, i) => {
|
||||
allDiscussions.push(d, _allDiscussions[_allDiscussions.length - (i + 1)]);
|
||||
});
|
||||
|
||||
$: discussions = getDiscussion(filterBy, allDiscussions);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Unidiscuss - Help students in your university</title>
|
||||
</svelte:head>
|
||||
<div class="root md:w-3/4 mx-auto md:mb-20">
|
||||
<div class="header flex justify-between mb-2">
|
||||
<h4 class="title">Разговоры 😉😁</h4>
|
||||
<div class="flex justify-evenly items-center">
|
||||
<a
|
||||
class="mr-5 text-sm {filterBy === 'popular' && 'active'}"
|
||||
href="?filter=popular"
|
||||
>
|
||||
Popular
|
||||
</a>
|
||||
<a
|
||||
class="mr-5 text-sm {filterBy === 'recent' && 'active'}"
|
||||
href="?filter=recent"
|
||||
>
|
||||
Recent
|
||||
</a>
|
||||
<a
|
||||
class="mr-5 text-sm {filterBy === 'upvoted' && 'active'}"
|
||||
href="?filter=upvoted"
|
||||
>
|
||||
Upvoted
|
||||
</a>
|
||||
</div>
|
||||
</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;
|
||||
margin: 0 auto;
|
||||
border-left: 1px solid #eaecef;
|
||||
border-right: 1px solid #eaecef;
|
||||
}
|
||||
.root {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
border-left: 1px solid #eaecef;
|
||||
border-right: 1px solid #eaecef;
|
||||
}
|
||||
|
||||
.root .header {
|
||||
border-bottom: 1px solid #eaecef;
|
||||
padding: 15px;
|
||||
}
|
||||
.root .header {
|
||||
border-bottom: 1px solid #eaecef;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.root .title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.discussion-box {
|
||||
/* border: 1px solid #eaecef; */
|
||||
display: flex;
|
||||
.root .title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.discussion-box {
|
||||
/* border: 1px solid #eaecef; */
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 10px 15px;
|
||||
/* border-radius: 10px; */
|
||||
margin: 0px auto;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
margin: 0;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.discussion-topic-author {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.discussion-topic-author span {
|
||||
color: #586069;
|
||||
font-size: 12px;
|
||||
}
|
||||
.discussion-topic-author {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.discussion-topic-author span {
|
||||
color: #586069;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.active {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.active::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: #3182ce;
|
||||
display: block;
|
||||
}
|
||||
.active::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: #3182ce;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1002px) {
|
||||
.header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</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">
|
||||
<div class="header flex justify-between mb-2">
|
||||
<h4 class="title">Разговоры 😉😁</h4>
|
||||
<div class="flex justify-evenly items-center">
|
||||
<a
|
||||
class="mr-5 text-sm {filterBy === 'popular' && 'active'}"
|
||||
href="?filter=popular">
|
||||
Popular
|
||||
</a>
|
||||
<a
|
||||
class="mr-5 text-sm {filterBy === 'recent' && 'active'}"
|
||||
href="?filter=recent">
|
||||
Recent
|
||||
</a>
|
||||
<a
|
||||
class="mr-5 text-sm {filterBy === 'upvoted' && 'active'}"
|
||||
href="?filter=upvoted">
|
||||
Upvoted
|
||||
</a>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
+12
-4
@@ -1,8 +1,16 @@
|
||||
|
||||
<script>
|
||||
|
||||
function onTelegramAuth(user) {
|
||||
alert('Logged in as ' + user.first_name + ' ' + user.last_name + ' (' + user.id + (user.username ? ', @' + user.username : '') + ')');
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Login</title>
|
||||
<title>Join Unidiscuss</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="">
|
||||
<h2>Login page here</h2>
|
||||
</div>
|
||||
<div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
|
||||
<p>Login/Sign up into Unidiscuss</p>
|
||||
<script async src="https://telegram.org/js/telegram-widget.js?14" data-telegram-login="unidiscuss_bot" data-size="large" data-auth-url="login-redirect" data-request-access="write"></script>
|
||||
</div>
|
||||
Reference in New Issue
Block a user