pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove excess divs and styles

Browse Source
This commit is contained in:
Fornax
2022-01-17 14:10:50 +01:00
parent deba5060a9
commit 7777bf3810
10 changed files with 97 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -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;
}

12
svelte/src/file_viewer/viewers/Abuse.svelte
View File

@@ -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>

2
svelte/src/file_viewer/viewers/Audio.svelte
View File

@@ -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 {

36
svelte/src/file_viewer/viewers/File.svelte
View File

@@ -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>

55
svelte/src/file_viewer/viewers/FilePreview.svelte
View File

@@ -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%);

1
svelte/src/file_viewer/viewers/Image.svelte
View File

@@ -67,7 +67,6 @@ const mouseup = (e) => {
<style>
.container {
position: relative;
display: block;
height: 100%;
width: 100%;

1
svelte/src/file_viewer/viewers/LargeFileMessage.svelte
View File

@@ -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);

5
svelte/src/file_viewer/viewers/RateLimit.svelte
View File

@@ -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;

108
svelte/src/file_viewer/viewers/Torrent.svelte
View File

@@ -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>

1
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -95,7 +95,6 @@ let download = () => { dispatch("download", {}) }
<style>
.container{
position: relative;
display: block;
height: 100%;
width: 100%;