pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update styles

Browse Source
This commit is contained in:
Fornax
2022-10-11 14:21:06 +02:00
parent 2ed58774b7
commit 14df7e8a70
49 changed files with 900 additions and 662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
svelte/src/admin_panel.js
View File

@@ -1,7 +1,7 @@
import App from './admin_panel/Router.svelte';
const app = new App({
target: document.getElementById("page_content"),
target: document.getElementById("page_body"),
props: {}
});

4
svelte/src/admin_panel/Home.svelte
View File

@@ -163,7 +163,7 @@ onDestroy(() => {
<section>
<h3>Bandwidth usage and file views</h3>
</section>
<div class="highlight_shaded" style="margin-bottom: 6px;">
<div class="highlight_border" style="margin-bottom: 6px;">
<button on:click={() => loadGraph(1440, 1, true)}>Day 1m</button>
<button on:click={() => loadGraph(10080, 10, true)}>Week 10m</button>
<button on:click={() => loadGraph(43200, 60, true)}>Month 1h</button>
@@ -174,7 +174,7 @@ onDestroy(() => {
</div>
<Chart bind:this={graphBandwidth} data_type="bytes" legend={false} />
<Chart bind:this={graphViews} data_type="number" legend={false} />
<div class="highlight_shaded">
<div class="highlight_border">
Total usage from {start_time} to {end_time}<br/>
{formatDataVolume(total_bandwidth, 3)} bandwidth,
{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth,

30
svelte/src/admin_panel/Router.svelte
View File

@@ -6,6 +6,7 @@ import Home from "./Home.svelte"
import { onMount } from "svelte";
import BlockFiles from "./BlockFiles.svelte";
import Subscriptions from "./Subscriptions.svelte";
import Footer from "../layout/Footer.svelte";
let page = ""
@@ -79,16 +80,19 @@ onMount(() => {
</div>
</header>
{#if page === "status"}
<Home></Home>
{:else if page === "block_files"}
<BlockFiles></BlockFiles>
{:else if page === "abuse_reports"}
<AbuseReports></AbuseReports>
{:else if page === "abuse_reporters"}
<AbuseReporters></AbuseReporters>
{:else if page === "ip_bans"}
<IpBans></IpBans>
{:else if page === "subscriptions"}
<Subscriptions></Subscriptions>
{/if}
<div id="page_content" class="page_content">
{#if page === "status"}
<Home></Home>
{:else if page === "block_files"}
<BlockFiles></BlockFiles>
{:else if page === "abuse_reports"}
<AbuseReports></AbuseReports>
{:else if page === "abuse_reporters"}
<AbuseReporters></AbuseReporters>
{:else if page === "ip_bans"}
<IpBans></IpBans>
{:else if page === "subscriptions"}
<Subscriptions></Subscriptions>
{/if}
</div>
<Footer/>

11
svelte/src/file_viewer/AdLeaderboard.svelte
View File

@@ -14,10 +14,17 @@ onMount(() => {
return
}
if (Math.random() < 0.1) {
// 10% pixeldrain socials
// 45% nextmillennium
// 45% pixfuture
let rand = Math.random()
if (rand < 0.1) {
set_ad_type("pixeldrain_social")
} else {
} else if (rand < 0.55) {
set_ad_type("nextmillennium")
} else {
set_ad_type("pixfuture")
}
})

8
svelte/src/file_viewer/EditWindow.svelte
View File

@@ -152,10 +152,10 @@ let delete_list = async e => {
{#if list.can_edit}
<h3>Edit album</h3>
<h4>Rename</h4>
Name:<br/>
<form on:submit={rename_list} style="display: flex;">
<input bind:value={list_name} type="text" style="flex: 1 1 auto"/>
<button type="submit" style="flex: 0 0 auto">
<button type="submit" style="flex: 0 0 auto" class="button_highlight">
<i class="icon">save</i> Save
</button>
</form>
@@ -171,10 +171,10 @@ let delete_list = async e => {
{#if file.can_edit}
<h3>Edit file</h3>
<h4>Rename</h4>
Name:<br/>
<form on:submit={rename_file} style="display: flex;">
<input bind:value={file_name} type="text" style="flex: 1 1 auto"/>
<button type="submit" style="flex: 0 0 auto">
<button type="submit" style="flex: 0 0 auto" class="button_highlight">
<i class="icon">save</i> Save
</button>
</form>

3
svelte/src/file_viewer/EmbedWindow.svelte
View File

@@ -204,4 +204,7 @@ const update_example = () => {
width: 100%;
overflow: hidden;
}
.tab_bar {
border-bottom: 2px solid var(--separator);
}
</style>

2
svelte/src/home_page.js
View File

@@ -1,7 +1,7 @@
import App from './home_page/HomePage.svelte';
const app = new App({
target: document.getElementById("page_content"),
target: document.getElementById("page_body"),
props: {}
});

121
svelte/src/home_page/HomePage.svelte
View File

@@ -1,74 +1,78 @@
<script>
import Footer from "../layout/Footer.svelte";
import FeatureTable from "./FeatureTable.svelte";
import ForCreators from "./ForCreators.svelte";
import OtherPlans from "./OtherPlans.svelte";
import UploadWidget from "./UploadWidget.svelte";
</script>
<header>
<div class="header_image_container"></div>
</header>
<UploadWidget></UploadWidget>
<div id="page_content" class="page_content">
<header>
<div class="header_image_container"></div>
</header>
<header>
<h1>What is pixeldrain?</h1>
</header>
<UploadWidget></UploadWidget>
<section>
<p>
Pixeldrain is a file sharing website built for speed and ease of
use. You can upload files you want to share online to our
servers and we will hold on to them for at least a month. During
this time anyone with the link will be able to download your
files. Pixeldrain is built to be as fast as possible, so you
don't have to do any unnecessary waiting when downloading files.
</p>
<p>
Files can be uploaded by clicking the big green upload
button, or by dragging them onto this page from your file
manager.
</p>
<h2>Accounts</h2>
<p>
An account is not required to use pixeldrain, but it enables some useful
features. With a pixeldrain account you can access your files and albums
on all your devices. You can also rename and delete files you have
uploaded. And create and reorder albums you have created. Sign up for a
pixeldrain account on <a href="/register">the registration page</a>.
More about pixeldrain's features below.
</p>
</section>
<header>
<h1 id="pro">Getting more out of pixeldrain</h1>
</header>
<section>
<p>
By purchasing a subscription you support pixeldrain on its mission to
make content sharing easier, safer and faster for everyone. The standard
subscription plans use Patreon for payment processing. Check out our <a
href="#prepaid">prepaid plans</a> if you are interested in more
professional services.
</p>
<br/>
<FeatureTable></FeatureTable>
<br/>
<div style="text-align: center;">
Do you need even more time and space? Check out our other plans
</div>
<br/>
<OtherPlans></OtherPlans>
<br/>
</section>
<header>
<h1>What is pixeldrain?</h1>
</header>
<ForCreators/>
<br/>
<br/>
<section>
<p>
Pixeldrain is a file sharing website built for speed and ease of
use. You can upload files you want to share online to our
servers and we will hold on to them for at least a month. During
this time anyone with the link will be able to download your
files. Pixeldrain is built to be as fast as possible, so you
don't have to do any unnecessary waiting when downloading files.
</p>
<p>
Files can be uploaded by clicking the big green upload
button, or by dragging them onto this page from your file
manager.
</p>
<h2>Accounts</h2>
<p>
An account is not required to use pixeldrain, but it enables some useful
features. With a pixeldrain account you can access your files and albums
on all your devices. You can also rename and delete files you have
uploaded. And create and reorder albums you have created. Sign up for a
pixeldrain account on <a href="/register">the registration page</a>.
More about pixeldrain's features below.
</p>
</section>
<header>
<h1 id="pro">Getting more out of pixeldrain</h1>
</header>
<section>
<p>
By purchasing a subscription you support pixeldrain on its mission to
make content sharing easier, safer and faster for everyone. The standard
subscription plans use Patreon for payment processing. Check out our <a
href="#prepaid">prepaid plans</a> if you are interested in more
professional services.
</p>
<br/>
<FeatureTable></FeatureTable>
<br/>
<div style="text-align: center;">
Do you need even more time and space? Check out our other plans
</div>
<br/>
<OtherPlans></OtherPlans>
<br/>
</section>
<ForCreators/>
<br/>
<br/>
<Footer></Footer>
</div>
<style>
.header_image_container {
margin: auto;
height: 300px;
height: 200px;
width: 750px;
max-width: 100%;
background-image: url("/res/img/header_orbitron_wide.webp");
@@ -76,9 +80,8 @@ import UploadWidget from "./UploadWidget.svelte";
background-size: contain;
background-position: center;
}
@media (max-width: 700px) {
@media (max-width: 600px) {
.header_image_container {
height: 250px;
background-image: url("/res/img/header_orbitron.webp");
}
}

2
svelte/src/home_page/UploadProgressBar.svelte
View File

@@ -229,7 +229,7 @@ export const start = () => {
width: 440px;
max-width: 95%;
height: 4em;
margin: 10px;
margin: 6px;
padding: 0;
overflow: hidden;
border-radius: 6px;

16
svelte/src/home_page/UploadWidget.svelte
View File

@@ -404,7 +404,6 @@ const keydown = (e) => {
You can also drop files on this page from your file manager or
paste an image from your clipboard
</section>
<br/>
<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/>
<button on:click={() => { file_input_field.click() }} class="big_button button_highlight">
@@ -421,7 +420,7 @@ const keydown = (e) => {
By uploading files to pixeldrain you acknowledge and accept our
<a href="/about#content-policy">content policy</a>.
<p>
<br/>
<section class="instruction" style="margin-bottom: 0;">
<span class="big_number">2</span>
<span class="instruction_text">Wait for the files to finish uploading</span>
@@ -434,13 +433,12 @@ const keydown = (e) => {
</div>
<ProgressBar total={total_size} used={total_loaded} animation="linear" speed={stats_interval_ms}/>
</section>
<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
Gimme gimme gimme!<br/>
Drop your files to upload them
</div>
<br/>
<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
Gimme gimme gimme!<br/>
Drop your files to upload them
</div>
</section>
{#each upload_queue as file}
<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
@@ -559,7 +557,7 @@ const keydown = (e) => {
<style>
.big_button{
width: 40%;
min-width: 250px;
min-width: 300px;
max-width: 400px;
margin: 10px !important;
border-radius: 32px;

6
svelte/src/icons/Github.svelte Normal file
View File

@@ -0,0 +1,6 @@
<script>export let style;</script>
<svg style={style} role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>

6
svelte/src/icons/Mastodon.svelte Normal file
View File

@@ -0,0 +1,6 @@
<script>export let style;</script>
<svg style={style} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 216.4144 232.00976">
<path fill="currentColor" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
<!-- <path fill="#000000" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/> -->
</svg>

8
svelte/src/icons/Patreon.svelte Normal file
View File

@@ -0,0 +1,8 @@
<script>export let style;</script>
<svg style={style} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 100 100">
<g fill="currentColor" fill-rule="evenodd">
<path d="M64.1102,0.1004 C44.259,0.1004 28.1086,16.2486 28.1086,36.0986 C28.1086,55.8884 44.259,71.989 64.1102,71.989 C83.9,71.989 100,55.8884 100,36.0986 C100,16.2486 83.9,0.1004 64.1102,0.1004"/>
<polygon points=".012 95.988 17.59 95.988 17.59 .1 .012 .1"/>
</g>
</svg>

48
svelte/src/layout/Footer.svelte Normal file
View File

@@ -0,0 +1,48 @@
<script>
import Github from "../icons/Github.svelte";
import Mastodon from "../icons/Mastodon.svelte";
import Patreon from "../icons/Patreon.svelte";
import Reddit from "../icons/Reddit.svelte";
import Twitter from "../icons/Twitter.svelte";
</script>
<footer>
<div class="footer_content">
<div style="display: inline-block; margin: 0 8px 0 8px;">
Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
</div>
<div style="display: inline-block; margin: 0 8px 0 8px;">
(
<a href="https://www.patreon.com/pixeldrain" target="_blank">
<Patreon style="color: var(--body_text_color);"/> Patreon
</a> |
<a href="https://twitter.com/Fornax96" target="_blank">
<Twitter style="color: var(--body_text_color);"/> Twitter
</a> |
<a href="https://reddit.com/r/pixeldrain" target="_blank">
<Reddit style="color: var(--body_text_color);"/> Reddit
</a> |
<a href="https://github.com/Fornaxian" target="_blank">
<Github style="color: var(--body_text_color);"/> GitHub
</a> |
<a href="https://mastodon.social/web/@fornax" target="_blank">
<Mastodon style="color: var(--body_text_color);"/> Mastodon
</a>
)
</div>
<br/>
<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
page rendered by {window.server_hostname}
</span>
</div>
</footer>
<style>
.footer_content {
background-color: var(--body_background);
color: var(--body_text_color);
display: inline-block;
border-radius: 8px;
margin: 160px 0 60px 0;
}
</style>

84
svelte/src/layout/Menu.svelte Normal file
View File

@@ -0,0 +1,84 @@
<script>
let nav;
export const toggle = () => {
var body = document.getElementById("page_body");
if (nav.offsetLeft === 0) {
// Menu is visible, hide it
nav.style.left = -nav.offsetWidth + "px";
body.style.marginLeft = "0";
} else {
// Menu is hidden, show it
nav.style.left = "0";
body.style.marginLeft = nav.offsetWidth + "px";
}
}
export const reset = () => {
nav.style.left = "";
document.getElementById("page_body").style.marginLeft = "";
}
</script>
<button id="button_toggle_navigation" class="button_toggle_navigation" on:click={toggle}>☰</button>
<nav bind:this={nav} id="page_navigation" class="page_navigation">
<a href="/#">Home</a>
<a href="/#prepaid">For Creators</a>
<hr />
{#if window.user !== ""}
<a href="/user">{window.user.username}</a>
<a href="/user/filemanager#files">My Files</a>
<a href="/user/filemanager#lists">My Albums</a>
{#if window.user.is_admin}
<a href="/user/buckets">Buckets</a>
<a href="/admin">Admin Panel</a>
{/if}
<a href="/logout">Log out</a>
{:else}
<a href="/login">Login</a>
<a href="/register">Register</a>
<a href="/history">Upload History</a>
{/if}
<hr />
<a href="/about">About</a>
<a href="/apps">Apps</a>
<a href="/appearance">Theme</a>
<a href="/api">API</a>
<a href="/acknowledgements">Acknowledgements</a>
<a href="https://stats.uptimerobot.com/p9v2ktzyjm" target="_blank">Server Status</a>
</nav>
<style>
.button_toggle_navigation {
position: fixed;
backface-visibility: hidden;
z-index: 10;
top: 0;
left: 0;
padding: 10px 20px 15px 10px;
font-size: 2em;
margin: 0;
background: #3f3f3f;
background: var(--input_background);
border-radius: 0;
border-bottom-right-radius: 90%;
}
.button_toggle_navigation:active {
padding: 15px 15px 10px 15px;
}
.page_navigation {
position: fixed;
backface-visibility: hidden;
background: var(--navigation_background);
width: 17em;
height: 100%;
left: 0;
float: left;
padding: 20px 10px 10px 0;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
transition: left 0.5s;
}
</style>

2
svelte/src/user_buckets.js
View File

@@ -1,7 +1,7 @@
import App from './user_buckets/UserBuckets.svelte';
const app = new App({
target: document.getElementById("page_content"),
target: document.getElementById("page_body"),
props: {}
});

77
svelte/src/user_buckets/UserBuckets.svelte
View File

@@ -3,6 +3,7 @@ import { onMount } from "svelte";
import UserBucket from "./UserBucket.svelte";
import { fs_get_buckets, fs_create_bucket } from "../filesystem/FilesystemAPI.svelte";
import LoadingIndicator from "../util/LoadingIndicator.svelte";
import Footer from "../layout/Footer.svelte";
let loading = true
let buckets = []
@@ -43,40 +44,46 @@ onMount(get_buckets);
<LoadingIndicator loading={loading}/>
<section>
<div class="toolbar" style="text-align: right;">
<button
class:button_highlight={creating_bucket}
on:click={() => {creating_bucket = !creating_bucket}}
>
<i class="icon">create_new_folder</i> New bucket
</button>
</div>
{#if creating_bucket}
<div class="highlight_shaded">
<form on:submit|preventDefault={create_bucket}>
<table class="form">
<tr>
<td>
Name
</td>
<td>
<input type="text" bind:this={new_bucket_name}/>
</td>
</tr>
<tr>
<td colspan="2">
<button class="button_highlight" type="submit" style="float: right;">
<i class="icon">save</i> Save
</button>
</td>
</tr>
</table>
</form>
<header>
<h1>My Buckets</h1>
</header>
<div id="page_content" class="page_content">
<section>
<div class="toolbar" style="text-align: right;">
<button
class:button_highlight={creating_bucket}
on:click={() => {creating_bucket = !creating_bucket}}
>
<i class="icon">create_new_folder</i> New bucket
</button>
</div>
{/if}
{#if creating_bucket}
<div class="highlight_shaded">
<form on:submit|preventDefault={create_bucket}>
<table class="form">
<tr>
<td>
Name
</td>
<td>
<input type="text" bind:this={new_bucket_name}/>
</td>
</tr>
<tr>
<td colspan="2">
<button class="button_highlight" type="submit" style="float: right;">
<i class="icon">save</i> Save
</button>
</td>
</tr>
</table>
</form>
</div>
{/if}
{#each buckets as bucket (bucket.id)}
<UserBucket bucket={bucket} on:refresh={get_buckets}></UserBucket>
{/each}
</section>
{#each buckets as bucket (bucket.id)}
<UserBucket bucket={bucket} on:refresh={get_buckets}></UserBucket>
{/each}
</section>
</div>
<Footer/>

2
svelte/src/user_home.js
View File

@@ -1,7 +1,7 @@
import App from './user_home/Router.svelte';
const app = new App({
target: document.getElementById("page_content"),
target: document.getElementById("page_body"),
props: {}
});

1
svelte/src/user_home/APIKeys.svelte
View File

@@ -157,6 +157,7 @@ const logout = async (key) => {
</tr>
{/each}
</table>
<br/>
</div>
<style>

10
svelte/src/user_home/AccountSettings.svelte
View File

@@ -142,26 +142,26 @@ let delete_account = {
</script>
<section>
<h2>Account settings</h2>
<div class="highlight_shaded">
<br/>
<div class="highlight_border">
<h3>Change password</h3>
<Form config={password_change}></Form>
</div>
<br/>
<div class="highlight_shaded">
<div class="highlight_border">
<h3>Change e-mail address</h3>
<Form config={email_change}></Form>
</div>
<br/>
<div class="highlight_shaded">
<div class="highlight_border">
<h3>Change name</h3>
<Form config={name_change}></Form>
</div>
<br/>
<div class="highlight_shaded">
<div class="highlight_border">
<h3>Delete account</h3>
<Form config={delete_account}></Form>
</div>

6
svelte/src/user_home/Home.svelte
View File

@@ -280,7 +280,7 @@ onDestroy(() => {
the timeframe.
</p>
<div class="highlight_shaded">
<div class="highlight_border">
<button
on:click={() => update_graphs(1440, 1, true)}
class:button_highlight={graph_timespan == 1440}>
@@ -335,7 +335,7 @@ onDestroy(() => {
<Chart bind:this={graph_bandwidth} data_type="bytes"/>
<section>
<div class="highlight_shaded">
<div class="highlight_border">
Total usage from {time_start} to {time_end}<br/>
{formatDataVolume(total_bandwidth, 3)} bandwidth,
{formatDataVolume(total_transfer_paid, 3)} paid transfers
@@ -356,7 +356,7 @@ onDestroy(() => {
<Chart bind:this={graph_views_downloads} data_type="number"/>
<section>
<div class="highlight_shaded">
<div class="highlight_border">
Total usage from {time_start} to {time_end}<br/>
{formatThousands(total_views)} views and
{formatThousands(total_downloads)} downloads

40
svelte/src/user_home/Router.svelte
View File

@@ -8,6 +8,7 @@ import Subscription from "./Subscription.svelte";
import ConnectApp from "./ConnectApp.svelte";
import ActivityLog from "./ActivityLog.svelte";
import SharingSettings from "./SharingSettings.svelte";
import Footer from "../layout/Footer.svelte";
let page = ""
@@ -99,22 +100,23 @@ onMount(() => {
{/if}
</div>
</header>
<br/>
{#if page === "home"}
<Home/>
{:else if page === "settings"}
<AccountSettings/>
{:else if page === "sharing"}
<SharingSettings/>
{:else if page === "api_keys"}
<APIKeys/>
{:else if page === "activity"}
<ActivityLog/>
{:else if page === "connect_app"}
<ConnectApp/>
{:else if page === "transactions"}
<Transactions/>
{:else if page === "subscription"}
<Subscription/>
{/if}
<div id="page_content" class="page_content">
{#if page === "home"}
<Home/>
{:else if page === "settings"}
<AccountSettings/>
{:else if page === "sharing"}
<SharingSettings/>
{:else if page === "api_keys"}
<APIKeys/>
{:else if page === "activity"}
<ActivityLog/>
{:else if page === "connect_app"}
<ConnectApp/>
{:else if page === "transactions"}
<Transactions/>
{:else if page === "subscription"}
<Subscription/>
{/if}
</div>
<Footer/>

2
svelte/src/util/Modal.svelte
View File

@@ -52,7 +52,7 @@ const keydown = e => {
<div class="header">
<slot name="title">
<div class="title">{title}</div>
<button class="button button_red round" on:click={hide}>
<button class="button round" on:click={hide}>
<i class="icon">close</i>
</button>
</slot>