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

Restructure ui of app

Browse Source
This commit is contained in:
Ibitoye Rotimi Best
2021-04-05 07:12:51 +03:00
parent cb0909c4fc
commit 59b8722ccd
9 changed files with 496 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+3 -3
View File
@@ -2900,9 +2900,9 @@
"integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==" "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g=="
}, },
"trouter": { "trouter": {
"version": "3.1.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/trouter/-/trouter-3.1.0.tgz", "resolved": "https://registry.npmjs.org/trouter/-/trouter-3.2.0.tgz",
"integrity": "sha512-3Swwu638QQWOefHLss9cdyLi5/9BKYmXZEXpH0KOFfB9YZwUAwHbDAcoYxaHfqAeFvbi/LqAK7rGkhCr1v1BJA==", "integrity": "sha512-rLLXbhTObLy2MBVjLC+jTnoIKw99n0GuJs9ov10J870vDw5qhTurPzsDrudNtBf5w/CZ9ctZy2p2IMmhGcel2w==",
"requires": { "requires": {
"regexparam": "^1.3.0" "regexparam": "^1.3.0"
} }
src/components/LeftNav.svelte
+127
View File
@@ -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>
src/components/NewQuestion.svelte
+23 -7
View File
@@ -1,15 +1,31 @@
<script> <script>
import AddComment20 from "carbon-icons-svelte/lib/AddComment20"; import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
</script> </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> <style>
.root { .root {
height: fit-content; 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> </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>
src/components/SideBar.svelte
+25 -17
View File
@@ -2,34 +2,27 @@
// your script goes here // your script goes here
const contributors = [ const contributors = [
{ {
name: 'Koskting' name: "Koskting",
}, },
{ {
name: 'Koskting' name: "Koskting",
}, },
{ {
name: 'Koskting' name: "Koskting",
}, },
{ {
name: 'Koskting' name: "Koskting",
}, },
{ {
name: 'Koskting' name: "Koskting",
}, },
]; ];
</script> </script>
<style>
.sidebar-root {
width: 250px;
min-width: 250px;
height: fit-content;
}
</style>
<!-- markup (zero or more items) goes here --> <!-- 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> <h4 class="border-b border-gray text-base font-bold pb-1">Самые полезные</h4>
{#each contributors as contributor} {#each contributors as contributor}
<a class="flex pt-3" href="/{contributor.name}"> <a class="flex pt-3" href="/{contributor.name}">
@@ -39,8 +32,23 @@
width="23" width="23"
height="20" height="20"
alt="@jamesmosier" 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> </a>
{/each} {/each}
</div> </div>
<style>
.sidebar-root {
width: 250px;
min-width: 250px;
height: fit-content;
}
@media only screen and (max-width: 1002px) {
.sidebar-root {
display: none;
}
}
</style>
src/routes/_layout.svelte
+14 -20
View File
@@ -1,12 +1,25 @@
<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 LeftNav from "../components/LeftNav.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>
<Tailwindcss />
<!-- <Nav {segment} /> -->
<main class="flex max-w-screen-xl">
<LeftNav {segment} />
<slot />
<SideBar />
</main>
<Footer />
<style> <style>
main { main {
background-color: white; background-color: white;
@@ -19,23 +32,4 @@
:global(a:hover) { :global(a:hover) {
text-decoration: underline; text-decoration: underline;
} }
@media only screen and (max-width: 768px) {
main {
flex-direction: column;
align-items: center;
/* padding: 10px; */
}
}
</style> </style>
<Tailwindcss />
<Nav {segment} />
<main class="flex max-w-screen-xl">
<slot />
<SideBar />
</main>
<Footer />
src/routes/ask.svelte
+40 -15
View File
@@ -1,19 +1,28 @@
<script> <script>
import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24"; import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
import TextEditor from "../components/TextEditor.svelte"; import TextEditor from "../components/TextEditor.svelte";
let questionTitle = ''; let questionTitle = "";
let questionTags = []; let questionDescription = "";
let questionDescription = '';
let facultyFilterOpened = false; let facultyFilterOpened = false;
const faculties = [ const faculties = [
'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ' "ИЭКСУ",
"ИМБТ",
"ИМИ",
"ИПТДМ",
"ИИИР",
"ГФ",
"ХТФ",
"ИДЗО",
"УИИ",
"УНИ",
]; ];
let checkbox = faculties.reduce((acc, cur) => { let checkbox = faculties.reduce((acc, cur) => {
acc[cur] = false; acc[cur] = false;
return acc; return acc;
}, {}); }, {});
$: clickedTotal = Object.values(checkbox).filter((box) => !!box).length;
function handleFacultyFilters() { function handleFacultyFilters() {
facultyFilterOpened = facultyFilterOpened ? false : true; facultyFilterOpened = facultyFilterOpened ? false : true;
@@ -21,29 +30,34 @@
</script> </script>
<svelte:head> <svelte:head>
<title>Спросить собшество вопрос</title> <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">
<h2 class="pb-2">Спросить собшество вопрос</h2> <h2 class="pb-2">Спросить собшество вопрос</h2>
<div class="my-1 flex"> <div class="main-title my-1 flex">
<div class="mr-1"> <div class="faculty-filter mr-1">
<button <button
class="flex border rounded-lg border-grey py-2 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200 relative" 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} on:click={handleFacultyFilters}
> >
<span>Факултеты</span> <ChevronDown24 class="ml-2" /> <span class="flex flex-row"
>Факултеты <span>&nbsp;({clickedTotal})</span></span
>
<ChevronDown24 class="ml-2" />
</button> </button>
{#if facultyFilterOpened} {#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} {#each faculties as faculty}
<div class="block px-4 py-2 border-b"> <div class="block px-4 py-2 border-b">
<input <input
type="checkbox" type="checkbox"
class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer" class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer"
bind:checked={checkbox[faculty]} bind:checked={checkbox[faculty]}
> />
<span>{faculty}</span> <span>{faculty}</span>
</div> </div>
{/each} {/each}
@@ -60,12 +74,23 @@
type="text" type="text"
name="discussion[title]" name="discussion[title]"
id="discussion_title" id="discussion_title"
value="{questionTitle}" value={questionTitle}
> />
</div> </div>
<TextEditor <TextEditor
value="{questionDescription}" value={questionDescription}
placeholder="Задайте вопрос или начните разговор" placeholder="Задайте вопрос или начните разговор"
/> />
</div> </div>
<style>
@media only screen and (max-width: 1002px) {
.faculty-filter {
margin-bottom: 10px;
}
.main-title {
flex-direction: column;
}
}
</style>
src/routes/discussion/[id].svelte
+14 -10
View File
@@ -25,12 +25,6 @@
export let discussion; export let discussion;
</script> </script>
<style>
.root {
margin-top: 15px;
}
</style>
<svelte:head> <svelte:head>
<title>{discussion.title}</title> <title>{discussion.title}</title>
</svelte:head> </svelte:head>
@@ -44,11 +38,13 @@
<header class="flex items-center justify-between leading-none p-2"> <header class="flex items-center justify-between leading-none p-2">
<a <a
class="flex items-center no-underline hover:underline text-black" class="flex items-center no-underline hover:underline text-black"
href="/"> href="/"
>
<img <img
alt="Placeholder" alt="Placeholder"
class="block rounded-full" 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">{discussion.author.name}</p>
<p class="ml-2 text-sm text-gray-500">12h ago</p> <p class="ml-2 text-sm text-gray-500">12h ago</p>
</a> </a>
@@ -70,13 +66,15 @@
<header class="flex items-center justify-between leading-none p-2"> <header class="flex items-center justify-between leading-none p-2">
<a <a
class="flex items-center no-underline hover:underline text-black" class="flex items-center no-underline hover:underline text-black"
href="/"> 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">{comment.name}</p>
<p class="ml-2 text-sm text-gray-500">12h ago</p> <p class="ml-2 text-sm text-gray-500">12h ago</p>
</a> </a>
@@ -93,3 +91,9 @@
<hr /> <hr />
<TextEditor value={userComment} placeholder="Предлогайте ваш ответ" /> <TextEditor value={userComment} placeholder="Предлогайте ваш ответ" />
</div> </div>
<style>
.root {
margin: 15px 5px;
}
</style>
src/routes/index.svelte
+238 -223
View File
@@ -1,244 +1,259 @@
<script> <script>
import { stores } from "@sapper/app"; import { stores } from "@sapper/app";
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 HashTags from "../components/HashTags.svelte"; import HashTags from "../components/HashTags.svelte";
function getDiscussion(filterBy, allDiscussions) { function getDiscussion(filterBy, allDiscussions) {
switch (filterBy) { switch (filterBy) {
case "popular": case "popular":
return allDiscussions.filter((a, i) => i >= 0 && i < 2); return allDiscussions.filter((a, i) => i >= 0 && i < 2);
case "recent": case "recent":
return allDiscussions.filter((a, i) => i >= 2 && i < 5); return allDiscussions.filter((a, i) => i >= 2 && i < 5);
case "upvoted": case "upvoted":
return allDiscussions.filter((a, i) => i > 4 && i < 8); return allDiscussions.filter((a, i) => i > 4 && i < 8);
default: default:
return allDiscussions; return allDiscussions;
} }
} }
const { page } = stores(); const { page } = stores();
let filterBy = ""; let filterBy = "";
let discussions = []; let discussions = [];
$: filterBy = $page.query.filter || "popular"; $: filterBy = $page.query.filter || "popular";
const allDiscussions = [ const _allDiscussions = [
{ {
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: 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?", "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,
}, },
]; ];
const allDiscussions = [];
$: discussions = getDiscussion(filterBy, allDiscussions); _allDiscussions.forEach((d, i) => {
allDiscussions.push(d, _allDiscussions[_allDiscussions.length - (i + 1)]);
});
$: discussions = getDiscussion(filterBy, allDiscussions);
</script> </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> <style>
.root { .root {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
border-left: 1px solid #eaecef; border-left: 1px solid #eaecef;
border-right: 1px solid #eaecef; border-right: 1px solid #eaecef;
} }
.root .header { .root .header {
border-bottom: 1px solid #eaecef; border-bottom: 1px solid #eaecef;
padding: 15px; padding: 15px;
} }
.root .title { .root .title {
font-size: 20px; font-size: 20px;
} }
.discussion-box { .discussion-box {
/* border: 1px solid #eaecef; */ /* border: 1px solid #eaecef; */
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
padding: 10px 15px; padding: 10px 15px;
/* border-radius: 10px; */ /* border-radius: 10px; */
margin: 0px auto; margin: 0px auto;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
} }
h4 { h4 {
font-size: 16px; font-size: 16px;
font-weight: 900; font-weight: 900;
word-break: break-word; word-break: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
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;
} }
.active { .active {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.active::after { .active::after {
position: absolute; position: absolute;
content: ""; content: "";
width: 100%; width: 100%;
height: 3px; height: 3px;
background-color: #3182ce; background-color: #3182ce;
display: block; display: block;
} }
@media only screen and (max-width: 1002px) {
.header {
flex-direction: column;
align-items: flex-start;
}
}
</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">
<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>
src/routes/login.svelte
+12 -4
View File
@@ -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> <svelte:head>
<title>Login</title> <title>Join Unidiscuss</title>
</svelte:head> </svelte:head>
<div class=""> <div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
<h2>Login page here</h2> <p>Login/Sign up into Unidiscuss</p>
</div> <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>