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

Make button margins consistent, and some other fixes

Browse Source
This commit is contained in:
Fornax
2024-04-18 20:05:54 +02:00
parent 09528929b2
commit 46058edcc8
12 changed files with 67 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
init/init.go
View File

@@ -1,9 +1,7 @@
package init
import (
"math/rand"
"os"
"time"
"fornaxian.tech/config"
"fornaxian.tech/log"
@@ -46,9 +44,6 @@ func Init(r *httprouter.Router, prefix string, setLogLevel bool) {
log.Colours = true
log.Info("Starting web UI server (PID %v)", os.Getpid())
// Seed the RNG
rand.Seed(time.Now().UnixNano())
var conf webcontroller.Config
var _, err = config.New(
DefaultConfig,

2
res/static/style/layout.css
View File

@@ -492,10 +492,10 @@ input[type="color"],
select {
display: inline-flex;
flex-direction: row;
gap: 0.25em;
border-radius: 6px;
margin: 2px;
background: var(--input_background);
gap: 3px;
padding: 3px;
overflow: hidden;
color: var(--input_text);

12
svelte/src/admin_panel/Home.svelte
View File

@@ -90,6 +90,8 @@ let status = {
download_clients: 0,
download_connections: 0,
}
$: total_reads = status.local_reads + status.neighbour_reads + status.remote_reads
$: total_read_size = status.local_read_size + status.neighbour_read_size + status.remote_read_size
function getStats(order) {
lastOrder = order
@@ -207,6 +209,8 @@ onDestroy(() => {
<td>{formatDate(new Date(status.db_time), true, true, true)}</td>
<td>DB Latency</td>
<td>{formatNumber(status.db_latency / 1000, 3)} ms</td>
<td>PID</td>
<td>{status.pid}</td>
</tr>
</table>
@@ -225,8 +229,10 @@ onDestroy(() => {
<tr>
<td>Source</td>
<td>Reads</td>
<td>Reads %</td>
<td>Reads / s</td>
<td>Total size</td>
<td>Size %</td>
<td>Size / s</td>
</tr>
</thead>
@@ -234,22 +240,28 @@ onDestroy(() => {
<tr>
<td>Local cache</td>
<td>{status.local_reads}</td>
<td>{((status.local_reads / total_reads) * 100).toPrecision(3)}%</td>
<td>{status.local_reads_per_sec.toPrecision(4)}/s</td>
<td>{formatDataVolume(status.local_read_size, 4)}</td>
<td>{((status.local_read_size / total_read_size) * 100).toPrecision(3)}%</td>
<td>{formatDataVolume(status.local_read_size_per_sec, 4)}/s</td>
</tr>
<tr>
<td>Neighbour</td>
<td>{status.neighbour_reads}</td>
<td>{((status.neighbour_reads / total_reads) * 100).toPrecision(3)}%</td>
<td>{status.neighbour_reads_per_sec.toPrecision(4)}/s</td>
<td>{formatDataVolume(status.neighbour_read_size, 4)}</td>
<td>{((status.neighbour_read_size / total_read_size) * 100).toPrecision(3)}%</td>
<td>{formatDataVolume(status.neighbour_read_size_per_sec, 4)}/s</td>
</tr>
<tr>
<td>Reed-solomon</td>
<td>{status.remote_reads}</td>
<td>{((status.remote_reads / total_reads) * 100).toPrecision(3)}%</td>
<td>{status.remote_reads_per_sec.toPrecision(4)}/s</td>
<td>{formatDataVolume(status.remote_read_size, 4)}</td>
<td>{((status.remote_read_size / total_read_size) * 100).toPrecision(3)}%</td>
<td>{formatDataVolume(status.remote_read_size_per_sec, 4)}/s</td>
</tr>
</tbody>

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

@@ -18,7 +18,7 @@ export let border_top = false;
<style>
.border_top {
border-top: solid 1px var(--separator);
border-top: solid 2px var(--separator);
}
.image {
display: block;

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

@@ -635,7 +635,6 @@ const keyboard_event = evt => {
display: flex;
flex-direction: row;
text-align: left;
padding: 2px;
align-items: center;
}
@media(max-height: 600px) {
@@ -650,7 +649,6 @@ const keyboard_event = evt => {
flex-shrink: 0;
margin-left: 4px;
margin-right: 4px;
display: inline;
}
.headerbar > .file_viewer_headerbar_title {
flex-grow: 1;
@@ -658,7 +656,7 @@ const keyboard_event = evt => {
display: flex;
flex-direction: column;
overflow: hidden;
line-height: 1.2em; /* When the page is a list there will be two lines. Dont's want to stretch the container*/
line-height: 1.2em; /* When the page is a list there will be two lines. Don't want to stretch the container */
white-space: nowrap;
text-overflow: ellipsis;
justify-content: center;

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

@@ -1,4 +1,9 @@
<script context="module">
// Dead zone before the swipe action gets detected
const swipe_inital_offset = 25
// Amount of pixels after which the navigation triggers
const swipe_trigger_offset = 75
export const swipe_nav = (node, swipe_enabled) => {
let start_x = 0
let start_y = 0
@@ -23,8 +28,8 @@ export const swipe_nav = (node, swipe_enabled) => {
// The cursor must have moved at least 50 pixels and three times as much
// on the x axis than the y axis for it to count as a swipe
if (abs_x > 50 && abs_y < abs_x/3) {
set_offset((abs_x-50)*neg, false)
if (abs_x > swipe_inital_offset && abs_y < abs_x/3) {
set_offset((abs_x-swipe_inital_offset)*neg, false)
} else {
set_offset(0, true)
}
@@ -35,10 +40,10 @@ export const swipe_nav = (node, swipe_enabled) => {
return
}
if (render_offset > 100) {
if (render_offset > swipe_trigger_offset) {
set_offset(1000, true)
node.dispatchEvent(new CustomEvent("prev"))
} else if (render_offset < -100) {
} else if (render_offset < -swipe_trigger_offset) {
set_offset(-1000, true)
node.dispatchEvent(new CustomEvent("next"))
} else {
@@ -51,7 +56,7 @@ export const swipe_nav = (node, swipe_enabled) => {
let detail = "transform: translateX("+off+"px);"
if (animate) {
detail += "transition: transform 500ms;"
detail += "transition: transform 400ms;"
}
// Clear the transformation if the offset is zero

31
svelte/src/filesystem/Toolbar.svelte
View File

@@ -75,8 +75,10 @@ let expand = e => {
</script>
<div class="toolbar" class:expanded>
<div class="separator hidden_horizontal" style="margin-top: 6px;"></div>
<div class="stats_container" on:click={expand} on:keypress={expand} role="button" tabindex="0">
<button class="button_expand" on:click={expand}>
<button class="button_expand hidden_vertical" on:click={expand}>
{#if expanded}
<i class="icon">expand_more</i>
{:else}
@@ -108,6 +110,8 @@ let expand = e => {
</button>
{/if}
<div class="separator hidden_horizontal"></div>
{#if state.base.type === "file"}
<button on:click={() => dispatch("download")}>
<i class="icon">save</i>
@@ -142,6 +146,8 @@ let expand = e => {
<span>Fullscreen</span>
</button>
<div class="separator hidden_horizontal"></div>
<button on:click={() => details_visible = !details_visible} class:button_highlight={details_visible}>
<i class="icon">help</i>
<span>Deta<u>i</u>ls</span>
@@ -169,6 +175,7 @@ let expand = e => {
}
.separator {
height: 2px;
margin: 4px 0;
width: 100%;
background-color: var(--separator);
}
@@ -187,10 +194,16 @@ let expand = e => {
flex-direction: column;
}
.button_expand {
display: none;
line-height: 1em;
}
.hidden_vertical {
display: none;
}
.hidden_horizontal {
display: block;
}
/* This max-width needs to be synced with the .viewer_area max-width in
Toolbar.svelte and the .label max-width in FileStats.svelte */
@media (max-width: 800px) {
@@ -200,13 +213,21 @@ Toolbar.svelte and the .label max-width in FileStats.svelte */
}
.toolbar.expanded {
overflow-y: scroll;
max-height: 25vh;
max-height: 30vh;
}
.stats_container {
flex-direction: row;
}
.button_expand {
display: inline-block;
.separator {
margin: 2px 0;
}
.hidden_vertical {
display: block;
}
.hidden_horizontal {
display: none;
}
}

12
svelte/src/filesystem/edit_window/Branding.js
View File

@@ -37,12 +37,12 @@ const add_styles = (style, properties) => {
if (properties.brand_input_color) {
style.input_background = properties.brand_input_color
style.input_hover_background = properties.brand_input_color
style.input_text = add_contrast(properties.brand_input_color, 70)
style.input_text = add_contrast(properties.brand_input_color, 75)
}
if (properties.brand_highlight_color) {
style.highlight_color = properties.brand_highlight_color
style.highlight_background = properties.brand_highlight_color
style.highlight_text_color = add_contrast(properties.brand_highlight_color, 70)
style.highlight_text_color = add_contrast(properties.brand_highlight_color, 75)
// If we have a body colour to compare it to we use the highlight colour
// to generate the link colour
@@ -52,20 +52,20 @@ const add_styles = (style, properties) => {
}
if (properties.brand_danger_color) {
style.danger_color = properties.brand_danger_color
style.danger_text_color = add_contrast(properties.brand_danger_color, 70)
style.danger_text_color = add_contrast(properties.brand_danger_color, 75)
}
if (properties.brand_background_color) {
style.background_color = properties.brand_background_color
style.background = properties.brand_background_color
style.background_text_color = add_contrast(properties.brand_background_color, 70)
style.background_text_color = add_contrast(properties.brand_background_color, 75)
style.background_pattern_color = properties.brand_background_color
}
if (properties.brand_body_color) {
style.body_color = properties.brand_body_color
style.body_background = properties.brand_body_color
style.body_text_color = add_contrast(properties.brand_body_color, 70)
style.body_text_color = add_contrast(properties.brand_body_color, 75)
style.shaded_background = set_alpha(properties.brand_body_color, 0.8)
style.separator = add_contrast(properties.brand_body_color, 6)
style.separator = add_contrast(properties.brand_body_color, 7)
style.shadow_color = darken(properties.brand_body_color, 0.8)
}
if (properties.brand_card_color) {

1
svelte/src/filesystem/viewers/CustomBanner.svelte
View File

@@ -34,7 +34,6 @@ const update_links = (path) => {
<style>
.container {
margin: 6px 0;
text-align: center;
}
.link {

8
svelte/src/user_home/MollieDeposit.svelte
View File

@@ -86,7 +86,7 @@ const checkout = async () => {
<div class="countries">
{#each countries as c}
<button on:click={() => country = c}>
<span style="font-size: 1.6em; line-height: 1em;">{c.flag}</span>
<span class="icon_unicode">{c.flag}</span>
<span>{c.name}</span>
</button>
{/each}
@@ -190,12 +190,6 @@ const checkout = async () => {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.countries > button {
display: flex;
flex-direction: row;
text-align: left;
gap: 5px;
}
.processors {
display: grid;

8
svelte/src/user_home/PatreonActivationResult.svelte
View File

@@ -43,6 +43,14 @@ onMount(() => {
href="https://www.patreon.com/settings/apps">https://www.patreon.com/settings/apps</a>.
Try disconnecting all Pixeldrain logins and try again.
</p>
<li>
This can also happen if you canceled your Patreon membership
before upgrading your pixeldrain account. In that case, go to
the <a
href="https://www.patreon.com/pixeldrain/membership">memberships
page</a> and activate your membership again. If you already paid
in the last 30 days you will not be charged again.
</li>
<p>
It might also help to try linking the subscription in a
different web browser. Sometimes cookies or cached redirects can

2
webcontroller/style.go
View File

@@ -161,7 +161,7 @@ func (s styleSheet) withDefaults() styleSheet {
defaultCSS(&s.Navigation, RawCSS("none"))
defaultCSS(&s.BodyBackground, s.BodyColor)
defaultHSL(&s.BackgroundText, s.BodyText)
defaultHSL(&s.Separator, s.BodyColor.Add(0, 0, .05))
defaultHSL(&s.Separator, s.BodyColor.Add(0, 0, .06))
return s
}