diff --git a/res/static/style/layout.css b/res/static/style/layout.css index 2a53d36..907371b 100644 --- a/res/static/style/layout.css +++ b/res/static/style/layout.css @@ -472,23 +472,27 @@ input[type="submit"], input[type="button"], input[type="color"], select { - display: inline-block; + display: inline-flex; + flex-direction: row; + gap: 0.25em; border-radius: 6px; margin: 3px; background: var(--input_background); padding: 5px 5px 5px 5px; overflow: hidden; color: var(--input_text); - vertical-align: middle; - align-items: center; cursor: pointer; transition: padding 0.1s, box-shadow 0.1s, background 0.1s; + /* Align content vertically in relation to the container */ + vertical-align: middle; + /* Align content vertically in relation to eachother */ + align-items: center; + /* Remove default styles set by the user-agent */ outline: 0; font-size: 1em; font-weight: normal; - line-height: 1; text-decoration: none; text-shadow: none; border: none; diff --git a/svelte/src/file_viewer/HomeButton.svelte b/svelte/src/file_viewer/HomeButton.svelte index ea957dc..fdc7f7a 100644 --- a/svelte/src/file_viewer/HomeButton.svelte +++ b/svelte/src/file_viewer/HomeButton.svelte @@ -1,12 +1,14 @@ {#if window.user.username === ""} @@ -15,6 +17,7 @@ export let embedded_viewer = false @@ -29,6 +32,11 @@ export let embedded_viewer = false content: "pixeldrain"; } +.nobg { + background: none; + margin: 0; +} + @media (max-width: 600px) { .button_home::after { content: "pd"; diff --git a/svelte/src/file_viewer/Sharebar.svelte b/svelte/src/file_viewer/Sharebar.svelte index 7779219..dd93f33 100644 --- a/svelte/src/file_viewer/Sharebar.svelte +++ b/svelte/src/file_viewer/Sharebar.svelte @@ -28,35 +28,30 @@ const share_tumblr = () => { -
E-Mail @@ -83,6 +78,7 @@ const share_tumblr = () => { opacity: 1; } .button_full_width { + flex-direction: column; width: calc(100% - 6px); } .button_full_width > svg { diff --git a/svelte/src/filesystem/Breadcrumbs.svelte b/svelte/src/filesystem/Breadcrumbs.svelte index 3d98314..fbd8853 100644 --- a/svelte/src/filesystem/Breadcrumbs.svelte +++ b/svelte/src/filesystem/Breadcrumbs.svelte @@ -33,6 +33,7 @@ export let fs_navigator justify-content: center; flex-wrap: wrap; flex-direction: row; + overflow: hidden; } .breadcrumb { min-width: 1em; @@ -44,15 +45,15 @@ export let fs_navigator flex-direction: row; } .node_name { - margin: 6px 8px; + margin: 2px 8px; max-width: 20vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .node_name.base { - max-width: none; - white-space: unset; + /* The base name uses all available space */ + max-width: unset; } .nopad { margin-left: 0; diff --git a/svelte/src/filesystem/EditWindow.svelte b/svelte/src/filesystem/EditWindow.svelte index 9b9bcd0..b86c2d5 100644 --- a/svelte/src/filesystem/EditWindow.svelte +++ b/svelte/src/filesystem/EditWindow.svelte @@ -2,6 +2,7 @@ import { fs_delete_all, fs_rename, fs_update } from "./FilesystemAPI"; import Modal from "../util/Modal.svelte"; import { createEventDispatcher } from "svelte"; +import Button from "../layout/Button.svelte"; let dispatch = createEventDispatcher() @@ -66,7 +67,9 @@ const save = async () => { fs_navigator.reload() } } -const delete_file = async () => { +const delete_file = async e => { + e.preventDefault() + try { dispatch("loading", true) await fs_delete_all(file.path) @@ -110,9 +113,7 @@ const delete_file = async () => { Delete this file or directory. If this is a directory then all subfiles will be deleted as well. This action cannot be undone.

- +