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; border-collapse: collapse;
width: 100%; 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: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) { @media(max-width: 30em) {
/* Forms will be stacked on small screens */ /* Forms will be stacked on small screens */
tr.form > td { tr.form > td {

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

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

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

@@ -139,30 +139,32 @@ onMount(get_bans);
<br/> <br/>
<table style="text-align: left;"> <div class="table_scroll">
<tr> <table style="text-align: left;">
<td>Address</td>
<td>Reason</td>
<td>Ban time</td>
<td>Expire time</td>
<td>Offences</td>
<td></td>
</tr>
{#each rows as row}
<tr> <tr>
<td>{row.address}</td> <td>Address</td>
<td>{row.reason}</td> <td>Reason</td>
<td>{formatDate(row.ban_time, true, true, false)}</td> <td>Ban time</td>
<td>{formatDate(row.expire_time, true, true, false)}</td> <td>Expire time</td>
<td>{row.offences}</td> <td>Offences</td>
<td> <td></td>
<button on:click|preventDefault={() => {delete_ban(row.address)}} class="button button_red">
<i class="icon">delete</i>
</button>
</td>
</tr> </tr>
{/each} {#each rows as row}
</table> <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> </div>
<style> <style>

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

@@ -112,31 +112,33 @@ const logout = async (key) => {
your keys. your keys.
</p> </p>
</div> </div>
<table style="text-align: left;"> <div class="table_scroll">
<tr> <table style="text-align: left;">
<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>
<tr> <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> </tr>
{/each} {#each rows as row}
</table> <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> </div>
<style> <style>

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

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