From fb26f17fb86575f56c487dc0013f856fadecb882 Mon Sep 17 00:00:00 2001
From: Wim Brand <fornax@fornaxian.com>
Date: Tue, 21 Sep 2021 23:12:55 +0200
Subject: [PATCH] Makes tables scrollable

---
 res/include/style/layout.css                 | 12 ++++-
 svelte/src/admin_panel/AbuseReporters.svelte | 50 ++++++++++----------
 svelte/src/admin_panel/IPBans.svelte         | 46 +++++++++---------
 svelte/src/user_home/APIKeys.svelte          | 48 ++++++++++---------
 svelte/src/user_home/Router.svelte           | 44 +++++++++--------
 5 files changed, 109 insertions(+), 91 deletions(-)

diff --git a/res/include/style/layout.css b/res/include/style/layout.css
index bb62abd..9662530 100644
--- a/res/include/style/layout.css
+++ b/res/include/style/layout.css
@@ -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 {
diff --git a/svelte/src/admin_panel/AbuseReporters.svelte b/svelte/src/admin_panel/AbuseReporters.svelte
index fd169f5..3d07593 100644
--- a/svelte/src/admin_panel/AbuseReporters.svelte
+++ b/svelte/src/admin_panel/AbuseReporters.svelte
@@ -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>
diff --git a/svelte/src/admin_panel/IPBans.svelte b/svelte/src/admin_panel/IPBans.svelte
index d37953a..2aff1dc 100644
--- a/svelte/src/admin_panel/IPBans.svelte
+++ b/svelte/src/admin_panel/IPBans.svelte
@@ -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>
diff --git a/svelte/src/user_home/APIKeys.svelte b/svelte/src/user_home/APIKeys.svelte
index 2f41e39..83f3613 100644
--- a/svelte/src/user_home/APIKeys.svelte
+++ b/svelte/src/user_home/APIKeys.svelte
@@ -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>
diff --git a/svelte/src/user_home/Router.svelte b/svelte/src/user_home/Router.svelte
index bb5bc5a..f3ce697 100644
--- a/svelte/src/user_home/Router.svelte
+++ b/svelte/src/user_home/Router.svelte
@@ -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 === ""}