fix login flow, improve light/dark theme
This commit is contained in:
parent
c3e706ed73
commit
8f41613179
GPG key ID:
CF99829C92678188
29
src/img/spacesocial-logo-dark.svg
Normal file
29
src/img/spacesocial-logo-dark.svg
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 226 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(0.0592476,0,0,0.0592476,19.3835,-44.4646)">
|
||||
<g>
|
||||
<clipPath id="_clip1">
|
||||
<path d="M3471.16,750.487L3471.16,2249.51L-327.161,2249.51L-327.161,750.487L3471.16,750.487ZM2317.49,1260.74L1795.39,1260.74L1795.39,1763.02L2317.49,1763.02L2317.49,1260.74Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip1)">
|
||||
<g transform="matrix(3.12421,0,0,3.12421,13.4825,-77.5092)">
|
||||
<g id="spinner">
|
||||
<path d="M380,380C476.218,283.782 659.849,234.849 710,285C760.151,335.151 756.844,478.156 634,601C511.156,723.844 358.099,784.099 291,717C249.901,675.901 257.955,619 257.955,619C260.181,637.245 251.818,720.443 352.404,720.443C452.989,720.443 530.426,645.937 610.046,566.318C689.665,486.699 778.651,275.064 635.273,275.064C491.896,275.064 380,380 380,380Z" style="fill:#e2dfe3;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(44.394,0.545455,-44.394,0.545455,899.136,728.049)">
|
||||
<g id="star-shine" serif:id="star shine">
|
||||
<rect x="383" y="377" width="11" height="11" style="fill:#e2dfe3;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="star" transform="matrix(1.45161,0,0,1.45161,531.871,522.581)">
|
||||
<path d="M436.5,384L449.059,417.941L483,430.5L449.059,443.059L436.5,477L423.941,443.059L390,430.5L423.941,417.941L436.5,384Z" style="fill:#e2dfe3;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(2.67689,0,0,2.67689,-0.655394,55.5404)">
|
||||
<text x="0px" y="0px" style="font-family:'Inter-BoldItalic', 'Inter';font-weight:700;font-style:italic;font-size:13.636px;fill:#e2dfe3;">space social</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
29
src/img/spacesocial-logo-light.svg
Normal file
29
src/img/spacesocial-logo-light.svg
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 226 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(0.0592476,0,0,0.0592476,19.3835,-44.4646)">
|
||||
<g>
|
||||
<clipPath id="_clip1">
|
||||
<path d="M3471.16,750.487L3471.16,2249.51L-327.161,2249.51L-327.161,750.487L3471.16,750.487ZM2317.49,1260.74L1795.39,1260.74L1795.39,1763.02L2317.49,1763.02L2317.49,1260.74Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip1)">
|
||||
<g transform="matrix(3.12421,0,0,3.12421,13.4825,-77.5092)">
|
||||
<g id="spinner">
|
||||
<path d="M380,380C476.218,283.782 659.849,234.849 710,285C760.151,335.151 756.844,478.156 634,601C511.156,723.844 358.099,784.099 291,717C249.901,675.901 257.955,619 257.955,619C260.181,637.245 251.818,720.443 352.404,720.443C452.989,720.443 530.426,645.937 610.046,566.318C689.665,486.699 778.651,275.064 635.273,275.064C491.896,275.064 380,380 380,380Z" style="fill:#322e1f;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(44.394,0.545455,-44.394,0.545455,899.136,728.049)">
|
||||
<g id="star-shine" serif:id="star shine">
|
||||
<rect x="383" y="377" width="11" height="11" style="fill:#322e1f;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="star" transform="matrix(1.45161,0,0,1.45161,531.871,522.581)">
|
||||
<path d="M436.5,384L449.059,417.941L483,430.5L449.059,443.059L436.5,477L423.941,443.059L390,430.5L423.941,417.941L436.5,384Z" style="fill:#322e1f;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(2.67689,0,0,2.67689,-0.655394,55.5404)">
|
||||
<text x="0px" y="0px" style="font-family:'Inter-BoldItalic', 'Inter';font-weight:700;font-style:italic;font-size:13.636px;fill:#322e1f;">space social</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -1,29 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 226 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(0.0592476,0,0,0.0592476,19.3835,-44.4646)">
|
||||
<clipPath id="_clip1">
|
||||
<path d="M3471.16,750.487L3471.16,2249.51L-327.161,2249.51L-327.161,750.487L3471.16,750.487ZM2317.49,1260.74L1795.39,1260.74L1795.39,1763.02L2317.49,1763.02L2317.49,1260.74Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip1)">
|
||||
<g transform="matrix(3.12421,0,0,3.12421,13.4825,-77.5092)">
|
||||
<g id="spinner">
|
||||
<path d="M380,380C476.218,283.782 659.849,234.849 710,285C760.151,335.151 756.844,478.156 634,601C511.156,723.844 358.099,784.099 291,717C249.901,675.901 257.955,619 257.955,619C260.181,637.245 251.818,720.443 352.404,720.443C452.989,720.443 530.426,645.937 610.046,566.318C689.665,486.699 778.651,275.064 635.273,275.064C491.896,275.064 380,380 380,380Z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(44.394,0.545455,-44.394,0.545455,899.136,728.049)">
|
||||
<g id="star-shine" serif:id="star shine">
|
||||
<rect x="383" y="377" width="11" height="11"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="star" transform="matrix(1.45161,0,0,1.45161,531.871,522.581)">
|
||||
<path d="M436.5,384L449.059,417.941L483,430.5L449.059,443.059L436.5,477L423.941,443.059L390,430.5L423.941,417.941L436.5,384Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(2.67689,0,0,2.67689,-1226.58,-333.741)">
|
||||
<g transform="matrix(13.6363,0,0,13.6363,542.101,145.423)">
|
||||
</g>
|
||||
<text x="457.966px" y="145.423px" style="font-family:'Inter-BoldItalic', 'Inter';font-weight:700;font-style:italic;font-size:13.636px;">space social</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB |
|
|
@ -20,6 +20,15 @@
|
|||
--accent: #CDA1EC;
|
||||
--text: #E2DFE3;
|
||||
}
|
||||
.light-only {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: light) {
|
||||
.dark-only {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
@supports (font-variation-settings: normal) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import Logo from '$lib/../img/spacesocial-logo.svg';
|
||||
import LogoLight from '$lib/../img/spacesocial-logo-light.svg';
|
||||
import LogoDark from '$lib/../img/spacesocial-logo-dark.svg';
|
||||
import Button from './Button.svelte';
|
||||
import Feed from './Feed.svelte';
|
||||
import { Client } from '$lib/client/client.js';
|
||||
|
|
@ -37,11 +38,16 @@
|
|||
</script>
|
||||
|
||||
<div id="navigation">
|
||||
<header id="instance-header"> <!-- style={`background-image: url(${banner_url})`}> -->
|
||||
<!-- <img src={icon_url} class="instance-icon" height="92px" aria-hidden="true"> -->
|
||||
<div class="instance-icon instance-icon-mask" style={`mask-image: url(${Logo})`} height="92px" aria-hidden="true">
|
||||
<!-- <img src={Logo} class="instance-icon" height="92px" aria-hidden="true"> -->
|
||||
</header>
|
||||
{#if client.instance && client.instance.icon_url && client.instance.banner_url}
|
||||
<header class="instance-header" style="background-image: url({client.instance.banner_url})">
|
||||
<img src={client.instance.icon_url} class="instance-icon" height="92px" aria-hidden="true">
|
||||
</header>
|
||||
{:else}
|
||||
<header class="instance-header">
|
||||
<img class="app-icon light-only" src={LogoLight} width="320px" aria-label="Space Social"/>
|
||||
<img class="app-icon dark-only" src={LogoDark} width="320px" aria-label="Space Social"/>
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
<div id="nav-items">
|
||||
<Button label="Timeline" on:click={() => goTimeline()} active>🖼️ Timeline</Button>
|
||||
|
|
@ -104,7 +110,7 @@
|
|||
background-color: var(--bg-800);
|
||||
}
|
||||
|
||||
#instance-header {
|
||||
.instance-header {
|
||||
width: 100%;
|
||||
height: 172px;
|
||||
display: flex;
|
||||
|
|
@ -118,18 +124,14 @@
|
|||
}
|
||||
|
||||
.instance-icon {
|
||||
height: 92px;
|
||||
height: 50%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.instance-icon-mask {
|
||||
width: 80%;
|
||||
.app-icon {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
margin: auto;
|
||||
background-color: var(--text);
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-origin: border-box;
|
||||
-webkit-mask-origin: border-box;
|
||||
}
|
||||
|
||||
#nav-items {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<script>
|
||||
import '$lib/app.css';
|
||||
import LogoLight from '$lib/../img/spacesocial-logo-light.svg';
|
||||
import LogoDark from '$lib/../img/spacesocial-logo-dark.svg';
|
||||
import Navigation from '$lib/ui/Navigation.svelte';
|
||||
import Widgets from '$lib/ui/Widgets.svelte';
|
||||
import Feed from '$lib/ui/Feed.svelte';
|
||||
|
|
@ -8,8 +10,8 @@
|
|||
import { get } from 'svelte/store';
|
||||
|
||||
let client = get(Client.get());
|
||||
let ready = client.app;
|
||||
let logged_in = ready && client.app.token;
|
||||
let ready = !!client;
|
||||
let logged_in = client.app && client.app.token;
|
||||
let instance_url_error = false;
|
||||
let logging_in = false;
|
||||
|
||||
|
|
@ -33,10 +35,18 @@
|
|||
}
|
||||
|
||||
function log_in(event) {
|
||||
logging_in = true;
|
||||
event.preventDefault();
|
||||
instance_url_error = false;
|
||||
|
||||
logging_in = true;
|
||||
const host = event.target.host.value;
|
||||
|
||||
if (!host || host === "") {
|
||||
instance_url_error = "Please enter an instance domain.";
|
||||
logging_in = false;
|
||||
return;
|
||||
}
|
||||
|
||||
client.init(host).then(res => {
|
||||
logging_in = false;
|
||||
if (!res) return;
|
||||
|
|
@ -70,30 +80,29 @@
|
|||
|
||||
<Feed />
|
||||
{:else}
|
||||
<div>
|
||||
<form on:submit={log_in} id="login">
|
||||
<h1>Space Social</h1>
|
||||
<p>Welcome, fediverse user!</p>
|
||||
<p>Please enter your instance domain to log in.</p>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
|
||||
{#if instance_url_error}
|
||||
<p class="error">{instance_url_error}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<form on:submit={log_in} id="login-form">
|
||||
<img class="app-icon light-only" src={LogoLight} width="320px" aria-label="Space Social"/>
|
||||
<img class="app-icon dark-only" src={LogoDark} width="320px" aria-label="Space Social"/>
|
||||
<p>Welcome, fediverse user!</p>
|
||||
<p>Please enter your instance domain to log in.</p>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
|
||||
{#if instance_url_error}
|
||||
<p class="error">{instance_url_error}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<br>
|
||||
<button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
|
||||
<p><small>
|
||||
Please note this is
|
||||
<strong><em>extremely experimental software</em></strong>;
|
||||
things are likely to break!
|
||||
<br>
|
||||
<button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
|
||||
<p><small>
|
||||
Please note this is
|
||||
<strong><em>extremely experimental software</em></strong>;
|
||||
things are likely to break!
|
||||
<br>
|
||||
If that's all cool with you, welcome aboard!
|
||||
</small></p>
|
||||
If that's all cool with you, welcome aboard!
|
||||
</small></p>
|
||||
|
||||
<p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
|
||||
</form>
|
||||
</div>
|
||||
<p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
|
||||
</form>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="loading throb">
|
||||
|
|
@ -109,9 +118,12 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
form#login {
|
||||
margin: 25vh 0 32px 0;
|
||||
text-align: center;
|
||||
form#login-form {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -165,7 +177,7 @@
|
|||
}
|
||||
|
||||
button#login {
|
||||
margin: -8px auto 0 auto;
|
||||
margin: 8px auto;
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -215,7 +227,7 @@
|
|||
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -240,4 +252,9 @@
|
|||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 320px;
|
||||
margin: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue