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

Improve address reputation widget styling

Browse Source
This commit is contained in:
Fornax
2022-12-24 12:42:23 +01:00
parent 1b23c06d77
commit 4e5d80d84b
1 changed files with 77 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
svelte/src/home_page/AddressReputation.svelte
View File

@@ -1,5 +1,6 @@
<script>
import { onMount } from "svelte";
import Expandable from "../util/Expandable.svelte";
import { formatDate } from "../util/Formatting.svelte";
let result = false;
@@ -20,58 +21,85 @@ onMount(async () => {
</script>
{#if result !== false && offences > 0}
<section class:highlight_red={result.banned === true} class:highlight_yellow={result.banned === false}>
{#if result.banned === true}
<p>
Your IP address ({result.address}) has been banned from
uploading to pixeldrain due to violation of the
<a href="/about#content-policy">content policy</a>. Below is a
list of files originating from your IP address which have been
blocked:
</p>
{:else if offences > 0}
<p>
Your IP address ({result.address}) has received copyright
strikes. At 10 copyright strikes your IP address will be banned
and you will be unable to upload files to pixeldrain. Below is a
list of files originating from your IP address which have been
blocked:
</p>
{/if}
<section>
<Expandable click_expand>
<div slot="header" class="header" class:red={result.banned === true} class:yellow={result.banned === false}>
{#if result.banned === true}
Your IP address has been banned, click for details
{:else}
Your IP address has received a copyright strike, click for details
{/if}
</div>
{#if result.banned === true}
<p>
Your IP address ({result.address}) has been banned from
uploading to pixeldrain due to violation of the
<a href="/about#content-policy">content policy</a>. Below is a
list of files originating from your IP address which have been
blocked:
</p>
{:else}
<p>
Your IP address ({result.address}) has received copyright
strikes. At 10 copyright strikes your IP address will be banned
and you will be unable to upload files to pixeldrain. Below is a
list of files originating from your IP address which have been
blocked:
</p>
{/if}
<div class="table_scroll">
<table>
<tr>
<td>Reason</td>
<td>Reporter</td>
<td>Ban date</td>
<td>Expiry date</td>
<td>File</td>
</tr>
{#each result.offences as offence (offence.ban_time)}
<div class="table_scroll">
<table>
<tr>
<td>{offence.reason}</td>
<td>{offence.reporter}</td>
<td>{formatDate(offence.ban_time, false, false, false)}</td>
<td>{formatDate(offence.expire_time, false, false, false)}</td>
<td>
{#if offence.file_public_id}
<a href="/u/{offence.file_public_id}" target="_blank" rel="noreferrer">
{offence.file_name}
</a>
{/if}
</td>
<td>Reason</td>
<td>Reporter</td>
<td>Ban date</td>
<td>Expiry date</td>
<td>File</td>
</tr>
{/each}
</table>
</div>
{#each result.offences as offence (offence.ban_time)}
<tr>
<td>{offence.reason}</td>
<td>{offence.reporter}</td>
<td>{formatDate(offence.ban_time, false, false, false)}</td>
<td>{formatDate(offence.expire_time, false, false, false)}</td>
<td>
{#if offence.file_public_id}
<a href="/u/{offence.file_public_id}" target="_blank" rel="noreferrer">
{offence.file_name}
</a>
{/if}
</td>
</tr>
{/each}
</table>
</div>
<p>
If you would like to dispute your IP ban you can mail me at
support@pixeldrain.com. Please do not mail unless you have a good
reason. If you do not provide a valid reason why the IP ban should
be reversed your e-mail will be ignored. And do not forget to put
your IP address ({result.address}) in the e-mail.
</p>
<p>
If you would like to dispute your IP ban you can mail me at
support@pixeldrain.com. Please do not mail unless you have a good
reason. If you do not provide a valid reason why the IP ban should
be reversed your e-mail will be ignored. And do not forget to put
your IP address ({result.address}) in the e-mail.
</p>
</Expandable>
</section>
{/if}
<style>
.header {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background-color: rgba(255, 0, 0, 0.2);
border-radius: 6px;
}
.red {
background-color: rgba(255, 0, 0, 0.2);
}
.yellow {
background-color: rgba(255, 255, 0, 0.2);
}
</style>