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

Improve file viewer style consistnecy

Browse Source
This commit is contained in:
Fornax
2023-01-17 19:03:14 +01:00
parent ade760225a
commit ad026481a2
11 changed files with 81 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
svelte/src/file_viewer/AdLeaderboard.svelte
View File

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

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

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

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

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

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

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

36
svelte/src/file_viewer/viewers/IconBlock.svelte Normal file
View File

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

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

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

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

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

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

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

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

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

29
svelte/src/file_viewer/viewers/Zip.svelte
View File

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

2
webcontroller/style.go
View File

@@ -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(),