Replace CSS classes with semantic HTML
This commit is contained in:
@@ -174,142 +174,142 @@ onDestroy(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="limit_width">
|
||||
<h2>Account information</h2>
|
||||
<ul>
|
||||
<li>Username: {window.user.username}</li>
|
||||
<li>E-mail address: {window.user.email}</li>
|
||||
<li>
|
||||
Supporter level: {window.user.subscription.name}
|
||||
{#if window.user.subscription.type === "patreon"}
|
||||
(<a href="https://www.patreon.com/join/pixeldrain/checkout?edit=1">Manage subscription</a>)
|
||||
{/if}
|
||||
<ul>
|
||||
<li>
|
||||
Max file size: {formatDataVolume(window.user.subscription.file_size_limit, 3)}
|
||||
</li>
|
||||
{#if window.user.subscription.file_expiry_days > 0}
|
||||
<li>Files expire after {window.user.subscription.file_expiry_days} days</li>
|
||||
{:else}
|
||||
<li>Files never expire</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</li>
|
||||
{#if window.user.balance_micro_eur !== 0}
|
||||
<li>
|
||||
Current account balance: <Euro amount={window.user.balance_micro_eur}></Euro>
|
||||
</li>
|
||||
<section>
|
||||
<h2>Account information</h2>
|
||||
<ul>
|
||||
<li>Username: {window.user.username}</li>
|
||||
<li>E-mail address: {window.user.email}</li>
|
||||
<li>
|
||||
Supporter level: {window.user.subscription.name}
|
||||
{#if window.user.subscription.type === "patreon"}
|
||||
(<a href="https://www.patreon.com/join/pixeldrain/checkout?edit=1">Manage subscription</a>)
|
||||
{/if}
|
||||
</ul>
|
||||
|
||||
{#if window.user.subscription.storage_space === -1}
|
||||
Storage space used: {formatDataVolume(storage_space_used, 3)}<br/>
|
||||
{:else}
|
||||
<StorageProgressBar used={storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
|
||||
<ul>
|
||||
<li>
|
||||
Max file size: {formatDataVolume(window.user.subscription.file_size_limit, 3)}
|
||||
</li>
|
||||
{#if window.user.subscription.file_expiry_days > 0}
|
||||
<li>Files expire after {window.user.subscription.file_expiry_days} days</li>
|
||||
{:else}
|
||||
<li>Files never expire</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</li>
|
||||
{#if window.user.balance_micro_eur !== 0}
|
||||
<li>
|
||||
Current account balance: <Euro amount={window.user.balance_micro_eur}></Euro>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
|
||||
{#if transfer_cap === -1}
|
||||
Paid transfers in the last 30 days: {formatDataVolume(transfer_used, 3)}<br/>
|
||||
{:else}
|
||||
Paid transfers:
|
||||
{formatDataVolume(transfer_used, 3)}
|
||||
out of
|
||||
{formatDataVolume(transfer_cap, 3)}
|
||||
(<a href="/user/subscription">Set your transfer limit on the subscription page</a>)
|
||||
<HotlinkProgressBar used={transfer_used} total={transfer_cap}></HotlinkProgressBar>
|
||||
{/if}
|
||||
{#if window.user.subscription.storage_space === -1}
|
||||
Storage space used: {formatDataVolume(storage_space_used, 3)}<br/>
|
||||
{:else}
|
||||
<StorageProgressBar used={storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
|
||||
{/if}
|
||||
|
||||
<h3>Exports</h3>
|
||||
<div style="text-align: center;">
|
||||
<a href="/user/export/files" class="button">
|
||||
<i class="icon">list</i>
|
||||
Export uploaded files to CSV
|
||||
</a>
|
||||
<a href="/user/export/lists" class="button">
|
||||
<i class="icon">list</i>
|
||||
Export created lists to CSV
|
||||
</a>
|
||||
</div>
|
||||
{#if transfer_cap === -1}
|
||||
Paid transfers in the last 30 days: {formatDataVolume(transfer_used, 3)}<br/>
|
||||
{:else}
|
||||
Paid transfers:
|
||||
{formatDataVolume(transfer_used, 3)}
|
||||
out of
|
||||
{formatDataVolume(transfer_cap, 3)}
|
||||
(<a href="/user/subscription">Set your transfer limit on the subscription page</a>)
|
||||
<HotlinkProgressBar used={transfer_used} total={transfer_cap}></HotlinkProgressBar>
|
||||
{/if}
|
||||
|
||||
<h2>Statistics</h2>
|
||||
<p>
|
||||
Here you can see how often your files are viewed, downloaded
|
||||
and how much bandwidth they consume. The buttons at the top
|
||||
can be pressed to adjust the timeframe. If you choose 'Day'
|
||||
the statistics will be updated periodically. No need to
|
||||
refresh the page.
|
||||
</p>
|
||||
<h3>Exports</h3>
|
||||
<div style="text-align: center;">
|
||||
<a href="/user/export/files" class="button">
|
||||
<i class="icon">list</i>
|
||||
Export uploaded files to CSV
|
||||
</a>
|
||||
<a href="/user/export/lists" class="button">
|
||||
<i class="icon">list</i>
|
||||
Export created lists to CSV
|
||||
</a>
|
||||
</div>
|
||||
<div class="highlight_light">
|
||||
<button
|
||||
on:click={() => { update_graphs(1440, 1, true) }}
|
||||
class:button_highlight={graph_timespan == 1440}>
|
||||
Day (1m)
|
||||
</button>
|
||||
<button
|
||||
on:click={() => { update_graphs(10080, 10, false) }}
|
||||
class:button_highlight={graph_timespan == 10080}>
|
||||
Week (10m)
|
||||
</button>
|
||||
<button
|
||||
on:click={() => { update_graphs(20160, 60, false) }}
|
||||
class:button_highlight={graph_timespan == 20160}>
|
||||
Two Weeks (1h)
|
||||
</button>
|
||||
<button
|
||||
on:click={() => { update_graphs(43200, 1440, false) }}
|
||||
class:button_highlight={graph_timespan == 43200}>
|
||||
Month (1d)
|
||||
</button>
|
||||
<button
|
||||
on:click={() => { update_graphs(131400, 1440, false) }}
|
||||
class:button_highlight={graph_timespan == 131400}>
|
||||
Quarter (1d)
|
||||
</button>
|
||||
<button
|
||||
on:click={() => { update_graphs(525600, 1440, false) }}
|
||||
class:button_highlight={graph_timespan == 525600}>
|
||||
Year (1d)
|
||||
</button>
|
||||
<button
|
||||
on:click={() => { update_graphs(1051200, 1440, false) }}
|
||||
class:button_highlight={graph_timespan == 1051200}>
|
||||
Two Years (1d)
|
||||
</button>
|
||||
<br/>
|
||||
Total usage from {time_start} to {time_end}<br/>
|
||||
{formatThousands(total_views)} views,
|
||||
{formatThousands(total_downloads)} downloads,
|
||||
{formatDataVolume(total_bandwidth, 3)} bandwidth and
|
||||
{formatDataVolume(total_transfer_paid, 3)} paid transfers
|
||||
</div>
|
||||
<div class="limit_width">
|
||||
<h3>Premium transfers and total bandwidth usage</h3>
|
||||
<p>
|
||||
A premium transfer is when a file is downloaded using the data cap
|
||||
on your subscription plan. These can be files you downloaded from
|
||||
other people, or other people downloading your files if you have
|
||||
bandwidth sharing enabled. Bandwidth sharing can be changed on
|
||||
<a href="/user/subscription">the subscription page</a>.
|
||||
</p>
|
||||
<p>
|
||||
Total bandwidth usage is the combined bandwidth usage of all the
|
||||
files on your account. This includes paid transfers.
|
||||
</p>
|
||||
</div>
|
||||
<Chart bind:this={graph_bandwidth} data_type="bytes"/>
|
||||
<div class="limit_width">
|
||||
<h3>Views and downloads</h3>
|
||||
<p>
|
||||
A view is counted when someone visits the download page of one of
|
||||
your files. Views are unique per user per file.
|
||||
</p>
|
||||
<p>
|
||||
Downloads are counted when a user clicks the download button on one
|
||||
of your files. It does not matter whether the download is completed
|
||||
or not, only the start of the download is counted.
|
||||
</p>
|
||||
</div>
|
||||
<Chart bind:this={graph_views_downloads} data_type="number"/>
|
||||
|
||||
<h2>Statistics</h2>
|
||||
<p>
|
||||
Here you can see how often your files are viewed, downloaded
|
||||
and how much bandwidth they consume. The buttons at the top
|
||||
can be pressed to adjust the timeframe. If you choose 'Day'
|
||||
the statistics will be updated periodically. No need to
|
||||
refresh the page.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="highlight_light">
|
||||
<button
|
||||
on:click={() => { update_graphs(1440, 1, true) }}
|
||||
class:button_highlight={graph_timespan == 1440}>
|
||||
Day (1m)
|
||||
</button>
|
||||
<button
|
||||
on:click={() => { update_graphs(10080, 10, false) }}
|
||||
class:button_highlight={graph_timespan == 10080}>
|
||||
Week (10m)
|
||||
</button>
|
||||
<button
|
||||
on:click={() => { update_graphs(20160, 60, false) }}
|
||||
class:button_highlight={graph_timespan == 20160}>
|
||||
Two Weeks (1h)
|
||||
</button>
|
||||
<button
|
||||
on:click={() => { update_graphs(43200, 1440, false) }}
|
||||
class:button_highlight={graph_timespan == 43200}>
|
||||
Month (1d)
|
||||
</button>
|
||||
<button
|
||||
on:click={() => { update_graphs(131400, 1440, false) }}
|
||||
class:button_highlight={graph_timespan == 131400}>
|
||||
Quarter (1d)
|
||||
</button>
|
||||
<button
|
||||
on:click={() => { update_graphs(525600, 1440, false) }}
|
||||
class:button_highlight={graph_timespan == 525600}>
|
||||
Year (1d)
|
||||
</button>
|
||||
<button
|
||||
on:click={() => { update_graphs(1051200, 1440, false) }}
|
||||
class:button_highlight={graph_timespan == 1051200}>
|
||||
Two Years (1d)
|
||||
</button>
|
||||
<br/>
|
||||
Total usage from {time_start} to {time_end}<br/>
|
||||
{formatThousands(total_views)} views,
|
||||
{formatThousands(total_downloads)} downloads,
|
||||
{formatDataVolume(total_bandwidth, 3)} bandwidth and
|
||||
{formatDataVolume(total_transfer_paid, 3)} paid transfers
|
||||
</div>
|
||||
<section>
|
||||
<h3>Premium transfers and total bandwidth usage</h3>
|
||||
<p>
|
||||
A premium transfer is when a file is downloaded using the data cap
|
||||
on your subscription plan. These can be files you downloaded from
|
||||
other people, or other people downloading your files if you have
|
||||
bandwidth sharing enabled. Bandwidth sharing can be changed on
|
||||
<a href="/user/subscription">the subscription page</a>.
|
||||
</p>
|
||||
<p>
|
||||
Total bandwidth usage is the combined bandwidth usage of all the
|
||||
files on your account. This includes paid transfers.
|
||||
</p>
|
||||
</section>
|
||||
<Chart bind:this={graph_bandwidth} data_type="bytes"/>
|
||||
|
||||
<section>
|
||||
<h3>Views and downloads</h3>
|
||||
<p>
|
||||
A view is counted when someone visits the download page of one of
|
||||
your files. Views are unique per user per file.
|
||||
</p>
|
||||
<p>
|
||||
Downloads are counted when a user clicks the download button on one
|
||||
of your files. It does not matter whether the download is completed
|
||||
or not, only the start of the download is counted.
|
||||
</p>
|
||||
</section>
|
||||
<Chart bind:this={graph_views_downloads} data_type="number"/>
|
||||
|
||||
Reference in New Issue
Block a user