Make button margins consistent, and some other fixes

init/init.go

@@ -1,9 +1,7 @@
 package init
 
 import (
-	"math/rand"
 	"os"
-	"time"
 
 	"fornaxian.tech/config"
 	"fornaxian.tech/log"
@@ -46,9 +44,6 @@ func Init(r *httprouter.Router, prefix string, setLogLevel bool) {
 	log.Colours = true
 	log.Info("Starting web UI server (PID %v)", os.Getpid())
 
-	// Seed the RNG
-	rand.Seed(time.Now().UnixNano())
-
 	var conf webcontroller.Config
 	var _, err = config.New(
 		DefaultConfig,

res/static/style/layout.css

@@ -492,10 +492,10 @@ input[type="color"],
 select {
 	display: inline-flex;
 	flex-direction: row;
-	gap: 0.25em;
 	border-radius: 6px;
 	margin: 2px;
 	background: var(--input_background);
+	gap: 3px;
 	padding: 3px;
 	overflow: hidden;
 	color: var(--input_text);

svelte/src/admin_panel/Home.svelte

@@ -90,6 +90,8 @@ let status = {
 	download_clients: 0,
 	download_connections: 0,
 }
+$: total_reads = status.local_reads + status.neighbour_reads + status.remote_reads
+$: total_read_size = status.local_read_size + status.neighbour_read_size + status.remote_read_size
 
 function getStats(order) {
 	lastOrder = order
@@ -207,6 +209,8 @@ onDestroy(() => {
 			<td>{formatDate(new Date(status.db_time), true, true, true)}</td>
 			<td>DB Latency</td>
 			<td>{formatNumber(status.db_latency / 1000, 3)} ms</td>
+			<td>PID</td>
+			<td>{status.pid}</td>
 		</tr>
 	</table>
 
@@ -225,8 +229,10 @@ onDestroy(() => {
 			<tr>
 				<td>Source</td>
 				<td>Reads</td>
+				<td>Reads %</td>
 				<td>Reads / s</td>
 				<td>Total size</td>
+				<td>Size %</td>
 				<td>Size / s</td>
 			</tr>
 		</thead>
@@ -234,22 +240,28 @@ onDestroy(() => {
 			<tr>
 				<td>Local cache</td>
 				<td>{status.local_reads}</td>
+				<td>{((status.local_reads / total_reads) * 100).toPrecision(3)}%</td>
 				<td>{status.local_reads_per_sec.toPrecision(4)}/s</td>
 				<td>{formatDataVolume(status.local_read_size, 4)}</td>
+				<td>{((status.local_read_size / total_read_size) * 100).toPrecision(3)}%</td>
 				<td>{formatDataVolume(status.local_read_size_per_sec, 4)}/s</td>
 			</tr>
 			<tr>
 				<td>Neighbour</td>
 				<td>{status.neighbour_reads}</td>
+				<td>{((status.neighbour_reads / total_reads) * 100).toPrecision(3)}%</td>
 				<td>{status.neighbour_reads_per_sec.toPrecision(4)}/s</td>
 				<td>{formatDataVolume(status.neighbour_read_size, 4)}</td>
+				<td>{((status.neighbour_read_size / total_read_size) * 100).toPrecision(3)}%</td>
 				<td>{formatDataVolume(status.neighbour_read_size_per_sec, 4)}/s</td>
 			</tr>
 			<tr>
 				<td>Reed-solomon</td>
 				<td>{status.remote_reads}</td>
+				<td>{((status.remote_reads / total_reads) * 100).toPrecision(3)}%</td>
 				<td>{status.remote_reads_per_sec.toPrecision(4)}/s</td>
 				<td>{formatDataVolume(status.remote_read_size, 4)}</td>
+				<td>{((status.remote_read_size / total_read_size) * 100).toPrecision(3)}%</td>
 				<td>{formatDataVolume(status.remote_read_size_per_sec, 4)}/s</td>
 			</tr>
 		</tbody>

svelte/src/file_viewer/CustomBanner.svelte

@@ -18,7 +18,7 @@ export let border_top = false;
 
 <style>
 .border_top {
-	border-top: solid 1px var(--separator);
+	border-top: solid 2px var(--separator);
 }
 .image {
 	display: block;

svelte/src/file_viewer/FileViewer.svelte

@@ -635,7 +635,6 @@ const keyboard_event = evt => {
 	display: flex;
 	flex-direction: row;
 	text-align: left;
-	padding: 2px;
 	align-items: center;
 }
 @media(max-height: 600px) {
@@ -650,7 +649,6 @@ const keyboard_event = evt => {
 	flex-shrink: 0;
 	margin-left: 4px;
 	margin-right: 4px;
-	display: inline;
 }
 .headerbar > .file_viewer_headerbar_title {
 	flex-grow: 1;
@@ -658,7 +656,7 @@ const keyboard_event = evt => {
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
-	line-height: 1.2em; /* When the page is a list there will be two lines. Dont's want to stretch the container*/
+	line-height: 1.2em; /* When the page is a list there will be two lines. Don't want to stretch the container */
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	justify-content: center;

svelte/src/file_viewer/viewers/SwipeNavigate.svelte

@@ -1,4 +1,9 @@
 <script context="module">
+// Dead zone before the swipe action gets detected
+const swipe_inital_offset = 25
+// Amount of pixels after which the navigation triggers
+const swipe_trigger_offset = 75
+
 export const swipe_nav = (node, swipe_enabled) => {
 	let start_x = 0
 	let start_y = 0
@@ -23,8 +28,8 @@ export const swipe_nav = (node, swipe_enabled) => {
 
 		// The cursor must have moved at least 50 pixels and three times as much
 		// on the x axis than the y axis for it to count as a swipe
-		if (abs_x > 50 && abs_y < abs_x/3) {
+		if (abs_x > swipe_inital_offset && abs_y < abs_x/3) {
-			set_offset((abs_x-50)*neg, false)
+			set_offset((abs_x-swipe_inital_offset)*neg, false)
 		} else {
 			set_offset(0, true)
 		}
@@ -35,10 +40,10 @@ export const swipe_nav = (node, swipe_enabled) => {
 			return
 		}
 
-		if (render_offset > 100) {
+		if (render_offset > swipe_trigger_offset) {
 			set_offset(1000, true)
 			node.dispatchEvent(new CustomEvent("prev"))
-		} else if (render_offset < -100) {
+		} else if (render_offset < -swipe_trigger_offset) {
 			set_offset(-1000, true)
 			node.dispatchEvent(new CustomEvent("next"))
 		} else {
@@ -51,7 +56,7 @@ export const swipe_nav = (node, swipe_enabled) => {
 
 		let detail = "transform: translateX("+off+"px);"
 		if (animate) {
-			detail += "transition: transform 500ms;"
+			detail += "transition: transform 400ms;"
 		}
 
 		// Clear the transformation if the offset is zero

svelte/src/filesystem/Toolbar.svelte

@@ -75,8 +75,10 @@ let expand = e => {
 </script>
 
 <div class="toolbar" class:expanded>
+	<div class="separator hidden_horizontal" style="margin-top: 6px;"></div>
+
 	<div class="stats_container" on:click={expand} on:keypress={expand} role="button" tabindex="0">
-		<button class="button_expand" on:click={expand}>
+		<button class="button_expand hidden_vertical" on:click={expand}>
 			{#if expanded}
 				<i class="icon">expand_more</i>
 			{:else}
@@ -108,6 +110,8 @@ let expand = e => {
 			</button>
 		{/if}
 
+		<div class="separator hidden_horizontal"></div>
+
 		{#if state.base.type === "file"}
 			<button on:click={() => dispatch("download")}>
 				<i class="icon">save</i>
@@ -142,6 +146,8 @@ let expand = e => {
 			<span>Fullscreen</span>
 		</button>
 
+		<div class="separator hidden_horizontal"></div>
+
 		<button on:click={() => details_visible = !details_visible} class:button_highlight={details_visible}>
 			<i class="icon">help</i>
 			<span>Deta<u>i</u>ls</span>
@@ -169,6 +175,7 @@ let expand = e => {
 }
 .separator {
 	height: 2px;
+	margin: 4px 0;
 	width: 100%;
 	background-color: var(--separator);
 }
@@ -187,10 +194,16 @@ let expand = e => {
 	flex-direction: column;
 }
 .button_expand {
-	display: none;
 	line-height: 1em;
 }
 
+.hidden_vertical {
+	display: none;
+}
+.hidden_horizontal {
+	display: block;
+}
+
 /* 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) {
@@ -200,13 +213,21 @@ Toolbar.svelte and the .label max-width in FileStats.svelte */
 	}
 	.toolbar.expanded {
 		overflow-y: scroll;
-		max-height: 25vh;
+		max-height: 30vh;
 	}
 	.stats_container {
 		flex-direction: row;
 	}
-	.button_expand {
+	.separator {
-		display: inline-block;
+		margin: 2px 0;
+	}
+
+
+	.hidden_vertical {
+		display: block;
+	}
+	.hidden_horizontal {
+		display: none;
 	}
 }
 

svelte/src/filesystem/edit_window/Branding.js

@@ -37,12 +37,12 @@ const add_styles = (style, properties) => {
 	if (properties.brand_input_color) {
 		style.input_background = properties.brand_input_color
 		style.input_hover_background = properties.brand_input_color
-		style.input_text = add_contrast(properties.brand_input_color, 70)
+		style.input_text = add_contrast(properties.brand_input_color, 75)
 	}
 	if (properties.brand_highlight_color) {
 		style.highlight_color = properties.brand_highlight_color
 		style.highlight_background = properties.brand_highlight_color
-		style.highlight_text_color = add_contrast(properties.brand_highlight_color, 70)
+		style.highlight_text_color = add_contrast(properties.brand_highlight_color, 75)
 
 		// If we have a body colour to compare it to we use the highlight colour
 		// to generate the link colour
@@ -52,20 +52,20 @@ const add_styles = (style, properties) => {
 	}
 	if (properties.brand_danger_color) {
 		style.danger_color = properties.brand_danger_color
-		style.danger_text_color = add_contrast(properties.brand_danger_color, 70)
+		style.danger_text_color = add_contrast(properties.brand_danger_color, 75)
 	}
 	if (properties.brand_background_color) {
 		style.background_color = properties.brand_background_color
 		style.background = properties.brand_background_color
-		style.background_text_color = add_contrast(properties.brand_background_color, 70)
+		style.background_text_color = add_contrast(properties.brand_background_color, 75)
 		style.background_pattern_color = properties.brand_background_color
 	}
 	if (properties.brand_body_color) {
 		style.body_color = properties.brand_body_color
 		style.body_background = properties.brand_body_color
-		style.body_text_color = add_contrast(properties.brand_body_color, 70)
+		style.body_text_color = add_contrast(properties.brand_body_color, 75)
 		style.shaded_background = set_alpha(properties.brand_body_color, 0.8)
-		style.separator = add_contrast(properties.brand_body_color, 6)
+		style.separator = add_contrast(properties.brand_body_color, 7)
 		style.shadow_color = darken(properties.brand_body_color, 0.8)
 	}
 	if (properties.brand_card_color) {

svelte/src/filesystem/viewers/CustomBanner.svelte

@@ -34,7 +34,6 @@ const update_links = (path) => {
 
 <style>
 .container {
-	margin: 6px 0;
 	text-align: center;
 }
 .link {

svelte/src/user_home/MollieDeposit.svelte

@@ -86,7 +86,7 @@ const checkout = async () => {
 		<div class="countries">
 			{#each countries as c}
 				<button on:click={() => country = c}>
-					<span style="font-size: 1.6em; line-height: 1em;">{c.flag}</span>
+					<span class="icon_unicode">{c.flag}</span>
 					<span>{c.name}</span>
 				</button>
 			{/each}
@@ -190,12 +190,6 @@ const checkout = async () => {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
 }
-.countries > button {
-	display: flex;
-	flex-direction: row;
-	text-align: left;
-	gap: 5px;
-}
 
 .processors {
 	display: grid;

svelte/src/user_home/PatreonActivationResult.svelte

@@ -43,6 +43,14 @@ onMount(() => {
 				href="https://www.patreon.com/settings/apps">https://www.patreon.com/settings/apps</a>.
 				Try disconnecting all Pixeldrain logins and try again.
 			</p>
+			<li>
+				This can also happen if you canceled your Patreon membership
+				before upgrading your pixeldrain account. In that case, go to
+				the <a
+				href="https://www.patreon.com/pixeldrain/membership">memberships
+				page</a> and activate your membership again. If you already paid
+				in the last 30 days you will not be charged again.
+			</li>
 			<p>
 				It might also help to try linking the subscription in a
 				different web browser. Sometimes cookies or cached redirects can

webcontroller/style.go

@@ -161,7 +161,7 @@ func (s styleSheet) withDefaults() styleSheet {
 	defaultCSS(&s.Navigation, RawCSS("none"))
 	defaultCSS(&s.BodyBackground, s.BodyColor)
 	defaultHSL(&s.BackgroundText, s.BodyText)
-	defaultHSL(&s.Separator, s.BodyColor.Add(0, 0, .05))
+	defaultHSL(&s.Separator, s.BodyColor.Add(0, 0, .06))
 
 	return s
 }