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>