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

A bunch of styling fixes

Browse Source
This commit is contained in:
Fornax
2022-03-08 23:34:10 +01:00
parent 58bc2e112b
commit 493e1495ce
17 changed files with 162 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -426,7 +426,7 @@ const keyboard_event = evt => {
{#if is_list}
<button
on:click={toggle_gallery}
class="toolbar_button button_full_width"
class="toolbar_button"
class:button_highlight={view === "gallery"}
title="Opens a gallery view of the album">
<i class="icon">photo_library</i>
@@ -437,7 +437,7 @@ const keyboard_event = evt => {
{#if file.abuse_type === "" && view === "file"}
<button
on:click={downloader.download_file}
class="toolbar_button button_full_width"
class="toolbar_button"
title="Save this file to your computer">
<i class="icon">download</i>
<span>Download</span>
@@ -447,7 +447,7 @@ const keyboard_event = evt => {
{#if file.abuse_type === "" && is_list}
<button
on:click={downloader.download_list}
class="toolbar_button button_full_width"
class="toolbar_button"
title="Download all files in this album as a zip archive">
<i class="icon">download</i>
<span>DL all files</span>
@@ -456,7 +456,7 @@ const keyboard_event = evt => {
<button
on:click={copy_url}
class="toolbar_button button_full_width"
class="toolbar_button"
class:button_highlight={copy_url_status === "copied"}
class:button_red={copy_url_status === "error"}
title="Copy a link to this page to your clipboard">
@@ -474,7 +474,7 @@ const keyboard_event = evt => {
<button
on:click={toggle_sharebar}
class="toolbar_button button_full_width"
class="toolbar_button"
class:button_highlight={sharebar_visible}
title="Share this file on social media">
<i class="icon">share</i>
@@ -482,7 +482,7 @@ const keyboard_event = evt => {
</button>
<button
class="toolbar_button button_full_width"
class="toolbar_button"
on:click={qr_window.toggle}
class:button_highlight={qr_visible}
title="Show a QR code with a link to this page. Useful for sharing files in-person">
@@ -492,7 +492,7 @@ const keyboard_event = evt => {
{#if is_list}
<button
class="toolbar_button button_full_width"
class="toolbar_button"
title="Go to a random file when pressing → or clicking the next file button"
class:button_highlight={list_shuffle}
on:click={toggle_shuffle}>
@@ -507,7 +507,7 @@ const keyboard_event = evt => {
{#if view === "file"}
<button
class="toolbar_button button_full_width"
class="toolbar_button"
on:click={details_window.toggle}
class:button_highlight={details_visible}
title="Information and statistics about this file">
@@ -520,7 +520,7 @@ const keyboard_event = evt => {
{#if file.can_edit || list.can_edit}
<button
class="toolbar_button button_full_width"
class="toolbar_button"
on:click={edit_window.toggle}
class:button_highlight={edit_visible}
title="Edit or delete this file or album">
@@ -532,7 +532,7 @@ const keyboard_event = evt => {
{#if view === "file" && window.user_authenticated && !file.can_edit}
<button
on:click={grab_file}
class="toolbar_button button_full_width"
class="toolbar_button"
title="Copy this file to your own pixeldrain account">
<i class="icon">save_alt</i>
<span><u>G</u>rab file</span>
@@ -540,7 +540,7 @@ const keyboard_event = evt => {
{/if}
<button
class="toolbar_button button_full_width"
class="toolbar_button"
title="Include this file in your own webpages"
on:click={embed_window.toggle}
class:button_highlight={embed_visible}>
@@ -550,7 +550,7 @@ const keyboard_event = evt => {
{#if view === "file"}
<button
class="toolbar_button button_full_width"
class="toolbar_button"
title="Report this file as abusive"
on:click={report_window.toggle}
class:button_highlight={report_visible}>
@@ -754,9 +754,9 @@ const keyboard_event = evt => {
height: auto;
text-align: center;
}
.toolbar_button{
text-align: left;
width: calc(100% - 6px);
}
.toolbar_button > span {
vertical-align: middle;

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

@@ -78,6 +78,9 @@ const share_tumblr = () => {
transition: left 0.5s;
}
.visible { left: 8em; }
.button_full_width {
width: calc(100% - 6px);
}
.button_full_width > svg {
height: 3em;
width: 3em;

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

@@ -18,7 +18,7 @@ onMount(() => {
{#if visible}
<div in:fade out:fade class="notice highlight_yellow">
<div class="text">
🇺🇦 Russia has invaded Ukraine and is murdering its citizens! 🇺🇦<br/>
🇺🇦 Russia has invaded Ukraine and is attacking civilians! 🇺🇦<br/>
There are a number of ways you can help:
<a href="https://helpukrainewin.org/" rel="noreferrer" target="_blank">Click here for more information</a>.
</div>

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

@@ -33,6 +33,7 @@ let file = {
<style>
h1 {
text-shadow: 1px 1px 3px var(--shadow_color);
line-break: anywhere;
}
.icon {
display: inline-block;

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

@@ -132,6 +132,10 @@ const copy_magnet = () => {
{/if}
<style>
h1 {
text-shadow: 1px 1px 3px var(--shadow_color);
line-break: anywhere;
}
.icon {
display: inline-block;
vertical-align: middle;

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

@@ -170,6 +170,10 @@ const fullscreen = () => {
{/if}
<style>
h1 {
text-shadow: 1px 1px 3px var(--shadow_color);
line-break: anywhere;
}
.container {
display: flex;
flex-direction: column;

15
svelte/src/filesystem/Filesystem.svelte
View File

@@ -325,23 +325,23 @@ const share = () => {
</div>
{#if state.base.type === "file"}
<button on:click={download} class="toolbar_button button_full_width">
<button on:click={download} class="toolbar_button">
<i class="icon">save</i> Download
</button>
{/if}
<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
<button id="btn_download_list" class="toolbar_button" style="display: none;">
<i class="icon">save</i> DL all files
</button>
<button id="btn_copy" class="toolbar_button button_full_width">
<button id="btn_copy" class="toolbar_button">
<i class="icon">content_copy</i> <u>C</u>opy Link
</button>
<button on:click={() => sharebar_visible = !sharebar_visible} class="toolbar_button button_full_width" class:button_highlight={sharebar_visible}>
<button on:click={() => sharebar_visible = !sharebar_visible} class="toolbar_button" class:button_highlight={sharebar_visible}>
<i class="icon">share</i> Share
</button>
<button on:click={details.toggle} class="toolbar_button button_full_width" class:button_highlight={details_visible}>
<button on:click={details.toggle} class="toolbar_button" class:button_highlight={details_visible}>
<i class="icon">help</i> Deta<u>i</u>ls
</button>
<button id="btn_edit" class="toolbar_button button_full_width" style="display: none;">
<button id="btn_edit" class="toolbar_button" style="display: none;">
<i class="icon">edit</i> <u>E</u>dit
</button>
</div></div></div>
@@ -549,8 +549,9 @@ const share = () => {
height: auto;
text-align: center;
}
.toolbar_button{
.toolbar_button {
text-align: left;
width: calc(100% - 6px);
}
.toolbar_label {
text-align: left;

3
svelte/src/filesystem/Sharebar.svelte
View File

@@ -82,6 +82,9 @@ const share_tumblr = () => {
border-bottom-left-radius: 16px;
}
.visible { left: 8em; }
.button_full_width {
width: calc(100% - 6px);
}
.button_full_width > svg {
height: 3em;
width: 3em;

26
svelte/src/home_page/HomePage.svelte
View File

@@ -4,11 +4,8 @@ import OtherPlans from "./OtherPlans.svelte";
import UploadWidget from "./UploadWidget.svelte";
</script>
<header style="padding-bottom: 80px; padding-top: 80px;">
<picture>
<source media="(max-width: 700px)" srcset="/res/img/header_orbitron.webp">
<img class="header_image" src="/res/img/header_orbitron_wide.webp" alt="Header">
</picture>
<header>
<div class="header_image_container"></div>
</header>
<UploadWidget></UploadWidget>
@@ -83,7 +80,7 @@ import UploadWidget from "./UploadWidget.svelte";
option if your files are accessed often.
</p>
<div style="text-align: center;">
<img src="/res/img/coins.webp" alt="supported coins" style="width: 250px;"/>
<img src="/res/img/coins.webp" alt="supported coins" style="width: 250px; height: 96px;"/>
</div>
<p>
To use prepaid you need to register a pixeldrain account. After
@@ -93,9 +90,20 @@ import UploadWidget from "./UploadWidget.svelte";
</section>
<style>
.header_image{
width: 100%;
max-width: 800px;
.header_image_container {
margin: auto;
height: 300px;
width: 750px;
max-width: 100%;
background-image: url("/res/img/header_orbitron_wide.webp");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
@media (max-width: 700px) {
.header_image_container {
height: 250px;
background-image: url("/res/img/header_orbitron.webp");
}
}
</style>

2
svelte/src/home_page/UploadWidget.svelte
View File

@@ -577,7 +577,7 @@ const keydown = (e) => {
line-height: 1em;
text-align: center;
display: inline-block;
background-color: var(--highlight_color);
background: var(--highlight_color);
color: var(--highlight_text_color);
border-radius: 30px;
padding: 0.15em;

3
svelte/src/util/ThemePicker.svelte
View File

@@ -44,6 +44,9 @@ let set = s => {
<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
Skeuos
</button>
<button class:button_highlight={theme==="sweet"} on:click={() => {set("sweet")}}>
Sweet
</button>
</div>
<style>