Use fieldset for styling form elements

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 {

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>

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;

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;
 	}

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;
 	}

svelte/src/filesystem/edit_window/AccessControl.svelte

@@ -44,7 +44,8 @@ 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>
+<fieldset>
+	<legend>Link permissions</legend>
 	<div class="row">
 		<div class="grow id">
 			Anyone with the link can...
@@ -53,8 +54,11 @@ const del_password = (pass: string) => {
 			<PermissionButton bind:permissions={file.link_permissions}/>
 		</div>
 	</div>
+</fieldset>
 
-<h2>User permissions</h2>
+
+<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
@@ -80,8 +84,10 @@ const del_password = (pass: string) => {
 			</div>
 		{/each}
 	{/if}
+</fieldset>
 
-<h2>Password permissions</h2>
+<fieldset>
+	<legend>Password permissions</legend>
 	<p>
 		Allow users to enter a password to give them access to this directory.
 	</p>
@@ -108,13 +114,13 @@ const del_password = (pass: string) => {
 			</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;
 }

svelte/src/filesystem/edit_window/BrandingOptions.svelte

@@ -77,20 +77,23 @@ const handle_picker = async e => {
 let highlight_info = false
 </script>
 
+<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 colour will be used.
+		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>
+		<label for="enable_branding">Enable custom page branding</label>
 	</div>
-<hr/>
+</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,9 +148,10 @@ let highlight_info = false
 		Pick
 	</button>
 	<input type="text" bind:value={file.properties.brand_background_image}/>
-</div>
+</fieldset>
 
-<hr/>
+<fieldset disabled={!enabled}>
+	<legend>Page preview</legend>
 	<p>
 		Below is an example of what the site looks like with these colours:
 	</p>
@@ -175,6 +183,7 @@ let highlight_info = false
 			</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%);
 }
 

svelte/src/filesystem/edit_window/FileOptions.svelte

@@ -34,7 +34,8 @@ const delete_file = async e => {
 }
 </script>
 
-<h2>File settings</h2>
+<fieldset>
+	<legend>File settings</legend>
 	{#if is_root_dir}
 		<div class="highlight_yellow">
 			Filesystem root cannot be renamed. If this shared directory
@@ -47,13 +48,17 @@ const delete_file = async e => {
 		<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>
+	<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>

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,7 +52,8 @@ 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">
@@ -88,8 +89,10 @@ const update_shared = e => {
 			<CopyButton text={share_link}>Copy</CopyButton>
 		{/if}
 	</div>
+</fieldset>
 
-<h2>Embedding</h2>
+<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
@@ -97,8 +100,6 @@ const update_shared = e => {
 		options will also apply in the frame, but only when applied to this
 		directory. It will not inherit the style from parent directories.
 	</p>
-
-<h3>Code</h3>
 	<p>
 		Put this code in your website to embed the file or directory.
 	</p>
@@ -110,8 +111,10 @@ const update_shared = e => {
 			<i class="icon">visibility</i> Show example
 		</button>
 	</div>
+	<hr/>
 
 	<div bind:this={preview_area} style="text-align: center;"></div>
+</fieldset>
 
 <style>
 .center {

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;

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>