display the homeservers list
This commit is contained in:
parent
a22114268a
commit
40e98f6557
|
@ -12,6 +12,7 @@ body, html {
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
transition: 500ms ease;
|
transition: 500ms ease;
|
||||||
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes delay-show-fade-in {
|
@keyframes delay-show-fade-in {
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
import { Router, Link, Route, navigate } from "svelte-routing";
|
import { Router, Link, Route, navigate } from "svelte-routing";
|
||||||
import RouteStore from './store/RouteStore';
|
import RouteStore from './store/RouteStore';
|
||||||
import Background from './widget/Background/Background.svelte';
|
import Background from './widget/Background/Background.svelte';
|
||||||
|
import Explore from './page/Explore/Explore.svelte';
|
||||||
|
|
||||||
export let url = "/load";
|
export let url = "/load";
|
||||||
|
|
||||||
|
@ -40,6 +41,7 @@
|
||||||
<Route path='/' component={Greet} />
|
<Route path='/' component={Greet} />
|
||||||
<Route path='/load' component={Load} />
|
<Route path='/load' component={Load} />
|
||||||
<Route path='/sign-in' component={SignIn} />
|
<Route path='/sign-in' component={SignIn} />
|
||||||
|
<Route path='/explore' component={Explore} />
|
||||||
</Router>
|
</Router>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -42,3 +42,6 @@ button {
|
||||||
border: 1px solid #203030;
|
border: 1px solid #203030;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
a {
|
||||||
|
color: #66a0af;
|
||||||
|
}
|
|
@ -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>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<Link href='/homeserver-list'>
|
<Link href='/explore'>
|
||||||
<button>
|
<button>
|
||||||
Create account
|
Create account
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
<br/>
|
<br/>
|
||||||
<Link href='/homeserver-list'>
|
<Link href='/explore'>
|
||||||
<button>
|
<button>
|
||||||
Explore servers
|
Explore servers
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import Blek from '../../shared/blek.svelte';
|
import Blek from '../../shared/blek.svelte';
|
||||||
import style from './style.module.scss';
|
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_translate = true;
|
||||||
let motto_visible = true;
|
let motto_visible = true;
|
||||||
|
@ -22,7 +22,7 @@
|
||||||
<h1>
|
<h1>
|
||||||
Loading...
|
Loading...
|
||||||
</h1>
|
</h1>
|
||||||
<Plane color='#e1e1e1' duration='3s' />
|
<Jumper color='#e1e1e1' duration='3s' />
|
||||||
<p class={style.motto + (motto_visible ? '' : ' ' + style.hide)}>
|
<p class={style.motto + (motto_visible ? '' : ' ' + style.hide)}>
|
||||||
{
|
{
|
||||||
!motto_translate ?
|
!motto_translate ?
|
||||||
|
|
Loading…
Reference in New Issue