Expandable fixes

svelte/src/admin_panel/AbuseReport.svelte

@@ -5,7 +5,6 @@ import { createEventDispatcher } from "svelte";
 let dispatch = createEventDispatcher()
 
 export let report
-let expandable
 let preview = false
 
 let set_status = async (action, report_type) => {
@@ -31,8 +30,8 @@ let set_status = async (action, report_type) => {
 }
 </script>
 
-<Expandable bind:this={expandable} expanded={report.status === "pending" && report.reports.length > 2}>
-	<div slot="header" class="header" on:click={expandable.toggle}>
+<Expandable expanded={report.status === "pending" && report.reports.length > 2} click_expand>
+	<div slot="header" class="header">
 		<div class="icon_cell">
 			<img class="file_icon" src={"/api/file/"+report.file.id+"/thumbnail"} alt="File thumbnail"/>
 		</div>
@@ -118,7 +117,7 @@ let set_status = async (action, report_type) => {
 }
 .stats {
 	flex: 0 0 auto;
-	padding: 3px 4px;
+	padding: 0 4px;
 	border-left: 1px solid var(--layer_3_color_border);
 	text-align: center;
 }

svelte/src/admin_panel/IPBans.svelte

@@ -142,7 +142,7 @@ onMount(get_bans);
 	{/if}
 
 	{#each rows as row (row.address)}
-		<Expandable expanded={expanded}>
+		<Expandable expanded={expanded} click_expand>
 			<div slot="header" class="header">
 				<div class="title">{row.address}</div>
 				<div class="stats">
@@ -153,7 +153,7 @@ onMount(get_bans);
 					Date<br/>
 					{formatDate(row.offences[0].ban_time, false, false, false)}
 				</div>
-				<button on:click|preventDefault={() => {delete_ban(row.address)}} class="button button_red" style="align-self: center;">
+				<button on:click|stopPropagation={() => {delete_ban(row.address)}} class="button button_red" style="align-self: center;">
 					<i class="icon">delete</i>
 				</button>
 			</div>
@@ -218,7 +218,7 @@ onMount(get_bans);
 }
 .stats {
 	flex: 0 0 auto;
-	padding: 3px 4px;
+	padding: 0 4px;
 	border-left: 1px solid var(--layer_3_color_border);
 	text-align: center;
 }

svelte/src/user_buckets/UserBucket.svelte

@@ -29,7 +29,7 @@ const delete_bucket = async () => {
 
 </script>
 
-<Expandable>
+<Expandable highlight>
 	<div slot="header">
 		<a href={'/d/' + bucket.id} class="bucket_title">
 			<img class="bucket_icon" src="/res/img/mime/folder-remote.png" alt="Bucket icon"/>

svelte/src/util/Expandable.svelte

@@ -1,17 +1,31 @@
 <script>
+// Whether the Expandable is expanded by default
 export let expanded = false
 export const toggle = () => {
 	expanded = !expanded
 }
+
+// Allow the user to expand the Expandable by clicking the title. Use
+// stopPropagation if you want to use other interactive elements in the title
+// bar
+export let click_expand = false
+const header_click = () => {
+	if (click_expand) {
+		toggle()
+	}
+}
+
+// Highlight the title bar if the user moves their mouse over it
+export let highlight = false
 </script>
 
 <div class="expandable">
-	<div class="header">
+	<div class="header" class:click_expand class:highlight on:click={header_click}>
 		<div class="title">
 			<slot name="header"></slot>
 		</div>
 
-		<button class="bucket_expand" on:click={toggle}>
+		<button class="bucket_expand" on:click|stopPropagation={toggle}>
 			{#if expanded}
 			<i class="icon">expand_less</i>
 			{:else}
@@ -28,7 +42,7 @@ export const toggle = () => {
 .expandable {
 	text-decoration: none;
 	background-color: var(--layer_3_color);
-	margin: 0.8em 0;
+	margin: 0.6em 0;
 	border-radius: 6px;
 	overflow: hidden;
 }
@@ -37,9 +51,12 @@ export const toggle = () => {
 	flex-direction: row;
 	color: var(--text_color);
 }
-.header:hover {
+.click_expand:hover, .highlight:hover {
 	background-color: var(--input_color_dark)
 }
+.click_expand {
+	cursor: pointer;
+}
 .title {
 	flex: 1 1 auto;
 	text-align: left;