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

Another bunch of styling fixes

Browse Source
This commit is contained in:
Fornax
2022-03-22 23:02:47 +01:00
parent 8246d3668c
commit a2f6857d20
20 changed files with 111 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@ export let reporters = []
<td>Created</td>
<td></td>
</tr>
{#each reporters as rep (rep.from_address, rep.mail_server)}
{#each reporters as rep}
<tr>
<td>
{rep.from_address}<br/>

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

@@ -136,7 +136,7 @@ onMount(get_reporters);
</button>
</div>
{#if creating}
<div class="highlight_light">
<div class="highlight_shaded">
<form on:submit|preventDefault={create_reporter}>
<table class="form">
<tr>

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

@@ -71,7 +71,7 @@ onMount(() => {
<p>
Paste any pixeldrain file links in here to remove them
</p>
<div class="highlight_dark">
<div class="highlight_shaded">
<Form config={block_form}></Form>
</div>
</section>

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

@@ -162,7 +162,7 @@ onDestroy(() => {
<section>
<h3>Bandwidth usage and file views</h3>
</section>
<div class="highlight_dark" style="margin-bottom: 6px;">
<div class="highlight_shaded" style="margin-bottom: 6px;">
<button on:click={() => { loadGraph(1440, 1, true) }}>Day</button>
<button on:click={() => { loadGraph(10080, 10, false) }}>Week</button>
<button on:click={() => { loadGraph(20160, 60, false) }}>Two Weeks</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_dark">
<div class="highlight_shaded">
Total usage from {start_time} to {end_time}<br/>
{formatDataVolume(total_bandwidth, 3)} bandwidth,
{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth,

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

@@ -100,7 +100,7 @@ onMount(get_bans);
</button>
</div>
{#if creating}
<div class="highlight_light">
<div class="highlight_shaded">
<form on:submit|preventDefault={create_ban}>
<table class="form">
<tr>

6
svelte/src/admin_panel/Subscriptions.svelte
View File

@@ -184,17 +184,17 @@ onMount(get_coupons)
This adds credit to a user's account. You only need to enter one of
the user id, username or email.
</p>
<div class="highlight_dark">
<div class="highlight_shaded">
<Form config={credit_form}></Form>
</div>
<h2>Impersonate user</h2>
<div class="highlight_dark">
<div class="highlight_shaded">
<Form config={impersonate_form}></Form>
</div>
<h2>Create coupon codes</h2>
<div class="highlight_dark">
<div class="highlight_shaded">
<Form config={coupon_form}></Form>
</div>

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

@@ -157,6 +157,11 @@ const update_example = () => {
<ThemePicker on:theme_change={e => set_style(e.detail)}></ThemePicker>
{:else}
<h3>Direct link</h3>
<p>
Hotlinking is only supported on <a href="/#pro">Pro</a>
accounts. If this file was not uploaded with a Pro account the
download will be blocked.
</p>
<p>
You can directly download the file from this link without using the
file viewer:

3
svelte/src/file_viewer/viewers/TextBlock.svelte
View File

@@ -14,8 +14,7 @@ export let center = false
padding-left: 8px;
vertical-align: middle;
color: var(--layer_1_text_color);
background-color: rgba(0, 0, 0, 0.5);
background-color: var(--shaded_background);
border-radius: 8px;
padding: 8px;
}

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

@@ -26,7 +26,7 @@ let create_dir = () => {
onMount(() => { name_input.focus() })
</script>
<form class="create_dir highlight_dark" on:submit|preventDefault={create_dir}>
<form class="create_dir highlight_shaded" on:submit|preventDefault={create_dir}>
<img src="/res/img/mime/folder.png" class="icon" alt="icon"/>
<input class="dirname" type="text" style="width: 100%;" bind:this={name_input} bind:value={create_dir_name} />
<input class="submit" type="submit" value="create"/>

127
svelte/src/home_page/FeatureTable.svelte
View File

@@ -52,11 +52,6 @@ onMount(() => {
Transfer limit of <span class="text_highlight">1 terabyte</span> per
month. If the transfer limit is exceeded the restrictions of the
free plan will apply
<br/>
<button class="round" on:click={direct_linking.toggle}>
<i class="icon">info</i>
More information
</button>
</div>
</div>
<div>
@@ -72,6 +67,24 @@ onMount(() => {
account
</div>
</div>
<div>
<div class="feat_label">
Hotlinking / embedding files
</div>
<div class="feat_normal">
Hotlinking is not allowed, files which are being hotlinked will be
blocked
</div>
<div class="feat_pro">
<span class="text_highlight">Hotlinking is allowed</span> within
your data cap
<br/>
<button class="round" on:click={direct_linking.toggle}>
<i class="icon">info</i>
More information
</button>
</div>
</div>
<div>
<div class="feat_label">
Adver&shy;tise&shy;ments
@@ -149,55 +162,53 @@ onMount(() => {
<Modal bind:this={file_expiry} title="File Expiry Postponing" padding>
<p>
Files on pixeldrain have to expire eventually. If we didn't do
this the website would keep growing forever and we would run out
of money pretty quickly.
Files on pixeldrain have to expire eventually. If we didn't do this the
website would keep growing forever and we would run out of money pretty
quickly.
</p>
<p>
Unlike most other sharing sites pixeldrain uses a postponing
system for expiring files. When a file is freshly uploaded it
gets 30 days by default (90 days if you have the pro plan).
After these 30 days we will check when the file was last viewed.
Files which are regularly viewed could still bring new users to
the platform, it would be rude to show these people a File Not
Found page. So if the file was viewed in the last 30 days we
will simply postpone the next check a month. If the file was not
viewed however it will immediately be removed.
Unlike most other sharing sites pixeldrain uses a postponing system for
expiring files. When a file is freshly uploaded it gets 30 days by
default (90 days if you have the pro plan). After these 30 days we will
check when the file was last viewed. Files which are regularly viewed
could still bring new users to the platform, it would be rude to show
these people a File Not Found page. So if the file was viewed in the
last 30 days we will simply postpone the next check a month. If the file
was not viewed however it will immediately be removed.
</p>
<p>
Views are only counted when someone visits the download page in
a web browser. This makes sure that users can see that the file
comes from pixeldrain.
Views are only counted when someone visits the download page in a web
browser. This makes sure that users can see that the file comes from
pixeldrain.
</p>
<p>
This way we can minimize dead links, and you won't have to tell
your friends to 'hurry and download this before it expires'.
This way we can minimize dead links, and you won't have to tell your
friends to 'hurry and download this before it expires'.
</p>
</Modal>
<Modal bind:this={direct_linking} title="Hotlinking Bandwidth" padding>
<p>
Paying for bandwidth is the most expensive part of running
pixeldrain. Because of this we have to limit what can be
downloaded and by who.
Paying for bandwidth is the most expensive part of running pixeldrain.
Because of this we have to limit what can be downloaded and by who.
</p>
<p>
Normally when you view a file it's on pixeldrain's file viewer.
The file viewer is the page with the download button, the name
of the file and a frame where you can view the file if it's an
image, video, audio, PDF or text file.
Normally when you view a file it's on pixeldrain's file viewer. The file
viewer is the page with the download button, the name of the file and a
frame where you can view the file if it's an image, video, audio, PDF or
text file.
</p>
<h3>Rate limiting</h3>
<p>
It's also possible to link directly to a file instead of the
download page. This circumvents our advertisers and branding and
thus we lose money when people do this. That's why I added 'rate
limiting mode' to files. This mode is enabled when a file has
been downloaded three times more than it has been viewed through
the file viewer. When rate limiting mode is activated a file
cannot be downloaded through the API, the request needs to come
from the file viewer page. On the file viewer you will see a
CAPTCHA to fill in when you click the download button.
It's also possible to link directly to a file instead of the download
page. This circumvents our advertisers and branding and thus we lose
money when people do this. That's why I added 'hotlink protection mode'
to files. This mode is enabled when a file has been downloaded five
times more than it has been viewed through the file viewer. When hotlink
protection mode is activated a file cannot be downloaded through the
API, the request needs to come from the file viewer page. On the file
viewer you will see a CAPTCHA to fill in when you click the download
button.
</p>
<p>
More information about <a
@@ -206,43 +217,41 @@ onMount(() => {
</p>
<h3>Hotlinking with a Pro subscription</h3>
<p>
When you have a Pro subscription you will get a monthly data
transfer limit for all the files on your account combined. Files
you download from pixeldrain are subtracted from the data cap.
If you have <a href="/user/subscription">Bandwidth sharing</a>
When you have a Pro subscription you will get a monthly data transfer
limit for all the files on your account combined. Files you download
from pixeldrain are subtracted from the data cap. If you have <a
href="/user/subscription">Bandwidth sharing</a>
enabled your data cap is also used when other people download
your files.
</p>
<p>
In principle there is always someone who pays for the bandwidth
usage when a file is being downloaded:
In principle there is always someone who pays for the bandwidth usage
when a file is being downloaded:
</p>
<ol>
<li>
If the person downloading the file has a Pro subscription
their data cap is used.
If the person downloading the file has a Pro subscription their data
cap is used.
</li>
<li>
If the person who uploaded the file has a Pro subscription
and Bandwidth sharing is enabled on their account, then the
uploader's data cap is used.
If the person who uploaded the file has a Pro subscription and
Bandwidth sharing is enabled on their account, then the uploader's
data cap is used.
</li>
<li>
If neither the uploader nor the downloader has a Pro
subscription the download will be supported by
advertisements on the download page.
If neither the uploader nor the downloader has a Pro subscription
the download will be supported by advertisements on the download
page.
</li>
</ol>
<p>
The bandwidth cap on your account is a 30 day rolling window.
This means that bandwidth usage will expire 30 days after it was
used. Your counter will not reset at the start of the next
month.
The bandwidth cap on your account is a 30 day rolling window. This means
that bandwidth usage will expire 30 days after it was used. Your counter
will not reset at the start of the next month.
</p>
<p>
When a list of files is downloaded with the 'DL all files'
button each file in the resulting zip file will be counted
separately.
When a list of files is downloaded with the 'DL all files' button each
file in the resulting zip file will be counted separately.
</p>
</Modal>

8
svelte/src/text_upload/TextUpload.svelte
View File

@@ -67,7 +67,7 @@ const keydown = e => {
<svelte:window on:keydown={keydown}></svelte:window>
<div id="text_editor" class="text_editor">
<div id="headerbar" class="highlight_2 headerbar">
<div id="headerbar" class="headerbar">
<a href="/" class="button round">
<i class="icon">arrow_back</i>
</a>
@@ -119,6 +119,9 @@ const keydown = e => {
flex: 0 0 auto;
display: flex;
flex-direction: row;
padding: 4px;
background-color: var(--layer_1_color);
color: var(--layer_1_text_color);
}
.headerbar > * {
flex: 0 0 auto;
@@ -133,9 +136,10 @@ const keydown = e => {
}
.textarea {
position: relative;
display: block;
height: 100%;
width: 100%;
background: var(--layer_1_color);
background: var(--body_background);
color: var(--text_color);
margin: 0;
border-radius: 0;

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

@@ -57,7 +57,7 @@ onMount(get_buckets);
</button>
</div>
{#if creating_bucket}
<div class="highlight_light">
<div class="highlight_shaded">
<form on:submit|preventDefault={create_bucket}>
<table class="form">
<tr>

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

@@ -267,7 +267,7 @@ onMount(() => {
Remove
</button>
{#if header_image_id}
<div class="highlight_dark">
<div class="highlight_shaded">
<img class="banner_preview" src="/api/file/{header_image_id}" alt="Custom file viewer header"/>
</div>
{/if}
@@ -288,7 +288,7 @@ onMount(() => {
Remove
</button>
{#if background_image_id}
<div class="highlight_dark">
<div class="highlight_shaded">
<img class="background_preview" src="/api/file/{background_image_id}" alt="Custom file viewer background"/>
</div>
{/if}
@@ -307,7 +307,7 @@ onMount(() => {
Remove
</button>
{#if footer_image_id}
<div class="highlight_dark">
<div class="highlight_shaded">
<img class="banner_preview" src="/api/file/{footer_image_id}" alt="Custom file viewer footer"/>
</div>
{/if}

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

@@ -251,7 +251,7 @@ onDestroy(() => {
</p>
</section>
<div class="highlight_light">
<div class="highlight_shaded">
<button
on:click={() => { update_graphs(1440, 1, true) }}
class:button_highlight={graph_timespan == 1440}>