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

View File

@ -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 {

View File

@ -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>

View File

@ -41,4 +41,7 @@ button {
background: #0441; background: #0441;
border: 1px solid #203030; border: 1px solid #203030;
} }
}
a {
color: #66a0af;
} }

View File

@ -4,7 +4,7 @@ import '@fontsource-variable/red-hat-display';
import './lib/global_styles.scss'; import './lib/global_styles.scss';
const app = new App({ const app = new App({
target: document.getElementById("app"), target: document.getElementById("app"),
}); });
export default app; export default app;

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>

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;
}
}
}
}

View File

@ -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>

View File

@ -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 ?