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> <script>
import { onMount } from "svelte"; import { onMount } from "svelte";
import Expandable from "../util/Expandable.svelte";
import { formatDate } from "../util/Formatting.svelte"; import { formatDate } from "../util/Formatting.svelte";
let result = false; let result = false;
@@ -20,58 +21,85 @@ onMount(async () => {
</script> </script>
{#if result !== false && offences > 0} {#if result !== false && offences > 0}
<section class:highlight_red={result.banned === true} class:highlight_yellow={result.banned === false}> <section>
{#if result.banned === true} <Expandable click_expand>
<p> <div slot="header" class="header" class:red={result.banned === true} class:yellow={result.banned === false}>
Your IP address ({result.address}) has been banned from {#if result.banned === true}
uploading to pixeldrain due to violation of the Your IP address has been banned, click for details
<a href="/about#content-policy">content policy</a>. Below is a {:else}
list of files originating from your IP address which have been Your IP address has received a copyright strike, click for details
blocked: {/if}
</p> </div>
{:else if offences > 0} {#if result.banned === true}
<p> <p>
Your IP address ({result.address}) has received copyright Your IP address ({result.address}) has been banned from
strikes. At 10 copyright strikes your IP address will be banned uploading to pixeldrain due to violation of the
and you will be unable to upload files to pixeldrain. Below is a <a href="/about#content-policy">content policy</a>. Below is a
list of files originating from your IP address which have been list of files originating from your IP address which have been
blocked: blocked:
</p> </p>
{/if} {: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"> <div class="table_scroll">
<table> <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)}
<tr> <tr>
<td>{offence.reason}</td> <td>Reason</td>
<td>{offence.reporter}</td> <td>Reporter</td>
<td>{formatDate(offence.ban_time, false, false, false)}</td> <td>Ban date</td>
<td>{formatDate(offence.expire_time, false, false, false)}</td> <td>Expiry date</td>
<td> <td>File</td>
{#if offence.file_public_id}
<a href="/u/{offence.file_public_id}" target="_blank" rel="noreferrer">
{offence.file_name}
</a>
{/if}
</td>
</tr> </tr>
{/each} {#each result.offences as offence (offence.ban_time)}
</table> <tr>
</div> <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> <p>
If you would like to dispute your IP ban you can mail me at 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 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 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 be reversed your e-mail will be ignored. And do not forget to put
your IP address ({result.address}) in the e-mail. your IP address ({result.address}) in the e-mail.
</p> </p>
</Expandable>
</section> </section>
{/if} {/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>