Replace CSS classes with semantic HTML
This commit is contained in:
@@ -80,91 +80,89 @@ const delete_ban = async (addr) => {
|
||||
onMount(get_bans);
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if loading}
|
||||
<div class="spinner_container">
|
||||
<Spinner />
|
||||
{#if loading}
|
||||
<div class="spinner_container">
|
||||
<Spinner />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<section>
|
||||
<div class="toolbar" style="text-align: left;">
|
||||
<div class="toolbar_spacer"></div>
|
||||
<button class:button_highlight={creating} on:click={() => {creating = !creating}}>
|
||||
<i class="icon">create</i> Add IP ban
|
||||
</button>
|
||||
</div>
|
||||
{#if creating}
|
||||
<div class="highlight_light">
|
||||
<form on:submit|preventDefault={create_ban}>
|
||||
<table class="form">
|
||||
<tr>
|
||||
<td>IP address</td>
|
||||
<td><input type="text" bind:this={new_ban_address}/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Reason</td>
|
||||
<td>
|
||||
<input id="reason_unknown" name="reporter_type" type="radio" bind:group={new_ban_reason} value="unknown" />
|
||||
<label for="reason_unknown">unknown</label>
|
||||
<br/>
|
||||
<input id="reason_copyright" name="reporter_type" type="radio" bind:group={new_ban_reason} value="copyright" />
|
||||
<label for="reason_copyright">copyright</label>
|
||||
<br/>
|
||||
<input id="reason_child_abuse" name="reporter_type" type="radio" bind:group={new_ban_reason} value="child_abuse" />
|
||||
<label for="reason_child_abuse">child_abuse</label>
|
||||
<br/>
|
||||
<input id="reason_terrorism" name="reporter_type" type="radio" bind:group={new_ban_reason} value="terorrism" />
|
||||
<label for="reason_terrorism">terrorism</label>
|
||||
<br/>
|
||||
<input id="reason_gore" name="reporter_type" type="radio" bind:group={new_ban_reason} value="gore" />
|
||||
<label for="reason_gore">gore</label>
|
||||
<br/>
|
||||
<input id="reason_malware" name="reporter_type" type="radio" bind:group={new_ban_reason} value="malware" />
|
||||
<label for="reason_malware">malware</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<button class="button_highlight" type="submit" style="float: right;">
|
||||
<i class="icon">save</i> Save
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<div class="limit_width">
|
||||
<div class="toolbar" style="text-align: left;">
|
||||
<div class="toolbar_spacer"></div>
|
||||
<button class:button_highlight={creating} on:click={() => {creating = !creating}}>
|
||||
<i class="icon">create</i> Add IP ban
|
||||
</button>
|
||||
</div>
|
||||
{#if creating}
|
||||
<div class="highlight_light">
|
||||
<form on:submit|preventDefault={create_ban}>
|
||||
<table class="form">
|
||||
<tr>
|
||||
<td>IP address</td>
|
||||
<td><input type="text" bind:this={new_ban_address}/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Reason</td>
|
||||
<td>
|
||||
<input id="reason_unknown" name="reporter_type" type="radio" bind:group={new_ban_reason} value="unknown" />
|
||||
<label for="reason_unknown">unknown</label>
|
||||
<br/>
|
||||
<input id="reason_copyright" name="reporter_type" type="radio" bind:group={new_ban_reason} value="copyright" />
|
||||
<label for="reason_copyright">copyright</label>
|
||||
<br/>
|
||||
<input id="reason_child_abuse" name="reporter_type" type="radio" bind:group={new_ban_reason} value="child_abuse" />
|
||||
<label for="reason_child_abuse">child_abuse</label>
|
||||
<br/>
|
||||
<input id="reason_terrorism" name="reporter_type" type="radio" bind:group={new_ban_reason} value="terorrism" />
|
||||
<label for="reason_terrorism">terrorism</label>
|
||||
<br/>
|
||||
<input id="reason_gore" name="reporter_type" type="radio" bind:group={new_ban_reason} value="gore" />
|
||||
<label for="reason_gore">gore</label>
|
||||
<br/>
|
||||
<input id="reason_malware" name="reporter_type" type="radio" bind:group={new_ban_reason} value="malware" />
|
||||
<label for="reason_malware">malware</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<button class="button_highlight" type="submit" style="float: right;">
|
||||
<i class="icon">save</i> Save
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="table_scroll">
|
||||
<table style="text-align: left;">
|
||||
<div class="table_scroll">
|
||||
<table style="text-align: left;">
|
||||
<tr>
|
||||
<td>Address</td>
|
||||
<td>Reason</td>
|
||||
<td>Ban time</td>
|
||||
<td>Expire time</td>
|
||||
<td>Offences</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
{#each rows as row (row.address)}
|
||||
<tr>
|
||||
<td>Address</td>
|
||||
<td>Reason</td>
|
||||
<td>Ban time</td>
|
||||
<td>Expire time</td>
|
||||
<td>Offences</td>
|
||||
<td></td>
|
||||
<td>{row.address}</td>
|
||||
<td>{row.reason}</td>
|
||||
<td>{formatDate(row.ban_time, true, true, false)}</td>
|
||||
<td>{formatDate(row.expire_time, true, true, false)}</td>
|
||||
<td>{row.offences}</td>
|
||||
<td>
|
||||
<button on:click|preventDefault={() => {delete_ban(row.address)}} class="button button_red round">
|
||||
<i class="icon">delete</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{#each rows as row (row.address)}
|
||||
<tr>
|
||||
<td>{row.address}</td>
|
||||
<td>{row.reason}</td>
|
||||
<td>{formatDate(row.ban_time, true, true, false)}</td>
|
||||
<td>{formatDate(row.expire_time, true, true, false)}</td>
|
||||
<td>{row.offences}</td>
|
||||
<td>
|
||||
<button on:click|preventDefault={() => {delete_ban(row.address)}} class="button button_red round">
|
||||
<i class="icon">delete</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
Reference in New Issue
Block a user