From ad026481a2a672f5da12d19ac8d3f2a3cabeaf21 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Tue, 17 Jan 2023 19:03:14 +0100
Subject: [PATCH] Improve file viewer style consistnecy

---
 svelte/src/file_viewer/AdLeaderboard.svelte   | 13 ++++---
 svelte/src/file_viewer/viewers/Abuse.svelte   |  6 ++--
 .../file_viewer/viewers/BandwidthUsage.svelte |  2 +-
 svelte/src/file_viewer/viewers/File.svelte    | 10 +++---
 .../src/file_viewer/viewers/IconBlock.svelte  | 36 +++++++++++++++++++
 .../src/file_viewer/viewers/SpeedLimit.svelte |  2 +-
 .../src/file_viewer/viewers/TextBlock.svelte  |  5 +--
 svelte/src/file_viewer/viewers/Torrent.svelte | 12 +++----
 svelte/src/file_viewer/viewers/Video.svelte   | 15 +++-----
 svelte/src/file_viewer/viewers/Zip.svelte     | 29 ++++++++-------
 webcontroller/style.go                        |  2 +-
 11 files changed, 81 insertions(+), 51 deletions(-)
 create mode 100644 svelte/src/file_viewer/viewers/IconBlock.svelte

diff --git a/svelte/src/file_viewer/AdLeaderboard.svelte b/svelte/src/file_viewer/AdLeaderboard.svelte
index 4ce6463..de4f6f3 100644
--- a/svelte/src/file_viewer/AdLeaderboard.svelte
+++ b/svelte/src/file_viewer/AdLeaderboard.svelte
@@ -1,8 +1,8 @@
 <script>
 import { onMount } from "svelte"
-    import Mastodon from "../icons/Mastodon.svelte";
-    import Reddit from "../icons/Reddit.svelte";
-    import Twitter from "../icons/Twitter.svelte";
+import Mastodon from "../icons/Mastodon.svelte";
+import Reddit from "../icons/Reddit.svelte";
+import Twitter from "../icons/Twitter.svelte";
 import { color_by_name_no_prefix } from "../util/Util.svelte";
 import * as head from "./AdHead.svelte"
 
@@ -149,7 +149,7 @@ head.valueimpression_loaded.subscribe(v => {
 		<img bind:this={banner} usemap="#socials_map" class="banner" src="/res/img/advertising/pixeldrain_socials.webp" style="display: inline-block; width: 728px; height: 90px;" alt="Pixeldrain social media"/>
 
 	{:else if ad_type === "patreon_support"}
-		<div class="banner highlight_green" style="font-size: 1.1em; border-radius: 0;">
+		<div class="banner support_banner">
 			<span style="display: block; margin-bottom: 2px;">
 				No ads today. Pixeldrain is currently funded by our subscribers!
 			</span>
@@ -193,4 +193,9 @@ head.valueimpression_loaded.subscribe(v => {
 	margin: auto;
 	transform-origin: 0 0;
 }
+.support_banner {
+	font-size: 1.2em;
+	text-align: center;
+	padding: 2px;
+}
 </style>
diff --git a/svelte/src/file_viewer/viewers/Abuse.svelte b/svelte/src/file_viewer/viewers/Abuse.svelte
index c57f42c..64989bb 100644
--- a/svelte/src/file_viewer/viewers/Abuse.svelte
+++ b/svelte/src/file_viewer/viewers/Abuse.svelte
@@ -10,9 +10,9 @@ let file = {
 }
 </script>
 
-<br/>
-<TextBlock width="750px">
-	<h1>Unavailable for legal reasons</h1>
+<h1>{file.name}</h1>
+<TextBlock>
+	<h2>Unavailable for legal reasons</h2>
 	<p>
 		This file has been removed for violating pixeldrain's
 		<a href="/about#content-policy">content policy</a>. Type of abuse:
diff --git a/svelte/src/file_viewer/viewers/BandwidthUsage.svelte b/svelte/src/file_viewer/viewers/BandwidthUsage.svelte
index 67b36cb..bce48e7 100644
--- a/svelte/src/file_viewer/viewers/BandwidthUsage.svelte
+++ b/svelte/src/file_viewer/viewers/BandwidthUsage.svelte
@@ -12,7 +12,7 @@ $: transfer_left = download_limits.transfer_limit = download_limits.transfer_lim
 </script>
 
 {#if $download_limits.loaded}
-	<TextBlock width="700px" center={true}>
+	<TextBlock center={true}>
 		{#if file.size > transfer_left}
 			<div class="highlight_yellow">
 				This file is too large to download completely with your current
diff --git a/svelte/src/file_viewer/viewers/File.svelte b/svelte/src/file_viewer/viewers/File.svelte
index b2e01f0..614e566 100644
--- a/svelte/src/file_viewer/viewers/File.svelte
+++ b/svelte/src/file_viewer/viewers/File.svelte
@@ -1,7 +1,7 @@
 <script>
 import { createEventDispatcher } from "svelte";
 import BandwidthUsage from "./BandwidthUsage.svelte";
-import TextBlock from "./TextBlock.svelte";
+import IconBlock from "./IconBlock.svelte";
 let dispatch = createEventDispatcher()
 
 export const set_file = f => file = f
@@ -17,8 +17,7 @@ let file = {
 </script>
 
 <h1>{file.name}</h1>
-<img src={file.icon_href} alt="File icon" class="icon">
-<TextBlock width="600px">
+<IconBlock icon_href={file.icon_href}>
 	Type: {file.mime_type}<br/>
 	No preview is available for this file type. Download to view it locally.
 	<br/>
@@ -26,9 +25,8 @@ let file = {
 		<i class="icon">download</i>
 		<span>Download</span>
 	</button>
-</TextBlock>
-
-<br/><br/>
+</IconBlock>
+<br/>
 {#if file.show_ads}
 	<BandwidthUsage file={file} on:reload/>
 {/if}
diff --git a/svelte/src/file_viewer/viewers/IconBlock.svelte b/svelte/src/file_viewer/viewers/IconBlock.svelte
new file mode 100644
index 0000000..635328c
--- /dev/null
+++ b/svelte/src/file_viewer/viewers/IconBlock.svelte
@@ -0,0 +1,36 @@
+<script>
+export let icon_href = ""
+export let width = "750px"
+</script>
+
+<div class="block" style="width: {width}; max-width: 100%">
+	<img src={icon_href} alt="File icon" class="icon">
+	<div class="description">
+		<slot></slot>
+	</div>
+</div>
+
+<style>
+.block {
+	display: inline-flex;
+	flex-direction: row;
+}
+.icon {
+	flex: 0 0 auto;
+	margin-right: 8px;
+	border-radius: 8px;
+	/* Prevent icon from being stretched if text content is too large */
+	object-fit: contain;
+}
+.description {
+	flex: 1 1 auto;
+	display: inline-block;
+	text-align: initial;
+	padding-left: 8px;
+	vertical-align: middle;
+
+	background-color: var(--shaded_background);
+	border-radius: 8px;
+	padding: 8px;
+}
+</style>
diff --git a/svelte/src/file_viewer/viewers/SpeedLimit.svelte b/svelte/src/file_viewer/viewers/SpeedLimit.svelte
index fe892bb..93e1999 100644
--- a/svelte/src/file_viewer/viewers/SpeedLimit.svelte
+++ b/svelte/src/file_viewer/viewers/SpeedLimit.svelte
@@ -15,7 +15,7 @@ export let file = {
 </script>
 
 <br/>
-<TextBlock width="800px">
+<TextBlock>
 	<img src="/res/img/slow_down.webp" class="header_image" alt="Yea, I'm gonna need you to slow down a bit"/>
 	<p>
 		Pixeldrain's free tier is supported by advertisements. There's only so
diff --git a/svelte/src/file_viewer/viewers/TextBlock.svelte b/svelte/src/file_viewer/viewers/TextBlock.svelte
index f23aa57..b51991b 100644
--- a/svelte/src/file_viewer/viewers/TextBlock.svelte
+++ b/svelte/src/file_viewer/viewers/TextBlock.svelte
@@ -1,9 +1,9 @@
 <script>
-export let width = "800px"
+export let width = "750px"
 export let center = false
 </script>
 
-<div class="block" class:center style="max-width: {width};">
+<div class="block" class:center style="width: {width};">
 	<slot></slot>
 </div>
 
@@ -13,6 +13,7 @@ export let center = false
 	text-align: initial;
 	padding-left: 8px;
 	vertical-align: middle;
+	max-width: 100%;
 
 	background-color: var(--shaded_background);
 	border-radius: 8px;
diff --git a/svelte/src/file_viewer/viewers/Torrent.svelte b/svelte/src/file_viewer/viewers/Torrent.svelte
index 2803d70..1d594bf 100644
--- a/svelte/src/file_viewer/viewers/Torrent.svelte
+++ b/svelte/src/file_viewer/viewers/Torrent.svelte
@@ -3,6 +3,7 @@ import { createEventDispatcher } from "svelte";
 import Magnet from "../../icons/Magnet.svelte";
 import { formatDate } from "../../util/Formatting.svelte"
 import { copy_text } from "../../util/Util.svelte";
+import IconBlock from "./IconBlock.svelte";
 import TextBlock from "./TextBlock.svelte";
 import TorrentItem from "./TorrentItem.svelte"
 
@@ -79,8 +80,7 @@ const copy_magnet = () => {
 </script>
 
 <h1>{file.name}</h1>
-<img src={file.icon_href} alt="File icon" class="icon">
-<TextBlock width="650px">
+<IconBlock icon_href={file.icon_href}>
 	{#if status === "finished"}
 		Created by: {torrent.created_by}<br/>
 		Comment: {torrent.comment}<br/>
@@ -120,12 +120,10 @@ const copy_magnet = () => {
 		<i class="icon">download</i>
 		<span>Download torrent file</span>
 	</button>
-</TextBlock>
-
+</IconBlock>
+<br/>
 {#if status === "finished"}
-	<br/>
-	<br/>
-	<TextBlock width="1000px">
+	<TextBlock>
 		<h2>Files in this torrent</h2>
 		<TorrentItem item={torrent.files} />
 	</TextBlock>
diff --git a/svelte/src/file_viewer/viewers/Video.svelte b/svelte/src/file_viewer/viewers/Video.svelte
index 7f38a65..a1ada78 100644
--- a/svelte/src/file_viewer/viewers/Video.svelte
+++ b/svelte/src/file_viewer/viewers/Video.svelte
@@ -1,7 +1,7 @@
 <script>
 import { onMount,  createEventDispatcher, tick } from "svelte";
 import BandwidthUsage from "./BandwidthUsage.svelte";
-import TextBlock from "./TextBlock.svelte";
+import IconBlock from "./IconBlock.svelte";
 let dispatch = createEventDispatcher()
 
 export let is_list = false
@@ -163,8 +163,7 @@ const fullscreen = () => {
 	{/if}
 {:else}
 	<h1>{file.name}</h1>
-	<img src={file.icon_href} class="video_icon" alt="Video icon">
-	<TextBlock width="600px">
+	<IconBlock icon_href={file.icon_href}>
 		The online video player on pixeldrain is only available for registered
 		users, or when the uploader of the video has a Pro account. You can
 		still download the video and watch it locally on your computer without
@@ -179,9 +178,8 @@ const fullscreen = () => {
 		<a href="https://www.patreon.com/join/pixeldrain" target="_blank" class="button" rel="noreferrer">
 			<i class="icon">bolt</i> Get Pixeldrain Pro
 		</a>
-	</TextBlock>
-
-	<br/><br/>
+	</IconBlock>
+	<br/>
 	{#if file.show_ads}
 		<BandwidthUsage file={file} on:reload/>
 	{/if}
@@ -226,11 +224,6 @@ h1 {
 	max-width: 100%;
 	max-height: 100%;
 }
-.video_icon {
-	display: inline-block;
-	vertical-align: middle;
-	border-radius: 8px;
-}
 @media(max-height: 500px) {
 	.container {
 		flex-direction: row;
diff --git a/svelte/src/file_viewer/viewers/Zip.svelte b/svelte/src/file_viewer/viewers/Zip.svelte
index 027e9c8..8251e4f 100644
--- a/svelte/src/file_viewer/viewers/Zip.svelte
+++ b/svelte/src/file_viewer/viewers/Zip.svelte
@@ -1,6 +1,7 @@
 <script>
 import { createEventDispatcher } from "svelte";
 import { formatDataVolume, formatDate } from "../../util/Formatting.svelte"
+import IconBlock from "./IconBlock.svelte";
 import TextBlock from "./TextBlock.svelte";
 import ZipItem from "./ZipItem.svelte";
 
@@ -20,6 +21,7 @@ let zip = {
 	children: null,
 }
 let uncomp_size = 0
+let comp_ratio = 0
 
 export const set_file = async f => {
 	file = f
@@ -37,6 +39,7 @@ export const set_file = async f => {
 		zip = await resp.json()
 
 		uncomp_size = recursive_size(zip)
+		comp_ratio = (uncomp_size / file.size)
 	} catch (err) {
 		console.error(err)
 	} finally {
@@ -64,34 +67,30 @@ const recursive_size = (file) => {
 
 <h1>{file.name}</h1>
 
-<img src={file.icon_href} alt="File icon" class="icon">
-<TextBlock width="600px">
+<IconBlock icon_href={file.icon_href}>
 	Compressed size: {formatDataVolume(file.size, 3)}<br/>
-	Uncompressed size: {formatDataVolume(uncomp_size, 3)}<br/>
+	Uncompressed size: {formatDataVolume(uncomp_size, 3)} (Ratio: {comp_ratio.toFixed(2)}x)<br/>
 	Uploaded on: {formatDate(file.date_upload, true, true, true)}
 	<br/>
 	<button class="button_highlight" on:click={() => {dispatch("download")}}>
 		<i class="icon">download</i>
 		<span>Download</span>
 	</button>
-</TextBlock>
-<br/><br/>
-
-{#if status === "parse_failed"}
-	<TextBlock width="650px">
+</IconBlock>
+<br/>
+{#if status === "finished"}
+	<TextBlock>
+		<h2>Files in this zip archive</h2>
+		<ZipItem item={zip} />
+	</TextBlock>
+{:else if status === "parse_failed"}
+	<TextBlock>
 		<p>
 			Zip archive could not be parsed. It may be corrupted.
 		</p>
 	</TextBlock>
 {/if}
 
-{#if status === "finished"}
-	<TextBlock width="1000px">
-		<h2>Files in this zip archive</h2>
-		<ZipItem item={zip} />
-	</TextBlock>
-{/if}
-
 <style>
 h1 {
 	text-shadow: 1px 1px 3px var(--shadow_color);
diff --git a/webcontroller/style.go b/webcontroller/style.go
index c6285fe..31dc8c6 100644
--- a/webcontroller/style.go
+++ b/webcontroller/style.go
@@ -260,7 +260,7 @@ func (s styleSheet) String() string {
 		s.BodyBackground.CSS(),
 		s.BodyText.CSS(),
 		s.Separator.CSS(),
-		s.BodyColor.WithAlpha(0.5).CSS(), // shaded_background
+		s.BodyColor.WithAlpha(0.6).CSS(), // shaded_background
 		s.CardColor.CSS(),
 		s.Chart1.CSS(),
 		s.Chart2.CSS(),