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

Makes tables scrollable

Browse Source
This commit is contained in:
Wim Brand
2021-09-21 23:12:55 +02:00
parent 2d70f11936
commit fb26f17fb8
5 changed files with 109 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
res/include/style/layout.css
View File

@@ -331,8 +331,18 @@ table:not(.form) {
border-collapse: collapse;
width: 100%;
}
.table_scroll {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.table_scroll > table {
min-width: 100%;
}
tr:not(.form) {border-bottom: 1px var(--layer_2_color_border) solid;}
tr > td, tr > th {padding: 0.4em;}
tr > td, tr > th {padding: 0.3em 0.6em;}
@media(max-width: 30em) {
/* Forms will be stacked on small screens */
tr.form > td {

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

@@ -133,32 +133,34 @@ onMount(get_reporters);
<br/>
<table style="text-align: left;">
<tr>
<td>E-mail</td>
<td>Name</td>
<td>Blocked</td>
<td>Type</td>
<td>Last used</td>
<td>Created</td>
<td></td>
</tr>
{#each reporters as reporter}
<div class="table_scroll">
<table style="text-align: left;">
<tr>
<td>{reporter.email}</td>
<td>{reporter.name}</td>
<td>{reporter.files_blocked}</td>
<td>{reporter.type}</td>
<td>{formatDate(reporter.last_used, true, true, false)}</td>
<td>{formatDate(reporter.created, false, false, false)}</td>
<td>
<button on:click|preventDefault={() => {delete_reporter(reporter.email)}} class="button button_red">
<i class="icon">delete</i>
</button>
</td>
<td>E-mail</td>
<td>Name</td>
<td>Blocked</td>
<td>Type</td>
<td>Last used</td>
<td>Created</td>
<td></td>
</tr>
{/each}
</table>
{#each reporters as reporter}
<tr>
<td>{reporter.email}</td>
<td>{reporter.name}</td>
<td>{reporter.files_blocked}</td>
<td>{reporter.type}</td>
<td>{formatDate(reporter.last_used, true, true, false)}</td>
<td>{formatDate(reporter.created, false, false, false)}</td>
<td>
<button on:click|preventDefault={() => {delete_reporter(reporter.email)}} class="button button_red">
<i class="icon">delete</i>
</button>
</td>
</tr>
{/each}
</table>
</div>
</div>
<style>

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

@@ -139,30 +139,32 @@ onMount(get_bans);
<br/>
<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}
<div class="table_scroll">
<table style="text-align: left;">
<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">
<i class="icon">delete</i>
</button>
</td>
<td>Address</td>
<td>Reason</td>
<td>Ban time</td>
<td>Expire time</td>
<td>Offences</td>
<td></td>
</tr>
{/each}
</table>
{#each rows as row}
<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>
</div>
<style>

48
svelte/src/user_home/APIKeys.svelte
View File

@@ -112,31 +112,33 @@ const logout = async (key) => {
your keys.
</p>
</div>
<table style="text-align: left;">
<tr>
<td>Key</td>
<td>Created</td>
<td>Last used ▼</td>
<td>IP address</td>
<td></td>
</tr>
{#each rows as row}
<tr style="border-bottom: none;">
<td>{row.auth_key}</td>
<td>{formatDate(row.creation_time, true, true, false)}</td>
<td>{formatDate(row.last_used_time, true, true, false)}</td>
<td>{row.creation_ip_address}</td>
<td>
<button on:click|preventDefault={() => {logout(row.auth_key)}} class="button button_red">
<i class="icon">delete</i>
</button>
</td>
</tr>
<div class="table_scroll">
<table style="text-align: left;">
<tr>
<td colspan="5">User-Agent: {row.user_agent}</td>
<td>Key</td>
<td>Created</td>
<td>Last used ▼</td>
<td>IP address</td>
<td></td>
</tr>
{/each}
</table>
{#each rows as row}
<tr style="border-bottom: none;">
<td>{row.auth_key}</td>
<td>{formatDate(row.creation_time, true, true, false)}</td>
<td>{formatDate(row.last_used_time, true, true, false)}</td>
<td>{row.creation_ip_address}</td>
<td>
<button on:click|preventDefault={() => {logout(row.auth_key)}} class="button button_red round">
<i class="icon">delete</i>
</button>
</td>
</tr>
<tr>
<td colspan="5">User-Agent: {row.user_agent}</td>
</tr>
{/each}
</table>
</div>
</div>
<style>

44
svelte/src/user_home/Router.svelte
View File

@@ -24,27 +24,29 @@ onMount(() => {
</script>
<div>
<a class="button tab"
href="/user"
class:button_highlight={page === ""}
on:click|preventDefault={() => {navigate("", "My home")}}>
<i class="icon">home</i>
My home
</a>
<a class="button tab"
href="/user/settings"
class:button_highlight={page === "settings"}
on:click|preventDefault={() => {navigate("settings", "Account settings")}}>
<i class="icon">settings</i>
Account settings
</a>
<a class="button tab"
href="/user/api_keys"
class:button_highlight={page === "api_keys"}
on:click|preventDefault={() => {navigate("api_keys", "API keys")}}>
<i class="icon">vpn_key</i>
API keys
</a>
<div class="tab_bar">
<a class="button tab"
href="/user"
class:button_highlight={page === ""}
on:click|preventDefault={() => {navigate("", "My home")}}>
<i class="icon">home</i>
My home
</a>
<a class="button tab"
href="/user/settings"
class:button_highlight={page === "settings"}
on:click|preventDefault={() => {navigate("settings", "Account settings")}}>
<i class="icon">settings</i>
Account settings
</a>
<a class="button tab"
href="/user/api_keys"
class:button_highlight={page === "api_keys"}
on:click|preventDefault={() => {navigate("api_keys", "API keys")}}>
<i class="icon">vpn_key</i>
API keys
</a>
</div>
<hr/>
{#if page === ""}