Replace CSS classes with semantic HTML

This commit is contained in:
2022-01-11 13:28:22 +01:00
parent c6f0421ad3
commit 8719d9b0f9
37 changed files with 1215 additions and 1279 deletions

View File

@@ -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>