From 7777bf381009ae94e6fe201c846a31a80502e3e2 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Mon, 17 Jan 2022 14:10:50 +0100
Subject: [PATCH] Remove excess divs and styles

---
 svelte/src/file_viewer/FileViewer.svelte      |   2 +-
 svelte/src/file_viewer/viewers/Abuse.svelte   |  12 +-
 svelte/src/file_viewer/viewers/Audio.svelte   |   2 -
 svelte/src/file_viewer/viewers/File.svelte    |  36 +++---
 .../file_viewer/viewers/FilePreview.svelte    |  55 ++++-----
 svelte/src/file_viewer/viewers/Image.svelte   |   1 -
 .../viewers/LargeFileMessage.svelte           |   1 -
 .../src/file_viewer/viewers/RateLimit.svelte  |   5 +-
 svelte/src/file_viewer/viewers/Torrent.svelte | 108 ++++++++----------
 svelte/src/file_viewer/viewers/Video.svelte   |   1 -
 10 files changed, 97 insertions(+), 126 deletions(-)

diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte
index caa3e47..872c074 100644
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -671,7 +671,7 @@ const keyboard_event = evt => {
 	text-align: center;
 	vertical-align: middle;
 	transition: left 0.5s, right 0.5s;
-	overflow: hidden;
+	overflow: auto;
 	box-shadow: inset 2px 2px 10px 2px var(--shadow_color);
 	border-radius: 16px;
 }
diff --git a/svelte/src/file_viewer/viewers/Abuse.svelte b/svelte/src/file_viewer/viewers/Abuse.svelte
index b9c7328..328fa0b 100644
--- a/svelte/src/file_viewer/viewers/Abuse.svelte
+++ b/svelte/src/file_viewer/viewers/Abuse.svelte
@@ -8,6 +8,7 @@ let file = {
 }
 </script>
 
+<br/>
 <div class="container">
 	<h1>Unavailable for legal reasons</h1>
 	<p>
@@ -20,11 +21,10 @@ let file = {
 
 <style>
 .container {
-	position: relative;
-	display: block;
-	height: 100%;
-	width: 100%;
-	text-align: center;
-	overflow: hidden;
+	display: inline-block;
+	max-width: 100%;
+	background-color: rgba(0, 0, 0, 0.3);
+	border-radius: 16px;
+	padding: 8px;
 }
 </style>
diff --git a/svelte/src/file_viewer/viewers/Audio.svelte b/svelte/src/file_viewer/viewers/Audio.svelte
index f87c44a..b872718 100644
--- a/svelte/src/file_viewer/viewers/Audio.svelte
+++ b/svelte/src/file_viewer/viewers/Audio.svelte
@@ -93,11 +93,9 @@ const toggle_play = () => playing ? player.pause() : player.play()
 
 <style>
 .container {
-	height: 100%;
 	width: 100%;
 	margin: 50px 0 0 0;
 	padding: 0;
-	overflow-y: auto;
 	text-align: center;
 }
 .player {
diff --git a/svelte/src/file_viewer/viewers/File.svelte b/svelte/src/file_viewer/viewers/File.svelte
index f88fa81..3c0b3e0 100644
--- a/svelte/src/file_viewer/viewers/File.svelte
+++ b/svelte/src/file_viewer/viewers/File.svelte
@@ -14,22 +14,20 @@ let file = {
 }
 </script>
 
-<div class="container">
-	<h1>You are viewing a file on pixeldrain</h1>
-	<img src={file.icon_href} alt="File icon" class="icon">
-	<div class="description">
-		Name: {file.name}<br/>
-		Type: {file.mime_type}<br/>
-		No preview is available for this file type. Download to view it locally.
-		<br/>
-		<button class="button_highlight" on:click={() => {dispatch("download")}}>
-			<i class="icon">save</i>
-			<span>Download</span>
-		</button>
-	</div>
-	<br/><br/>
-	<LargeFileMessage file={file}></LargeFileMessage>
+<h1>You are viewing a file on pixeldrain</h1>
+<img src={file.icon_href} alt="File icon" class="icon">
+<div class="description">
+	Name: {file.name}<br/>
+	Type: {file.mime_type}<br/>
+	No preview is available for this file type. Download to view it locally.
+	<br/>
+	<button class="button_highlight" on:click={() => {dispatch("download")}}>
+		<i class="icon">save</i>
+		<span>Download</span>
+	</button>
 </div>
+<br/><br/>
+<LargeFileMessage file={file}></LargeFileMessage>
 
 <style>
 .icon {
@@ -46,12 +44,4 @@ let file = {
 	border-radius: 16px;
 	padding: 8px;
 }
-.container {
-	position: relative;
-	display: block;
-	height: 100%;
-	width: 100%;
-	text-align: center;
-	overflow: hidden;
-}
 </style>
diff --git a/svelte/src/file_viewer/viewers/FilePreview.svelte b/svelte/src/file_viewer/viewers/FilePreview.svelte
index 9e37c4f..9adf746 100644
--- a/svelte/src/file_viewer/viewers/FilePreview.svelte
+++ b/svelte/src/file_viewer/viewers/FilePreview.svelte
@@ -1,6 +1,5 @@
 <script>
 import { createEventDispatcher, tick } from "svelte";
-
 import Spinner from "../../util/Spinner.svelte";
 import Video from "./Video.svelte";
 import Audio from "./Audio.svelte";
@@ -43,42 +42,38 @@ const loading = e => {dispatch("loading", e.detail)}
 
 </script>
 
-<div class="file_container">
-	{#if viewer_type === "loading"}
-		<div class="center" style="width: 100px; height: 100px;">
-			<Spinner></Spinner>
-		</div>
-	{:else if viewer_type === "abuse"}
-		<Abuse bind:this={viewer}></Abuse>
-	{:else if viewer_type === "rate_limit"}
-		<RateLimit bind:this={viewer} on:download={download}></RateLimit>
-	{:else if viewer_type === "image"}
-		<Image bind:this={viewer} on:loading={loading}></Image>
-	{:else if viewer_type === "video"}
-		<Video bind:this={viewer} on:loading={loading} on:download={download} on:prev={prev} on:next={next}></Video>
-	{:else if viewer_type === "audio"}
-		<Audio bind:this={viewer} on:loading={loading} on:prev={prev} on:next={next}></Audio>
-	{:else if viewer_type === "pdf"}
-		<PDF bind:this={viewer}></PDF>
-	{:else if viewer_type === "text"}
-		<Text bind:this={viewer}></Text>
-	{:else if viewer_type === "torrent"}
-		<Torrent bind:this={viewer} on:loading={loading} on:download={download}></Torrent>
-	{:else if viewer_type === "file"}
-		<File bind:this={viewer} on:download={download}></File>
-	{/if}
-</div>
+{#if viewer_type === "loading"}
+	<div class="center">
+		<Spinner></Spinner>
+	</div>
+{:else if viewer_type === "abuse"}
+	<Abuse bind:this={viewer}></Abuse>
+{:else if viewer_type === "rate_limit"}
+	<RateLimit bind:this={viewer} on:download={download}></RateLimit>
+{:else if viewer_type === "image"}
+	<Image bind:this={viewer} on:loading={loading}></Image>
+{:else if viewer_type === "video"}
+	<Video bind:this={viewer} on:loading={loading} on:download={download} on:prev={prev} on:next={next}></Video>
+{:else if viewer_type === "audio"}
+	<Audio bind:this={viewer} on:loading={loading} on:prev={prev} on:next={next}></Audio>
+{:else if viewer_type === "pdf"}
+	<PDF bind:this={viewer}></PDF>
+{:else if viewer_type === "text"}
+	<Text bind:this={viewer}></Text>
+{:else if viewer_type === "torrent"}
+	<Torrent bind:this={viewer} on:loading={loading} on:download={download}></Torrent>
+{:else if viewer_type === "file"}
+	<File bind:this={viewer} on:download={download}></File>
+{/if}
 
 <style>
-.file_container {
-	width: 100%;
-	height: 100%;
-}
 .center{
 	position: relative;
 	display: block;
 	margin: auto;
+	width: 100px;
 	max-width: 100%;
+	height: 100px;
 	max-height: 100%;
 	top: 50%;
 	transform: translateY(-50%);
diff --git a/svelte/src/file_viewer/viewers/Image.svelte b/svelte/src/file_viewer/viewers/Image.svelte
index ede71f9..09f32b0 100644
--- a/svelte/src/file_viewer/viewers/Image.svelte
+++ b/svelte/src/file_viewer/viewers/Image.svelte
@@ -67,7 +67,6 @@ const mouseup = (e) => {
 
 <style>
 .container {
-	position: relative;
 	display: block;
 	height: 100%;
 	width: 100%;
diff --git a/svelte/src/file_viewer/viewers/LargeFileMessage.svelte b/svelte/src/file_viewer/viewers/LargeFileMessage.svelte
index 53af82d..fd04d7f 100644
--- a/svelte/src/file_viewer/viewers/LargeFileMessage.svelte
+++ b/svelte/src/file_viewer/viewers/LargeFileMessage.svelte
@@ -27,7 +27,6 @@ export let file = {
 .description {
 	display: inline-block;
 	text-align: center;
-	padding-left: 8px;
 	vertical-align: middle;
 	max-width: 700px;
 	background-color: rgba(0, 0, 0, 0.3);
diff --git a/svelte/src/file_viewer/viewers/RateLimit.svelte b/svelte/src/file_viewer/viewers/RateLimit.svelte
index 6708c68..286f5c1 100644
--- a/svelte/src/file_viewer/viewers/RateLimit.svelte
+++ b/svelte/src/file_viewer/viewers/RateLimit.svelte
@@ -1,5 +1,6 @@
 <script>
 import { createEventDispatcher } from "svelte";
+import LargeFileMessage from "./LargeFileMessage.svelte";
 let dispatch = createEventDispatcher()
 
 export const set_file = f => file = f
@@ -54,6 +55,8 @@ let file = {
 		</a>
 	</div>
 </div>
+<br/><br/>
+<LargeFileMessage file={file}></LargeFileMessage>
 
 <style>
 .container {
@@ -61,9 +64,7 @@ let file = {
 	display: inline-block;
 	width: 800px;
 	max-width: 100%;
-	max-height: 100%;
 	text-align: center;
-	overflow: auto;
 	background-color: rgba(0, 0, 0, 0.2);
 	border-radius: 16px;
 	text-align: left;
diff --git a/svelte/src/file_viewer/viewers/Torrent.svelte b/svelte/src/file_viewer/viewers/Torrent.svelte
index 19dac2f..5054b9d 100644
--- a/svelte/src/file_viewer/viewers/Torrent.svelte
+++ b/svelte/src/file_viewer/viewers/Torrent.svelte
@@ -77,60 +77,58 @@ const copy_magnet = () => {
 }
 </script>
 
-<div class="container">
-	<h1>{file.name}</h1>
-	<img src={file.icon_href} alt="File icon" class="icon">
-	<div class="description" style="max-width: 650px">
-		{#if status === "finished"}
-			Created by: {torrent.created_by}<br/>
-			Comment: {torrent.comment}<br/>
-			Created at: {formatDate(new Date(torrent.created_at), true, true, true)}<br/>
-			Info hash: {torrent.info_hash}<br/>
-			<a href={magnet} class="button button_highlight">
-				<Magnet></Magnet>
-				<span>Open magnet link</span>
-			</a>
-			<button
-				on:click={copy_magnet}
-				class="button"
-				class:button_highlight={copy_magnet_status === "copied"}
-				class:button_red={copy_magnet_status === "error"}
-			>
-				<Magnet></Magnet>
-				<span>
-					{#if copy_magnet_status === ""}
-						Copy magnet link
-					{:else if copy_magnet_status === "copied"}
-						Copied magnet
-					{:else if copy_magnet_status === "error"}
-						Error!
-					{/if}
-				</span>
-			</button>
-		{:else if status === "too_large"}
-			<p>
-				Torrent file is too large to parse. Please download the file and
-				add it to your torrent client locally.
-			</p>
-		{:else if status === "parse_failed"}
-			<p>
-				Torrent file could not be parsed. It may be corrupted.
-			</p>
-		{/if}
-		<button on:click={() => {dispatch("download")}} class="button">
-			<i class="icon">download</i>
-			<span>Download torrent file</span>
-		</button>
-	</div>
+<h1>{file.name}</h1>
+<img src={file.icon_href} alt="File icon" class="icon">
+<div class="description" style="max-width: 650px">
 	{#if status === "finished"}
-		<br/>
-		<br/>
-		<div class="description">
-			<h2>Files in this torrent</h2>
-			<TorrentItem item={torrent.files} />
-		</div>
+		Created by: {torrent.created_by}<br/>
+		Comment: {torrent.comment}<br/>
+		Created at: {formatDate(new Date(torrent.created_at), true, true, true)}<br/>
+		Info hash: {torrent.info_hash}<br/>
+		<a href={magnet} class="button button_highlight">
+			<Magnet></Magnet>
+			<span>Open magnet link</span>
+		</a>
+		<button
+			on:click={copy_magnet}
+			class="button"
+			class:button_highlight={copy_magnet_status === "copied"}
+			class:button_red={copy_magnet_status === "error"}
+		>
+			<Magnet></Magnet>
+			<span>
+				{#if copy_magnet_status === ""}
+					Copy magnet link
+				{:else if copy_magnet_status === "copied"}
+					Copied magnet
+				{:else if copy_magnet_status === "error"}
+					Error!
+				{/if}
+			</span>
+		</button>
+	{:else if status === "too_large"}
+		<p>
+			Torrent file is too large to parse. Please download the file and
+			add it to your torrent client locally.
+		</p>
+	{:else if status === "parse_failed"}
+		<p>
+			Torrent file could not be parsed. It may be corrupted.
+		</p>
 	{/if}
+	<button on:click={() => {dispatch("download")}} class="button">
+		<i class="icon">download</i>
+		<span>Download torrent file</span>
+	</button>
 </div>
+{#if status === "finished"}
+	<br/>
+	<br/>
+	<div class="description">
+		<h2>Files in this torrent</h2>
+		<TorrentItem item={torrent.files} />
+	</div>
+{/if}
 
 <style>
 .icon {
@@ -147,12 +145,4 @@ const copy_magnet = () => {
 	border-radius: 16px;
 	padding: 8px;
 }
-.container {
-	position: relative;
-	display: block;
-	height: 100%;
-	width: 100%;
-	text-align: center;
-	overflow: auto;
-}
 </style>
diff --git a/svelte/src/file_viewer/viewers/Video.svelte b/svelte/src/file_viewer/viewers/Video.svelte
index d78f54f..fd74bce 100644
--- a/svelte/src/file_viewer/viewers/Video.svelte
+++ b/svelte/src/file_viewer/viewers/Video.svelte
@@ -95,7 +95,6 @@ let download = () => { dispatch("download", {}) }
 
 <style>
 .container{
-	position: relative;
 	display: block;
 	height: 100%;
 	width: 100%;