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

Fix a bunch of padding issues

Browse Source
This commit is contained in:
Fornax
2023-01-17 22:53:41 +01:00
parent ad026481a2
commit aec9371f4d
11 changed files with 42 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -160,7 +160,7 @@ head.valueimpression_loaded.subscribe(v => {
</div>
{:else if ad_type === "twitter"}
<div class="banner" style="font-size: 1.4em; text-align: center; padding: 4px;">
<div class="banner social_button">
<a href="https://twitter.com/Fornax96" rel="noreferrer" class="button" target="_blank" style="background-color: #1a8cd8; color: #ffffff;">
<Twitter style="color: #ffffff;"/>
Follow Pixeldrain on Twitter: @Fornax96
@@ -169,7 +169,7 @@ head.valueimpression_loaded.subscribe(v => {
{:else if ad_type === "mastodon"}
<div class="banner" style="font-size: 1.4em; text-align: center; padding: 4px;">
<div class="banner social_button">
<a href="https://mastodon.social/@fornax" rel="noreferrer" class="button" target="_blank" style="background-color: #595aff; color: #ffffff;">
<Mastodon style="color: #ffffff;"/>
Follow Pixeldrain on Mastodon: fornax@mastodon.social
@@ -178,12 +178,13 @@ head.valueimpression_loaded.subscribe(v => {
{:else if ad_type === "reddit"}
<div class="banner" style="font-size: 1.4em; text-align: center; padding: 4px;">
<div class="banner social_button">
<a href="https://www.reddit.com/r/PixelDrain" rel="noreferrer" class="button" target="_blank" style="background-color: #ff4500; color: #ffffff;">
<Reddit style="color: #ffffff;"/>
Follow Pixeldrain on Reddit: /r/pixeldrain
</a>
</div>
{/if}
</div>
@@ -198,4 +199,19 @@ head.valueimpression_loaded.subscribe(v => {
text-align: center;
padding: 2px;
}
.social_button {
font-size: 1.4em;
text-align: center;
padding: 4px;
}
/* Vertical estate is sparse on some devices*/
@media(max-height: 600px) {
.support_banner {
font-size: 1em;
}
.social_button {
font-size: 1.2em;
}
}
</style>

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

@@ -11,6 +11,7 @@ let file = {
</script>
<h1>{file.name}</h1>
<TextBlock>
<h2>Unavailable for legal reasons</h2>
<p>

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

@@ -17,6 +17,7 @@ let file = {
</script>
<h1>{file.name}</h1>
<IconBlock icon_href={file.icon_href}>
Type: {file.mime_type}<br/>
No preview is available for this file type. Download to view it locally.
@@ -26,7 +27,7 @@ let file = {
<span>Download</span>
</button>
</IconBlock>
<br/>
{#if file.show_ads}
<BandwidthUsage file={file} on:reload/>
{/if}

13
svelte/src/file_viewer/viewers/IconBlock.svelte
View File

@@ -12,15 +12,22 @@ export let width = "750px"
<style>
.block {
display: inline-flex;
display: flex;
flex-direction: row;
margin: 8px auto;
}
@media(max-width: 500px) {
.block {
flex-direction: column;
}
}
.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;
align-self: center;
}
.description {
flex: 1 1 auto;
@@ -28,7 +35,7 @@ export let width = "750px"
text-align: initial;
padding-left: 8px;
vertical-align: middle;
overflow-wrap: anywhere;
background-color: var(--shaded_background);
border-radius: 8px;
padding: 8px;

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

@@ -13,8 +13,7 @@ let file = {
}
</script>
<br/>
<TextBlock width="800px">
<TextBlock>
{#if file.availability === "file_rate_limited_captcha_required"}
<h1>
<i class="icon">file_download_off</i>

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

@@ -14,7 +14,6 @@ export let file = {
}
</script>
<br/>
<TextBlock>
<img src="/res/img/slow_down.webp" class="header_image" alt="Yea, I'm gonna need you to slow down a bit"/>
<p>
@@ -63,8 +62,6 @@ export let file = {
Also, I believe you have my stapler. Please give it back.
</p>
</TextBlock>
<br/>
<br/>
<style>
.header_image {

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

@@ -9,11 +9,11 @@ export let center = false
<style>
.block {
display: inline-block;
display: block;
text-align: initial;
padding-left: 8px;
vertical-align: middle;
max-width: 100%;
overflow-wrap: anywhere;
margin: 8px auto;
background-color: var(--shaded_background);
border-radius: 8px;

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

@@ -80,6 +80,7 @@ const copy_magnet = () => {
</script>
<h1>{file.name}</h1>
<IconBlock icon_href={file.icon_href}>
{#if status === "finished"}
Created by: {torrent.created_by}<br/>
@@ -121,7 +122,7 @@ const copy_magnet = () => {
<span>Download torrent file</span>
</button>
</IconBlock>
<br/>
{#if status === "finished"}
<TextBlock>
<h2>Files in this torrent</h2>

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

@@ -163,6 +163,7 @@ const fullscreen = () => {
{/if}
{:else}
<h1>{file.name}</h1>
<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
@@ -175,11 +176,8 @@ const fullscreen = () => {
<a href="/register" class="button">
<i class="icon">how_to_reg</i> Sign up
</a>
<a href="https://www.patreon.com/join/pixeldrain" target="_blank" class="button" rel="noreferrer">
<i class="icon">bolt</i> Get Pixeldrain Pro
</a>
</IconBlock>
<br/>
{#if file.show_ads}
<BandwidthUsage file={file} on:reload/>
{/if}

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

@@ -77,7 +77,7 @@ const recursive_size = (file) => {
<span>Download</span>
</button>
</IconBlock>
<br/>
{#if status === "finished"}
<TextBlock>
<h2>Files in this zip archive</h2>