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

Redesign tab bar and tune shadows

Browse Source
This commit is contained in:
Wim Brand
2021-09-23 20:38:17 +02:00
parent fb26f17fb8
commit cbdbac49d7
19 changed files with 184 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
svelte/src/admin_panel.js
View File

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

2
svelte/src/admin_panel/AbuseReporters.svelte
View File

@@ -153,7 +153,7 @@ onMount(get_reporters);
<td>{formatDate(reporter.last_used, true, true, false)}</td>
<td>{formatDate(reporter.created, false, false, false)}</td>
<td>
<button on:click|preventDefault={() => {delete_reporter(reporter.email)}} class="button button_red">
<button on:click|preventDefault={() => {delete_reporter(reporter.email)}} class="button button_red round">
<i class="icon">delete</i>
</button>
</td>

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

@@ -155,42 +155,44 @@ onDestroy(() => {
</tr>
</table>
<h3>Pixelstore peers</h3>
<table>
<thead>
<tr>
<td>Address</td>
<td>Pos</td>
<td>Alive</td>
<td>Err</td>
<td>1m</td>
<td>5m</td>
<td>15m</td>
<td>Ping</td>
<td>Free</td>
<td>Min free</td>
</tr>
</thead>
<tbody>
{#each status.peers as peer}
<tr class="peer_row"
class:highlight_red={peer.free_space < peer.min_free_space / 2 || !peer.reachable}
class:highlight_blue={peer.free_space < peer.min_free_space}
class:highlight_green={peer.reachable}
>
<td>{peer.address}</td>
<td>{peer.position}</td>
<td>{peer.reachable}</td>
<td>{peer.unreachable_count}</td>
<td>{peer.load_1_min.toFixed(1)}</td>
<td>{peer.load_5_min.toFixed(1)}</td>
<td>{peer.load_15_min.toFixed(1)}</td>
<td>{formatDuration(peer.latency, 3)}</td>
<td>{formatDataVolume(peer.free_space, 4)}</td>
<td>{formatDataVolume(peer.min_free_space, 3)}</td>
</tr>
{/each}
</tbody>
</table>
<div class="table_scroll">
<table>
<thead>
<tr>
<td>Address</td>
<td>Pos</td>
<td>Alive</td>
<td>Err</td>
<td>1m</td>
<td>5m</td>
<td>15m</td>
<td>Ping</td>
<td>Free</td>
<td>Min free</td>
</tr>
</thead>
<tbody>
{#each status.peers as peer}
<tr class="peer_row"
class:highlight_red={peer.free_space < peer.min_free_space / 2 || !peer.reachable}
class:highlight_yellow={peer.free_space < peer.min_free_space}
class:highlight_green={peer.reachable}
>
<td>{peer.address}</td>
<td>{peer.position}</td>
<td>{peer.reachable}</td>
<td>{peer.unreachable_count}</td>
<td>{peer.load_1_min.toFixed(1)}</td>
<td>{peer.load_5_min.toFixed(1)}</td>
<td>{peer.load_15_min.toFixed(1)}</td>
<td>{formatDuration(peer.latency, 3)}</td>
<td>{formatDataVolume(peer.free_space, 4)}</td>
<td>{formatDataVolume(peer.min_free_space, 3)}</td>
</tr>
{/each}
</tbody>
</table>
</div>
<h3>Pixelstore stats</h3>
<table>
<thead>
@@ -236,32 +238,34 @@ onDestroy(() => {
</tbody>
</table>
<h3>Query statistics</h3>
<table>
<thead>
<tr>
<td style="cursor: pointer;" on:click={() => { getStats('query_name') }}>Query</td>
<td style="cursor: pointer;" on:click={() => { getStats('calls') }}>Calls</td>
<td style="cursor: pointer;" on:click={() => { getStats('average_duration') }}>Average Duration</td>
<td style="cursor: pointer;" on:click={() => { getStats('total_duration') }}>Total Duration</td>
<td>Callers</td>
</tr>
</thead>
<tbody id="tstat_body">
{#each status.query_statistics as q}
<div class="table_scroll" style="text-align: left;">
<table>
<thead>
<tr>
<td>{q.query_name}</td>
<td>{q.calls}</td>
<td>{formatDuration(q.average_duration, 3)}</td>
<td>{formatDuration(q.total_duration, 0)}</td>
<td>
{#each q.callers as caller}
{caller.count}x {caller.name}<br/>
{/each}
</td>
<td style="cursor: pointer;" on:click={() => { getStats('query_name') }}>Query</td>
<td style="cursor: pointer;" on:click={() => { getStats('calls') }}>Calls</td>
<td style="cursor: pointer;" on:click={() => { getStats('average_duration') }}>Avg dur</td>
<td style="cursor: pointer;" on:click={() => { getStats('total_duration') }}>Total dur</td>
<td>Callers</td>
</tr>
{/each}
</tbody>
</table>
</thead>
<tbody id="tstat_body">
{#each status.query_statistics as q}
<tr>
<td>{q.query_name}</td>
<td>{q.calls}</td>
<td>{q.average_duration}ms</td>
<td>{formatDuration(q.total_duration, 0)}</td>
<td>
{#each q.callers as caller}
{caller.count}x {caller.name}<br/>
{/each}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</div>

13
svelte/src/admin_panel/AdminPanel.svelte → svelte/src/admin_panel/Router.svelte
View File

@@ -26,44 +26,43 @@ onMount(() => {
<div>
<div class="tab_bar">
<a class="button tab"
<a class="button"
href="/admin"
class:button_highlight={page === "status"}
on:click|preventDefault={() => {navigate("status", "Status")}}>
<i class="icon">home</i>
Status
</a>
<a class="button tab" href="/admin/abuse">
<a class="button" href="/admin/abuse">
<i class="icon">block</i>
Block files
</a>
<a class="button tab"
<a class="button"
href="/admin/abuse_reports"
class:button_highlight={page === "abuse_reports"}
on:click|preventDefault={() => {navigate("abuse_reports", "Abuse reports")}}>
<i class="icon">flag</i>
User abuse reports
</a>
<a class="button tab"
<a class="button"
href="/admin/abuse_reporters"
class:button_highlight={page === "abuse_reporters"}
on:click|preventDefault={() => {navigate("abuse_reporters", "Abuse reporters")}}>
<i class="icon">report</i>
E-mail abuse reporters
</a>
<a class="button tab"
<a class="button"
href="/admin/ip_bans"
class:button_highlight={page === "ip_bans"}
on:click|preventDefault={() => {navigate("ip_bans", "IP bans")}}>
<i class="icon">remove_circle</i>
IP bans
</a>
<a class="button tab" href="/admin/globals">
<a class="button" href="/admin/globals">
<i class="icon">edit</i>
Update global settings
</a>
</div>
<hr/>
{#if page === "status"}
<Home></Home>

2
svelte/src/filesystem/Sharebar.svelte
View File

@@ -73,7 +73,7 @@ const share_tumblr = () => {
overflow-x: hidden;
float: left;
background-color: var(--layer_1_color);
box-shadow: inset 1px 1px var(--layer_1_shadow) var(--shadow_color);
box-shadow: inset 1px 1px 5px var(--shadow_color);
text-align: center;
z-index: 48;
overflow: hidden;

2
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -236,7 +236,7 @@ const toggle_select = () => {
margin: 16px 0 16px 0;
text-align: left;
background-color: var(--layer_2_color);
box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color);
box-shadow: 1px 1px 5px var(--shadow_color);
box-sizing: border-box;
border-collapse: collapse;
}

2
svelte/src/filesystem/filemanager/FileUploader.svelte
View File

@@ -197,7 +197,7 @@ const paste = (e) => {
margin: 6px 0 0 0;
padding: 0;
background-color: var(--layer_2_color);
box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color);
box-shadow: 1px 1px 5px var(--shadow_color);
}
.upload_progress_bar {

2
svelte/src/filesystem/viewers/Image.svelte
View File

@@ -76,7 +76,7 @@ const mouseup = (e) => {
top: 50%;
cursor: pointer;
transform: translateY(-50%);
box-shadow: 1px 1px var(--layer_3_shadow) var(--shadow_color);
box-shadow: 1px 1px 5px var(--shadow_color);
}
.image.zoom {
max-width: none;

2
svelte/src/filesystem/viewers/Video.svelte
View File

@@ -63,6 +63,6 @@ onMount(() => {
max-height: 100%;
top: 50%;
transform: translateY(-50%);
box-shadow: 1px 1px var(--layer_3_shadow) var(--shadow_color);
box-shadow: 1px 1px 5px var(--shadow_color);
}
</style>

2
svelte/src/user_buckets/UserBucket.svelte
View File

@@ -73,7 +73,7 @@ const delete_bucket = async () => {
text-decoration: none;
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);
box-shadow: 1px 1px 5px 0 var(--shadow_color);
margin: 1em 0;
border-radius: 8px;
overflow: hidden;

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

@@ -84,7 +84,7 @@ const logout = async (key) => {
{/if}
<div class="limit_width">
{#if !loaded}
<div class="highlight_blue">
<div class="highlight_yellow">
<h2>Warning</h2>
<p>
API keys are sensitive information. They can be used to gain

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

@@ -183,7 +183,7 @@ onDestroy(() => {
refresh the page.
</p>
</div>
<div class="highlight_dark">
<div class="highlight_light">
<button
on:click={() => { update_graphs(1440, 1, true) }}
class:button_highlight={graph_timespan == 1440}>

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

@@ -25,21 +25,21 @@ onMount(() => {
<div>
<div class="tab_bar">
<a class="button tab"
<a class="button"
href="/user"
class:button_highlight={page === ""}
on:click|preventDefault={() => {navigate("", "My home")}}>
<i class="icon">home</i>
My home
</a>
<a class="button tab"
<a class="button"
href="/user/settings"
class:button_highlight={page === "settings"}
on:click|preventDefault={() => {navigate("settings", "Account settings")}}>
<i class="icon">settings</i>
Account settings
</a>
<a class="button tab"
<a class="button"
href="/user/api_keys"
class:button_highlight={page === "api_keys"}
on:click|preventDefault={() => {navigate("api_keys", "API keys")}}>
@@ -47,7 +47,6 @@ onMount(() => {
API keys
</a>
</div>
<hr/>
{#if page === ""}
<Home></Home>

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

@@ -29,7 +29,7 @@ export const toggle = () => {
text-decoration: none;
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
margin: 1em 0;
border-radius: 8px;
overflow: hidden;