display the homeservers list
This commit is contained in:
parent
a22114268a
commit
40e98f6557
GPG Key ID:
14546221E3595D0C
|
|
@ -12,6 +12,7 @@ body, html {
|
|||
border-radius: 16px;
|
||||
z-index: 0;
|
||||
transition: 500ms ease;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@keyframes delay-show-fade-in {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -41,4 +41,7 @@ button {
|
|||
background: #0441;
|
||||
border: 1px solid #203030;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: #66a0af;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ import '@fontsource-variable/red-hat-display';
|
|||
import './lib/global_styles.scss';
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById("app"),
|
||||
target: document.getElementById("app"),
|
||||
});
|
||||
|
||||
export default app;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 ?
|
||||
|
|
|
|||
Loading…
Reference in New Issue