From 4d1680b7f5c794c9be1ee7f7333e7e31a7951e63 Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Mon, 27 Jan 2025 22:54:47 +0100
Subject: [PATCH] Use fieldset for styling form elements

---
 res/static/style/layout.css                   |  16 +++
 res/template/widgets.html                     |   7 +
 svelte/src/filesystem/FileStats.svelte        |   2 +-
 svelte/src/filesystem/Filesystem.svelte       |   2 +-
 svelte/src/filesystem/Toolbar.svelte          |   7 +-
 .../edit_window/AccessControl.svelte          | 132 +++++++++---------
 .../edit_window/BrandingOptions.svelte        |  85 ++++++-----
 .../filesystem/edit_window/FileOptions.svelte |  41 +++---
 .../edit_window/SharingOptions.svelte         | 115 +++++++--------
 .../filesystem/filemanager/FileManager.svelte |   1 -
 .../filesystem/filemanager/ListView.svelte    |  10 +-
 11 files changed, 233 insertions(+), 185 deletions(-)

diff --git a/res/static/style/layout.css b/res/static/style/layout.css
index e9ef7af..cd57e0b 100644
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -386,6 +386,22 @@ ul {
 	list-style: disc;
 }
 
+fieldset {
+	padding: 4px;
+	border-radius: 8px;
+	border: 2px var(--separator) solid;
+	margin: 0;
+}
+
+fieldset>legend {
+	padding: 2px 8px;
+	margin-left: auto;
+	margin-right: auto;
+	border-radius: 8px;
+	font-size: 1.1em;
+	border-bottom: 2px var(--separator) solid;
+}
+
 /* Forms*/
 
 .form {
diff --git a/res/template/widgets.html b/res/template/widgets.html
index 5894b1e..c05b3d6 100644
--- a/res/template/widgets.html
+++ b/res/template/widgets.html
@@ -57,6 +57,13 @@
 				File <input type="file" name="file">
 				<hr/>
 				Color <input type="color" name="favcolor" value="#ff0000">
+				<hr/>
+				<fieldset>
+					<legend>Legend</legend>
+					<p>
+						Fieldset
+					</p>
+				</fieldset>
 
 				<br/><br/>
 				<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 16px;"></iframe>
diff --git a/svelte/src/filesystem/FileStats.svelte b/svelte/src/filesystem/FileStats.svelte
index 5a3faf8..0627bf0 100644
--- a/svelte/src/filesystem/FileStats.svelte
+++ b/svelte/src/filesystem/FileStats.svelte
@@ -147,7 +147,7 @@ const close_socket = () => {
 .stat {
 	line-height: 1.2em;
 }
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
 	.label {
 		text-align: center;
 		padding-left: 0;
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index 7d9ecaf..6dbe316 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -252,7 +252,7 @@ const download = () => {
 
 /* This max-width needs to be synced with the .toolbar max-width in
 Toolbar.svelte and the .label max-width in FileStats.svelte */
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
 	.viewer_area {
 		flex-direction: column-reverse;
 	}
diff --git a/svelte/src/filesystem/Toolbar.svelte b/svelte/src/filesystem/Toolbar.svelte
index cc259e0..2ba1746 100644
--- a/svelte/src/filesystem/Toolbar.svelte
+++ b/svelte/src/filesystem/Toolbar.svelte
@@ -56,7 +56,7 @@ const toggle_fullscreen = () => {
 	}
 }
 
-let expanded = false
+let expanded = true
 let expand = e => {
 	e.preventDefault()
 	e.stopPropagation()
@@ -188,14 +188,14 @@ let expand = e => {
 
 /* This max-width needs to be synced with the .viewer_area max-width in
 Toolbar.svelte and the .label max-width in FileStats.svelte */
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
 	.toolbar {
 		overflow-y: hidden;
 		max-height: 2.1em;
 	}
 	.toolbar.expanded {
 		overflow-y: scroll;
-		max-height: 30vh;
+		max-height: 25vh;
 	}
 	.stats_container {
 		flex-direction: row;
@@ -204,7 +204,6 @@ Toolbar.svelte and the .label max-width in FileStats.svelte */
 		margin: 2px 0;
 	}
 
-
 	.hidden_vertical {
 		display: block;
 	}
diff --git a/svelte/src/filesystem/edit_window/AccessControl.svelte b/svelte/src/filesystem/edit_window/AccessControl.svelte
index dfe2efa..27eb427 100644
--- a/svelte/src/filesystem/edit_window/AccessControl.svelte
+++ b/svelte/src/filesystem/edit_window/AccessControl.svelte
@@ -44,77 +44,83 @@ const del_password = (pass: string) => {
 	have delete permissions. You can see who the owner of a file is in the
 	Details window.
 </p>
-<h2>Link permissions</h2>
-<div class="row">
-	<div class="grow id">
-		Anyone with the link can...
-	</div>
-	<div class="perms">
-		<PermissionButton bind:permissions={file.link_permissions}/>
-	</div>
-</div>
-
-<h2>User permissions</h2>
-<p>
-	Enter a username here to give them access to this directory. The user will
-	not receive an e-mail invite. Giving write access to a user without giving
-	read access as well does not actually allow them to write anything.
-</p>
-<form on:submit={add_user} class="row">
-	<input type="text" bind:value={new_user_id} placeholder="Username" class="grow" size="1">
-	<Button type="submit" icon="add" label="Add"/>
-	<div class="perms">
-		<PermissionButton bind:permissions={new_user_perms}/>
-	</div>
-</form>
-{#if file.user_permissions !== undefined}
-	{#each Object.keys(file.user_permissions) as id (id)}
-		<div class="row">
-			<Button click={() => del_user(id)} icon="delete"/>
-			<div class="grow id">
-				{id}
-			</div>
-			<div class="perms">
-				<PermissionButton bind:permissions={file.user_permissions[id]}/>
-			</div>
+<fieldset>
+	<legend>Link permissions</legend>
+	<div class="row">
+		<div class="grow id">
+			Anyone with the link can...
 		</div>
-	{/each}
-{/if}
-
-<h2>Password permissions</h2>
-<p>
-	Allow users to enter a password to give them access to this directory.
-</p>
-<p>
-	<b>This feature is not implemented currently!</b>
-</p>
-<form on:submit={add_password} class="row">
-	<input type="text" bind:value={new_password} placeholder="Password" class="grow" size="1">
-	<Button type="submit" icon="add" label="Add"/>
-	<div class="perms">
-		<PermissionButton bind:permissions={new_password_perms}/>
-	</div>
-</form>
-{#if file.password_permissions !== undefined}
-	{#each Object.keys(file.password_permissions) as password (password)}
-		<div class="row">
-			<Button click={() => del_password(password)} icon="delete"/>
-			<div class="grow id">
-				{password}
-			</div>
-			<div class="perms">
-				<PermissionButton bind:permissions={file.password_permissions[password]}/>
-			</div>
+		<div class="perms">
+			<PermissionButton bind:permissions={file.link_permissions}/>
 		</div>
-	{/each}
-{/if}
+	</div>
+</fieldset>
+
+
+<fieldset>
+	<legend>User permissions</legend>
+	<p>
+		Enter a username here to give them access to this directory. The user will
+		not receive an e-mail invite. Giving write access to a user without giving
+		read access as well does not actually allow them to write anything.
+	</p>
+	<form on:submit={add_user} class="row">
+		<input type="text" bind:value={new_user_id} placeholder="Username" class="grow" size="1">
+		<Button type="submit" icon="add" label="Add"/>
+		<div class="perms">
+			<PermissionButton bind:permissions={new_user_perms}/>
+		</div>
+	</form>
+	{#if file.user_permissions !== undefined}
+		{#each Object.keys(file.user_permissions) as id (id)}
+			<div class="row">
+				<Button click={() => del_user(id)} icon="delete"/>
+				<div class="grow id">
+					{id}
+				</div>
+				<div class="perms">
+					<PermissionButton bind:permissions={file.user_permissions[id]}/>
+				</div>
+			</div>
+		{/each}
+	{/if}
+</fieldset>
+
+<fieldset>
+	<legend>Password permissions</legend>
+	<p>
+		Allow users to enter a password to give them access to this directory.
+	</p>
+	<p>
+		<b>This feature is not implemented currently!</b>
+	</p>
+	<form on:submit={add_password} class="row">
+		<input type="text" bind:value={new_password} placeholder="Password" class="grow" size="1">
+		<Button type="submit" icon="add" label="Add"/>
+		<div class="perms">
+			<PermissionButton bind:permissions={new_password_perms}/>
+		</div>
+	</form>
+	{#if file.password_permissions !== undefined}
+		{#each Object.keys(file.password_permissions) as password (password)}
+			<div class="row">
+				<Button click={() => del_password(password)} icon="delete"/>
+				<div class="grow id">
+					{password}
+				</div>
+				<div class="perms">
+					<PermissionButton bind:permissions={file.password_permissions[password]}/>
+				</div>
+			</div>
+		{/each}
+	{/if}
+</fieldset>
 
 <style>
 .row {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	border-bottom: 1px solid var(--separator);
 	margin-bottom: 2px;
 	padding-bottom: 2px;
 }
diff --git a/svelte/src/filesystem/edit_window/BrandingOptions.svelte b/svelte/src/filesystem/edit_window/BrandingOptions.svelte
index 4f30370..a3cc1f1 100644
--- a/svelte/src/filesystem/edit_window/BrandingOptions.svelte
+++ b/svelte/src/filesystem/edit_window/BrandingOptions.svelte
@@ -77,20 +77,23 @@ const handle_picker = async e => {
 let highlight_info = false
 </script>
 
-<p>
-	You can customize how your filesystem looks. The colours chosen here apply
-	to the directory you're currently in and all files and directories in this
-	directory. Colours which you do not want to modify can be left empty. Then
-	the default theme colour will be used.
-</p>
+<fieldset>
+	<legend>Enable page branding</legend>
+	<p>
+		You can customize how your filesystem looks. The colours chosen here apply
+		to the directory you're currently in and all files and directories in this
+		directory. Colours which you do not want to modify can be left empty. Then
+		the default theme colours will be used.
+	</p>
 
-<div>
-	<input bind:checked={enabled} id="enable_branding" type="checkbox" class="form_input"/>
-	<label for="enable_branding">Enable custom branding options</label>
-</div>
-<hr/>
+	<div>
+		<input bind:checked={enabled} id="enable_branding" type="checkbox" class="form_input"/>
+		<label for="enable_branding">Enable custom page branding</label>
+	</div>
+</fieldset>
 
-<div class="grid" class:disabled={!enabled}>
+<fieldset class="grid" disabled={!enabled}>
+	<legend>Colours</legend>
 	<div>
 		<div style="display: inline-block">Highlight</div>
 		<HelpButton bind:toggle={highlight_info}/>
@@ -120,6 +123,10 @@ let highlight_info = false
 	<div>Card</div>
 	<input type="color" bind:value={file.properties.brand_card_color}/>
 	<input type="text" bind:value={file.properties.brand_card_color}/>
+</fieldset>
+
+<fieldset class="grid" disabled={!enabled}>
+	<legend>Image customization</legend>
 	<p class="span3">
 		You can choose an image to show above or behind the files in this
 		directory. The image will be picked from your filesystem. The image will
@@ -141,40 +148,42 @@ let highlight_info = false
 		Pick
 	</button>
 	<input type="text" bind:value={file.properties.brand_background_image}/>
-</div>
+</fieldset>
 
-<hr/>
-<p>
-	Below is an example of what the site looks like with these colours:
-</p>
+<fieldset disabled={!enabled}>
+	<legend>Page preview</legend>
+	<p>
+		Below is an example of what the site looks like with these colours:
+	</p>
 
-<div class="example example_background">
-	<div>The background</div>
+	<div class="example example_background">
+		<div>The background</div>
 
-	<div class="example example_body">
-		<div>The content body. <a href="/">A link</a>!</div>
-		<hr/>
-		<div>Below is your custom header image, if you chose one.</div>
-		<CustomBanner path={[file]}/>
-		<hr/>
+		<div class="example example_body">
+			<div>The content body. <a href="/">A link</a>!</div>
+			<hr/>
+			<div>Below is your custom header image, if you chose one.</div>
+			<CustomBanner path={[file]}/>
+			<hr/>
 
-		<div class="example_button_row">
-			<button type="button"><i class="icon">touch_app</i>Normal</button>
-			<button type="button" class="button_highlight"><i class="icon">priority_high</i>Important</button>
-			<button type="button" class="button_red"><i class="icon">warning</i>Dangerous</button>
-		</div>
+			<div class="example_button_row">
+				<button type="button"><i class="icon">touch_app</i>Normal</button>
+				<button type="button" class="button_highlight"><i class="icon">priority_high</i>Important</button>
+				<button type="button" class="button_red"><i class="icon">warning</i>Dangerous</button>
+			</div>
 
-		<div class="example_button_row">
-			<input type="text" value="A text field"/>
-		</div>
+			<div class="example_button_row">
+				<input type="text" value="A text field"/>
+			</div>
 
-		<hr/>
+			<hr/>
 
-		<div class="example example_card">
-			<div>The top layer, for highlighted things</div>
+			<div class="example example_card">
+				<div>The top layer, for highlighted things</div>
+			</div>
 		</div>
 	</div>
-</div>
+</fieldset>
 
 <FilePicker bind:this={picker} on:files={handle_picker}/>
 
@@ -195,7 +204,7 @@ input[type="color"] {
 .span3 {
 	grid-column: span 3;
 }
-.disabled {
+fieldset:disabled {
 	filter: opacity(40%);
 }
 
diff --git a/svelte/src/filesystem/edit_window/FileOptions.svelte b/svelte/src/filesystem/edit_window/FileOptions.svelte
index 7d822fa..a97518e 100644
--- a/svelte/src/filesystem/edit_window/FileOptions.svelte
+++ b/svelte/src/filesystem/edit_window/FileOptions.svelte
@@ -34,26 +34,31 @@ const delete_file = async e => {
 }
 </script>
 
-<h2>File settings</h2>
-{#if is_root_dir}
-	<div class="highlight_yellow">
-		Filesystem root cannot be renamed. If this shared directory
-		is in
-		<PathLink nav={nav} path="/me">your filesystem</PathLink>
-		you can rename it from there
+<fieldset>
+	<legend>File settings</legend>
+	{#if is_root_dir}
+		<div class="highlight_yellow">
+			Filesystem root cannot be renamed. If this shared directory
+			is in
+			<PathLink nav={nav} path="/me">your filesystem</PathLink>
+			you can rename it from there
+		</div>
+	{/if}
+	<div class="form_grid">
+		<label for="file_name">Name</label>
+		<input form="edit_form" bind:value={new_name} id="file_name" type="text" class="form_input" disabled={is_root_dir}/>
 	</div>
-{/if}
-<div class="form_grid">
-	<label for="file_name">Name</label>
-	<input form="edit_form" bind:value={new_name} id="file_name" type="text" class="form_input" disabled={is_root_dir}/>
-</div>
+</fieldset>
+
 {#if $nav.permissions.delete === true}
-	<h2>Delete</h2>
-	<p>
-		Delete this file or directory. If this is a directory then all
-		subfiles will be deleted as well. This action cannot be undone.
-	</p>
-	<Button click={delete_file} red icon="delete" label="Delete" style="align-self: flex-start;"/>
+	<fieldset>
+		<legend>Delete</legend>
+		<p>
+			Delete this file or directory. If this is a directory then all
+			subfiles will be deleted as well. This action cannot be undone.
+		</p>
+		<Button click={delete_file} red icon="delete" label="Delete" style="align-self: flex-start;"/>
+	</fieldset>
 {/if}
 
 <style>
diff --git a/svelte/src/filesystem/edit_window/SharingOptions.svelte b/svelte/src/filesystem/edit_window/SharingOptions.svelte
index 256c805..2ecf298 100644
--- a/svelte/src/filesystem/edit_window/SharingOptions.svelte
+++ b/svelte/src/filesystem/edit_window/SharingOptions.svelte
@@ -24,7 +24,7 @@ let embed_iframe = file => {
 	let url = domain_url()+"/d/"+file.id
 	embed_html = `<iframe ` +
 		`src="${url}" ` +
-		`style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 8px; "` +
+		`style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px; "` +
 		`allowfullscreen` +
 		`></iframe>`
 }
@@ -52,66 +52,69 @@ const update_shared = e => {
 }
 </script>
 
-<h2>Share this file/directory</h2>
+<fieldset>
+	<legend>Public link</legend>
 
-{#if file.abuse_type !== undefined}
-	<div class="highlight_red">
-		This file or directory has received an abuse report. It cannot be
-		shared.<br/>
-		Type of abuse: {file.abuse_type}<br/>
-		Report time: {formatDate(file.abuse_report_time, true, true, true)}
-	</div>
-{/if}
-
-<p>
-	When a file or directory is shared it can be accessed through a
-	unique link. You can get the URL with the 'Copy link' button on
-	the toolbar, or share the link with the 'Share' button. If you
-	share a directory all the files within the directory are also
-	accessible from the link.
-</p>
-<div>
-	<input
-		form="edit_form"
-		bind:checked={shared}
-		on:change={update_shared}
-		id="shared"
-		type="checkbox"
-		class="form_input"
-	/>
-	<label for="shared">Share this file or directory</label>
-</div>
-
-<div class="form_grid">
-	{#if is_shared}
-		<span>Your sharing link: <a href={share_link}>{share_link}</a></span>
-		<CopyButton text={share_link}>Copy</CopyButton>
+	{#if file.abuse_type !== undefined}
+		<div class="highlight_red">
+			This file or directory has received an abuse report. It cannot be
+			shared.<br/>
+			Type of abuse: {file.abuse_type}<br/>
+			Report time: {formatDate(file.abuse_report_time, true, true, true)}
+		</div>
 	{/if}
-</div>
 
-<h2>Embedding</h2>
-<p>
-	If you have a website you can embed pixeldrain directories and files in your
-	own webpages with the code below. If you embed a directory then all
-	subdirectories and files will be accessible through the frame. Branding
-	options will also apply in the frame, but only when applied to this
-	directory. It will not inherit the style from parent directories.
-</p>
+	<p>
+		When a file or directory is shared it can be accessed through a
+		unique link. You can get the URL with the 'Copy link' button on
+		the toolbar, or share the link with the 'Share' button. If you
+		share a directory all the files within the directory are also
+		accessible from the link.
+	</p>
+	<div>
+		<input
+			form="edit_form"
+			bind:checked={shared}
+			on:change={update_shared}
+			id="shared"
+			type="checkbox"
+			class="form_input"
+		/>
+		<label for="shared">Share this file or directory</label>
+	</div>
 
-<h3>Code</h3>
-<p>
-	Put this code in your website to embed the file or directory.
-</p>
-<div class="center">
-	<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
-	<br/>
-	<CopyButton text={embed_html}>Copy HTML</CopyButton>
-	<button on:click={toggle_example} class:button_highlight={example} disabled={!is_shared}>
-		<i class="icon">visibility</i> Show example
-	</button>
-</div>
+	<div class="form_grid">
+		{#if is_shared}
+			<span>Your sharing link: <a href={share_link}>{share_link}</a></span>
+			<CopyButton text={share_link}>Copy</CopyButton>
+		{/if}
+	</div>
+</fieldset>
 
-<div bind:this={preview_area} style="text-align: center;"></div>
+<fieldset>
+	<legend>Embedding</legend>
+	<p>
+		If you have a website you can embed pixeldrain directories and files in your
+		own webpages with the code below. If you embed a directory then all
+		subdirectories and files will be accessible through the frame. Branding
+		options will also apply in the frame, but only when applied to this
+		directory. It will not inherit the style from parent directories.
+	</p>
+	<p>
+		Put this code in your website to embed the file or directory.
+	</p>
+	<div class="center">
+		<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
+		<br/>
+		<CopyButton text={embed_html}>Copy HTML</CopyButton>
+		<button on:click={toggle_example} class:button_highlight={example} disabled={!is_shared}>
+			<i class="icon">visibility</i> Show example
+		</button>
+	</div>
+	<hr/>
+
+	<div bind:this={preview_area} style="text-align: center;"></div>
+</fieldset>
 
 <style>
 .center {
diff --git a/svelte/src/filesystem/filemanager/FileManager.svelte b/svelte/src/filesystem/filemanager/FileManager.svelte
index b29fd56..fab7da9 100644
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -408,7 +408,6 @@ onMount(() => {
 	padding: 0;
 	background: var(--shaded_background);
 	backdrop-filter: blur(4px);
-	z-index: 1;
 }
 .toolbar {
 	display: flex;
diff --git a/svelte/src/filesystem/filemanager/ListView.svelte b/svelte/src/filesystem/filemanager/ListView.svelte
index a6ae93d..3f290e4 100644
--- a/svelte/src/filesystem/filemanager/ListView.svelte
+++ b/svelte/src/filesystem/filemanager/ListView.svelte
@@ -16,7 +16,7 @@ export let hide_branding = false
 	<tr>
 		<td></td>
 		<td>Name</td>
-		<td>Size</td>
+		<td class="hide_small">Size</td>
 		<td></td>
 	</tr>
 	{#each $nav.children as child, index (child.path)}
@@ -34,7 +34,7 @@ export let hide_branding = false
 			<td class="node_name">
 				{child.name}
 			</td>
-			<td class="node_size">
+			<td class="node_size hide_small">
 				{#if child.type === "file"}
 					{formatDataVolume(child.file_size, 3)}
 				{/if}
@@ -73,7 +73,6 @@ export let hide_branding = false
 	display: table;
 	margin: 8px auto 16px auto;
 	background: var(--shaded_background);
-	backdrop-filter: blur(4px);
 	border-collapse: collapse;
 	border-radius: 8px;
 
@@ -139,4 +138,9 @@ td {
 		width: 64px;
 	}
 }
+@media (max-width: 500px) {
+	.hide_small {
+		display: none;
+	}
+}
 </style>