From 839980095246878c3ebe18283c418f6c5824a75c Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Thu, 29 Aug 2024 19:35:37 +0200
Subject: [PATCH] More windows 98 tweaks.. because I can't stop

---
 res/static/style/layout.css                   |  2 +-
 svelte/src/filesystem/Menu.svelte             | 12 ++--
 svelte/src/filesystem/Toolbar.svelte          |  2 -
 .../filesystem/filemanager/ListView.svelte    | 63 +++++++++----------
 svelte/src/home_page/HomePage.svelte          |  3 +-
 webcontroller/style.go                        | 10 ++-
 6 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/res/static/style/layout.css b/res/static/style/layout.css
index baa6bb4..16cde12 100644
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -440,7 +440,7 @@ tr {
 
 tr>td,
 tr>th {
-	padding: 0.2em 0.5em;
+	padding: 0.2em;
 }
 
 /* API documentation markup */
diff --git a/svelte/src/filesystem/Menu.svelte b/svelte/src/filesystem/Menu.svelte
index 92c001a..e6d1c3d 100644
--- a/svelte/src/filesystem/Menu.svelte
+++ b/svelte/src/filesystem/Menu.svelte
@@ -8,6 +8,8 @@ let button
 let dialog
 
 export let no_login_label = "Pixeldrain"
+
+// Hide the label if the screen is smaller than 800px
 export let hide_name = true
 export let hide_logo = false
 export let style = ""
@@ -46,7 +48,7 @@ const click = e => {
 <div class="wrapper">
 	<button bind:this={button} on:click={open} href="/user" class="button round" title="Menu" style={style}>
 		{#if !hide_logo}
-			<PixeldrainLogo style="height: 1.8em; width: 1.8em; margin: 2px;"/>
+			<PixeldrainLogo style="height: 1.6em; width: 1.6em;"/>
 		{/if}
 		<span class="button_username" class:hide_name>
 			{window.user.username === "" ? no_login_label : window.user.username}
@@ -115,17 +117,17 @@ const click = e => {
 .wrapper {
 	flex-grow: 0;
 	flex-shrink: 0;
-	display: inline;
+	display: inline-flex;
 	align-self: center;
 }
 
 .button {
 	flex: 0 0 content;
-	background: none;
-	margin: 0;
-	color: var(--body_text_color);
 	box-shadow: none;
 }
+.button_username {
+	margin: 0 4px;
+}
 
 dialog {
 	background-color: var(--card_color);
diff --git a/svelte/src/filesystem/Toolbar.svelte b/svelte/src/filesystem/Toolbar.svelte
index 25b0519..0af478c 100644
--- a/svelte/src/filesystem/Toolbar.svelte
+++ b/svelte/src/filesystem/Toolbar.svelte
@@ -67,8 +67,6 @@ let expand = e => {
 </script>
 
 <div class="toolbar" class:expanded>
-	<div class="separator hidden_horizontal" style="margin-top: 0;"></div>
-
 	<div class="stats_container" on:click={expand} on:keypress={expand} role="button" tabindex="0">
 		<button class="button_expand hidden_vertical" on:click={expand}>
 			{#if expanded}
diff --git a/svelte/src/filesystem/filemanager/ListView.svelte b/svelte/src/filesystem/filemanager/ListView.svelte
index d890436..fb282c2 100644
--- a/svelte/src/filesystem/filemanager/ListView.svelte
+++ b/svelte/src/filesystem/filemanager/ListView.svelte
@@ -17,7 +17,7 @@ export let hide_branding = false
 		<td></td>
 		<td>Name</td>
 		<td>Size</td>
-		<td></td>
+		<td>Actions</td>
 	</tr>
 	{#each $nav.children as child, index (child.path)}
 		<a
@@ -40,28 +40,29 @@ export let hide_branding = false
 				{/if}
 			</td>
 			<td class="node_icons">
-
-				{#if child.abuse_type !== undefined}
-					<i class="icon" title="This file / directory has received an abuse report. It cannot be shared">block</i>
-				{:else if child.id}
-					<a
-						href="/d/{child.id}"
-						on:click|preventDefault|stopPropagation={() => {dispatch("node_share_click", index)}}
-						class="button action_button"
-					>
-						<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
-					</a>
-				{/if}
-				{#if child.properties && child.properties.branding_enabled && !hide_branding}
-					<button class="action_button" on:click|preventDefault|stopPropagation={() => dispatch("node_branding", index)}>
-						<i class="icon">palette</i>
-					</button>
-				{/if}
-				{#if $nav.permissions.update && !hide_edit}
-					<button class="action_button" on:click|preventDefault|stopPropagation={() => dispatch("node_settings", index)}>
-						<i class="icon">edit</i>
-					</button>
-				{/if}
+				<div class="icons_wrap">
+					{#if child.abuse_type !== undefined}
+						<i class="icon" title="This file / directory has received an abuse report. It cannot be shared">block</i>
+					{:else if child.id}
+						<a
+							href="/d/{child.id}"
+							on:click|preventDefault|stopPropagation={() => {dispatch("node_share_click", index)}}
+							class="button action_button"
+						>
+							<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
+						</a>
+					{/if}
+					{#if child.properties && child.properties.branding_enabled && !hide_branding}
+						<button class="action_button" on:click|preventDefault|stopPropagation={() => dispatch("node_branding", index)}>
+							<i class="icon">palette</i>
+						</button>
+					{/if}
+					{#if $nav.permissions.update && !hide_edit}
+						<button class="action_button" on:click|preventDefault|stopPropagation={() => dispatch("node_settings", index)}>
+							<i class="icon">edit</i>
+						</button>
+					{/if}
+				</div>
 			</td>
 		</a>
 	{/each}
@@ -104,7 +105,6 @@ export let hide_branding = false
 	color: var(--highlight_text_color);
 }
 td {
-	padding: 4px;
 	vertical-align: middle;
 }
 .node_icon {
@@ -112,6 +112,7 @@ td {
 	width: 32px;
 	vertical-align: middle;
 	border-radius: 4px;
+	margin: 2px;
 }
 .node_name {
 	width: 100%;
@@ -122,16 +123,10 @@ td {
 	min-width: 50px;
 	white-space: nowrap;
 }
-.node_icons {
-	white-space: nowrap;
-	text-align: right;
-	padding: 0;
-}
-.action_button {
-	margin: 0;
-	background: none;
-	color: var(--body_text_color);
-	box-shadow: none;
+.icons_wrap {
+	display: flex;
+	flex-direction: row;
+	justify-content: end;
 }
 .hidden {
 	display: none;
diff --git a/svelte/src/home_page/HomePage.svelte b/svelte/src/home_page/HomePage.svelte
index d9f387d..0541b3f 100644
--- a/svelte/src/home_page/HomePage.svelte
+++ b/svelte/src/home_page/HomePage.svelte
@@ -10,7 +10,7 @@ import UploadLoginWall from "./UploadLoginWall.svelte";
 <div class="page_content">
 	<header class="header" style="text-align: initial">
 		<div class="menu_button_container">
-			<Menu no_login_label="Not logged in" hide_name={false} hide_logo style="color: #eeeeee;"/>
+			<Menu no_login_label="Not logged in" hide_name={false} hide_logo style="border-radius: 0 0 0 8px; margin: 0"/>
 		</div>
 		<div class="header_image_container"></div>
 	</header>
@@ -101,6 +101,5 @@ header > h1 {
 .menu_button_container {
 	display: flex;
 	justify-content: end;
-	padding-right: 0.5em;
 }
 </style>
diff --git a/webcontroller/style.go b/webcontroller/style.go
index a3f64be..863b202 100644
--- a/webcontroller/style.go
+++ b/webcontroller/style.go
@@ -552,6 +552,7 @@ footer, .footer_content,
 .sharebar,
 .directory_sorters, .directory_area,
 .container > .directory,
+.file_preview > .directory,
 .directory > .node,
 .file, .file_button,
 .upload_task,
@@ -577,14 +578,18 @@ footer, .footer_content,
 	border-top-right-radius: 3px !important;
 	box-shadow: inset -1px 0 #0a0a0a,inset 1px 1px #dfdfdf,inset -2px 0 grey,inset 2px 2px #fff !important;
 }
-.headerbar > .wrapper > .button {
-	color: #fff !important;
+.directory > tr {
+	border: none !important;
+}
+.button_toggle_navigation {
+	padding: 8px !important;
 }
 
 input[type="email"],
 input[type="number"],
 input[type="password"],
 input[type="text"],
+input[type="date"],
 select, textarea, pre {
 	border-radius: 0 !important;
 	border: none !important;
@@ -602,6 +607,7 @@ code {
 .file_preview,
 hr,
 .toolbar > .separator,
+.toolbar > .grid > .separator,
 .highlight_shaded {
 	border-radius: 0 !important;
 	border: none !important;