blek
/
nox
1
0
Fork 1
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

display the homeservers list

This commit is contained in:
b1ek 2023-08-23 20:30:46 +10:00
parent a22114268a
commit 40e98f6557
Signed by: blek
GPG Key ID: 14546221E3595D0C
8 changed files with 156 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.module.scss
View File

@ -12,6 +12,7 @@ body, html {
border-radius: 16px;
z-index: 0;
transition: 500ms ease;
overflow-y: scroll;
}
@keyframes delay-show-fade-in {

2
src/App.svelte
View File

@ -10,6 +10,7 @@
import { Router, Link, Route, navigate } from "svelte-routing";
import RouteStore from './store/RouteStore';
import Background from './widget/Background/Background.svelte';
import Explore from './page/Explore/Explore.svelte';
export let url = "/load";
@ -40,6 +41,7 @@
<Route path='/' component={Greet} />
<Route path='/load' component={Load} />
<Route path='/sign-in' component={SignIn} />
<Route path='/explore' component={Explore} />
</Router>
</div>
</div>

3
src/lib/global_styles.scss
View File

@ -42,3 +42,6 @@ button {
border: 1px solid #203030;
}
}
a {
color: #66a0af;
}

110
src/page/Explore/Explore.svelte Normal file
View File

@ -0,0 +1,110 @@
<script lang="ts">
import style from './style.module.scss';
import Jumper from 'svelte-loading-spinners/Jumper.svelte';
import { invoke } from '@tauri-apps/api/tauri';
import { listen } from 'svelte/internal';
let list = [];
let loaded = false;
// load servers
invoke('list_servers').then(data => {
list = data;
loaded = true;
})
</script>
<div class={style.root}>
<h1 style='text-align:center;margin-top:40px'>
Homeservers
</h1>
<p style='text-align:center'>
List kindly provided by
<a href='https://joinmatrix.org/servers'>
joinmatrix.org
</a>
</p>
<div class={style.list}>
{#if !loaded}
<p>
Loading...<br/>
<Jumper color='#e1e1e1' duration='3s' />
</p>
{/if}
{#if loaded}
<table style='margin:0 auto;min-width:100%'>
<tbody>
<tr>
<td class={style.server}>
<h1>Server name</h1>
<p class={style.remarks}>Notes</p>
</td>
<td>
Location
</td>
<td>
Rules
</td>
<td>
Privacy Policy
</td>
<td>
Version
</td>
<td>
</td>
<td>
</td>
</tr>
{#each list as server}
<script>
if (!server.open) {
continue
}
</script>
<tr>
<td class={style.server}>
<h1>{server.name}</h1>
<p class={style.remarks}>{server.remarks}</p>
</td>
<td>
{server.jurisdiction}
</td>
<td>
{#if server.tos}
<a href={server.tos}>Yes</a>
{:else}
No
{/if}
</td>
<td>
{#if server.privacy}
<a href={server.privacy}>Yes</a>
{:else}
No
{/if}
</td>
<td style={server.version.startsWith('1.90') ? 'color: limegreen' : ''}>
{server.version}
</td>
<td>
<button>
Register here
</button>
</td>
<td>
<button>
Info
</button>
</td>
</tr>
{/each}
</tbody>
</table>
{/if}
</div>
</div>

35
src/page/Explore/style.module.scss Normal file
View File

@ -0,0 +1,35 @@
.root {
h1 {
font-size: 20pt;
font-weight: 400;
}
.list {
margin-top: 60px;
text-align: center;
overflow-y: scroll;
padding: 0 60px;
.server {
text-align: left;
padding: 8px 0;
h1 {
font-size: 12pt;
font-weight: 400;
margin: 0;
line-height: 11pt;
}
.remarks {
font-size: 9pt;
font-family: 300;
margin: 0;
}
}
// Spinner styles
:global {
.wrapper {
margin: 10px auto;
}
}
}
}

4
src/page/Greet/Greet.svelte
View File

@ -30,13 +30,13 @@
</button>
</Link>
<Link href='/homeserver-list'>
<Link href='/explore'>
<button>
Create account
</button>
</Link>
<br/>
<Link href='/homeserver-list'>
<Link href='/explore'>
<button>
Explore servers
</button>

4
src/page/Load/Load.svelte
View File

@ -2,7 +2,7 @@
import Blek from '../../shared/blek.svelte';
import style from './style.module.scss';
import Plane from 'svelte-loading-spinners/Jumper.svelte';
import Jumper from 'svelte-loading-spinners/Jumper.svelte';
let motto_translate = true;
let motto_visible = true;
@ -22,7 +22,7 @@
<h1>
Loading...
</h1>
<Plane color='#e1e1e1' duration='3s' />
<Jumper color='#e1e1e1' duration='3s' />
<p class={style.motto + (motto_visible ? '' : ' ' + style.hide)}>
{
!motto_translate ?