Make bottom menu collapsible

svelte/src/filesystem/FileStats.svelte

@@ -73,51 +73,44 @@ $: total_file_size = state.children.reduce((acc, cur) => acc + cur.file_size, 0)
 onDestroy(close_socket)
 </script>
 
-<div class="container">
+{#if state.base.type === "file"}
-	{#if state.base.type === "file"}
+	{#if error_msg !== ""}
-		{#if error_msg !== ""}
+		{error_msg}
-			{error_msg}
+	{:else}
-		{:else}
-			<div class="group">
-				<div class="label">Downloads</div>
-				<div class="stat">{formatThousands(downloads)}</div>
-			</div>
-			<div class="group">
-				<div class="label">Transfer used</div>
-				<div class="stat">{formatDataVolume(transfer_used, 3)}</div>
-			</div>
-		{/if}
-
 		<div class="group">
-			<div class="label">Size</div>
+			<div class="label">Downloads</div>
-			<div class="stat">{formatDataVolume(state.base.file_size, 3)}</div>
+			<div class="stat">{formatThousands(downloads)}</div>
 		</div>
-
-	{:else if state.base.type === "dir" || state.base.type === "bucket"}
-
 		<div class="group">
-			<div class="label">Directories</div>
+			<div class="label">Transfer used</div>
-			<div class="stat">{formatThousands(total_directories, 3)}</div>
+			<div class="stat">{formatDataVolume(transfer_used, 3)}</div>
-		</div>
-
-		<div class="group">
-			<div class="label">Files</div>
-			<div class="stat">{formatThousands(total_files, 3)}</div>
-		</div>
-
-		<div class="group">
-			<div class="label">Total size</div>
-			<div class="stat">{formatDataVolume(total_file_size, 3)}</div>
 		</div>
 	{/if}
-</div>
+
+	<div class="group">
+		<div class="label">Size</div>
+		<div class="stat">{formatDataVolume(state.base.file_size, 3)}</div>
+	</div>
+
+{:else if state.base.type === "dir" || state.base.type === "bucket"}
+
+	<div class="group">
+		<div class="label">Directories</div>
+		<div class="stat">{formatThousands(total_directories, 3)}</div>
+	</div>
+
+	<div class="group">
+		<div class="label">Files</div>
+		<div class="stat">{formatThousands(total_files, 3)}</div>
+	</div>
+
+	<div class="group">
+		<div class="label">Total size</div>
+		<div class="stat">{formatDataVolume(total_file_size, 3)}</div>
+	</div>
+{/if}
 
 <style>
-.container {
-	display: flex;
-	flex-direction: column;
-}
-
 .group {
 	flex: 1 1 auto;
 }
@@ -131,10 +124,7 @@ onDestroy(close_socket)
 .stat {
 	text-align: center;
 }
-@media (orientation: portrait) {
+@media (max-width: 700px) {
-	.container {
-		flex-direction: row;
-	}
 	.label {
 		text-align: center;
 		padding-left: 0;

svelte/src/filesystem/Filesystem.svelte

@@ -210,8 +210,6 @@ const loading_evt = e => {
 .headerbar > * {
 	flex-grow: 0;
 	flex-shrink: 0;
-	margin-left: 4px;
-	margin-right: 4px;
 	display: inline;
 	align-self: center;
 }
@@ -222,7 +220,7 @@ const loading_evt = e => {
 	flex-direction: row;
 	overflow: hidden;
 }
-@media (orientation: portrait) {
+@media (max-width: 700px) {
 	.viewer_area {
 		flex-direction: column-reverse;
 	}

svelte/src/filesystem/Toolbar.svelte

@@ -1,6 +1,6 @@
 <script>
 import { createEventDispatcher } from "svelte";
-import Sharebar, { generate_share_url } from "./Sharebar.svelte";
+import { generate_share_url } from "./Sharebar.svelte";
 import { copy_text } from "../util/Util.svelte";
 import FileStats from "./FileStats.svelte";
 
@@ -46,13 +46,29 @@ let share = async () => {
 			url: share_url
 		})
 	} else {
-		alert("Navigator does not support sharing")
+		alert("Navigator does not support sharing, use copy link button to copy the link instead")
 	}
 }
+
+let expanded = false
+let expand = e => {
+	e.preventDefault()
+	e.stopPropagation()
+	expanded = !expanded
+}
 </script>
 
-<div class="toolbar">
+<div class="toolbar" class:expanded>
-	<FileStats state={state}/>
+	<div class="stats_container" on:click={expand} on:keypress={expand} role="button" tabindex="0">
+		<button class="button_expand" on:click={expand}>
+			{#if expanded}
+				<i class="icon">expand_more</i>
+			{:else}
+				<i class="icon">expand_less</i>
+			{/if}
+		</button>
+		<FileStats state={state}/>
+	</div>
 
 	<div class="separator"></div>
 	<div class="grid">
@@ -87,11 +103,9 @@ let share = async () => {
 			</button>
 		{/if}
 
-		{#if navigator.share}
+		<button on:click={share} class="toolbar_button">
-			<button on:click={share} class="toolbar_button">
+			<i class="icon">share</i> Share
-				<i class="icon">share</i> Share
+		</button>
-			</button>
-		{/if}
 
 		<button on:click={() => details_visible = !details_visible} class="toolbar_button" class:button_highlight={details_visible}>
 			<i class="icon">help</i> Deta<u>i</u>ls
@@ -110,6 +124,7 @@ let share = async () => {
 	flex: 0 0 auto;
 	overflow-x: hidden;
 	overflow-y: scroll;
+	transition: max-height 0.3s;
 }
 .grid {
 	display: grid;
@@ -133,4 +148,29 @@ let share = async () => {
 .button_row > * {
 	flex: 1 1 auto;
 }
+
+.stats_container {
+	display: flex;
+	flex-direction: column;
+}
+.button_expand {
+	display: none;
+}
+@media (max-width: 700px) {
+	.toolbar {
+		overflow-y: hidden;
+		max-height: 2.5em;
+	}
+	.toolbar.expanded {
+		overflow-y: scroll;
+		max-height: 25vh;
+	}
+	.stats_container {
+		flex-direction: row;
+	}
+	.button_expand {
+		display: inline-block;
+	}
+}
+
 </style>