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

Use fieldset for styling form elements

Browse Source
This commit is contained in:
Wim Brand
2025-01-27 22:54:47 +01:00
parent 6d7fb71830
commit 4d1680b7f5
11 changed files with 233 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -386,6 +386,22 @@ ul {
list-style: disc;
}
fieldset {
padding: 4px;
border-radius: 8px;
border: 2px var(--separator) solid;
margin: 0;
}
fieldset>legend {
padding: 2px 8px;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
font-size: 1.1em;
border-bottom: 2px var(--separator) solid;
}
/* Forms*/
.form {

7
res/template/widgets.html
View File

@@ -57,6 +57,13 @@
File <input type="file" name="file">
<hr/>
Color <input type="color" name="favcolor" value="#ff0000">
<hr/>
<fieldset>
<legend>Legend</legend>
<p>
Fieldset
</p>
</fieldset>
<br/><br/>
<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 16px;"></iframe>

2
svelte/src/filesystem/FileStats.svelte
View File

@@ -147,7 +147,7 @@ const close_socket = () => {
.stat {
line-height: 1.2em;
}
@media (max-width: 800px) {
@media (max-width: 1000px) {
.label {
text-align: center;
padding-left: 0;

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

@@ -252,7 +252,7 @@ const download = () => {
/* This max-width needs to be synced with the .toolbar max-width in
Toolbar.svelte and the .label max-width in FileStats.svelte */
@media (max-width: 800px) {
@media (max-width: 1000px) {
.viewer_area {
flex-direction: column-reverse;
}

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

@@ -56,7 +56,7 @@ const toggle_fullscreen = () => {
}
}
let expanded = false
let expanded = true
let expand = e => {
e.preventDefault()
e.stopPropagation()
@@ -188,14 +188,14 @@ let expand = e => {
/* 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) {
@media (max-width: 1000px) {
.toolbar {
overflow-y: hidden;
max-height: 2.1em;
}
.toolbar.expanded {
overflow-y: scroll;
max-height: 30vh;
max-height: 25vh;
}
.stats_container {
flex-direction: row;
@@ -204,7 +204,6 @@ Toolbar.svelte and the .label max-width in FileStats.svelte */
margin: 2px 0;
}
.hidden_vertical {
display: block;
}

14
svelte/src/filesystem/edit_window/AccessControl.svelte
View File

@@ -44,7 +44,8 @@ const del_password = (pass: string) => {
have delete permissions. You can see who the owner of a file is in the
Details window.
</p>
<h2>Link permissions</h2>
<fieldset>
<legend>Link permissions</legend>
<div class="row">
<div class="grow id">
Anyone with the link can...
@@ -53,8 +54,11 @@ const del_password = (pass: string) => {
<PermissionButton bind:permissions={file.link_permissions}/>
</div>
</div>
</fieldset>
<h2>User permissions</h2>
<fieldset>
<legend>User permissions</legend>
<p>
Enter a username here to give them access to this directory. The user will
not receive an e-mail invite. Giving write access to a user without giving
@@ -80,8 +84,10 @@ const del_password = (pass: string) => {
</div>
{/each}
{/if}
</fieldset>
<h2>Password permissions</h2>
<fieldset>
<legend>Password permissions</legend>
<p>
Allow users to enter a password to give them access to this directory.
</p>
@@ -108,13 +114,13 @@ const del_password = (pass: string) => {
</div>
{/each}
{/if}
</fieldset>
<style>
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-bottom: 1px solid var(--separator);
margin-bottom: 2px;
padding-bottom: 2px;
}

23
svelte/src/filesystem/edit_window/BrandingOptions.svelte
View File

@@ -77,20 +77,23 @@ const handle_picker = async e => {
let highlight_info = false
</script>
<fieldset>
<legend>Enable page branding</legend>
<p>
You can customize how your filesystem looks. The colours chosen here apply
to the directory you're currently in and all files and directories in this
directory. Colours which you do not want to modify can be left empty. Then
the default theme colour will be used.
the default theme colours will be used.
</p>
<div>
<input bind:checked={enabled} id="enable_branding" type="checkbox" class="form_input"/>
<label for="enable_branding">Enable custom branding options</label>
<label for="enable_branding">Enable custom page branding</label>
</div>
<hr/>
</fieldset>
<div class="grid" class:disabled={!enabled}>
<fieldset class="grid" disabled={!enabled}>
<legend>Colours</legend>
<div>
<div style="display: inline-block">Highlight</div>
<HelpButton bind:toggle={highlight_info}/>
@@ -120,6 +123,10 @@ let highlight_info = false
<div>Card</div>
<input type="color" bind:value={file.properties.brand_card_color}/>
<input type="text" bind:value={file.properties.brand_card_color}/>
</fieldset>
<fieldset class="grid" disabled={!enabled}>
<legend>Image customization</legend>
<p class="span3">
You can choose an image to show above or behind the files in this
directory. The image will be picked from your filesystem. The image will
@@ -141,9 +148,10 @@ let highlight_info = false
Pick
</button>
<input type="text" bind:value={file.properties.brand_background_image}/>
</div>
</fieldset>
<hr/>
<fieldset disabled={!enabled}>
<legend>Page preview</legend>
<p>
Below is an example of what the site looks like with these colours:
</p>
@@ -175,6 +183,7 @@ let highlight_info = false
</div>
</div>
</div>
</fieldset>
<FilePicker bind:this={picker} on:files={handle_picker}/>
@@ -195,7 +204,7 @@ input[type="color"] {
.span3 {
grid-column: span 3;
}
.disabled {
fieldset:disabled {
filter: opacity(40%);
}

9
svelte/src/filesystem/edit_window/FileOptions.svelte
View File

@@ -34,7 +34,8 @@ const delete_file = async e => {
}
</script>
<h2>File settings</h2>
<fieldset>
<legend>File settings</legend>
{#if is_root_dir}
<div class="highlight_yellow">
Filesystem root cannot be renamed. If this shared directory
@@ -47,13 +48,17 @@ const delete_file = async e => {
<label for="file_name">Name</label>
<input form="edit_form" bind:value={new_name} id="file_name" type="text" class="form_input" disabled={is_root_dir}/>
</div>
</fieldset>
{#if $nav.permissions.delete === true}
<h2>Delete</h2>
<fieldset>
<legend>Delete</legend>
<p>
Delete this file or directory. If this is a directory then all
subfiles will be deleted as well. This action cannot be undone.
</p>
<Button click={delete_file} red icon="delete" label="Delete" style="align-self: flex-start;"/>
</fieldset>
{/if}
<style>

13
svelte/src/filesystem/edit_window/SharingOptions.svelte
View File

@@ -24,7 +24,7 @@ let embed_iframe = file => {
let url = domain_url()+"/d/"+file.id
embed_html = `<iframe ` +
`src="${url}" ` +
`style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 8px; "` +
`style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px; "` +
`allowfullscreen` +
`></iframe>`
}
@@ -52,7 +52,8 @@ const update_shared = e => {
}
</script>
<h2>Share this file/directory</h2>
<fieldset>
<legend>Public link</legend>
{#if file.abuse_type !== undefined}
<div class="highlight_red">
@@ -88,8 +89,10 @@ const update_shared = e => {
<CopyButton text={share_link}>Copy</CopyButton>
{/if}
</div>
</fieldset>
<h2>Embedding</h2>
<fieldset>
<legend>Embedding</legend>
<p>
If you have a website you can embed pixeldrain directories and files in your
own webpages with the code below. If you embed a directory then all
@@ -97,8 +100,6 @@ const update_shared = e => {
options will also apply in the frame, but only when applied to this
directory. It will not inherit the style from parent directories.
</p>
<h3>Code</h3>
<p>
Put this code in your website to embed the file or directory.
</p>
@@ -110,8 +111,10 @@ const update_shared = e => {
<i class="icon">visibility</i> Show example
</button>
</div>
<hr/>
<div bind:this={preview_area} style="text-align: center;"></div>
</fieldset>
<style>
.center {

1
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -408,7 +408,6 @@ onMount(() => {
padding: 0;
background: var(--shaded_background);
backdrop-filter: blur(4px);
z-index: 1;
}
.toolbar {
display: flex;

10
svelte/src/filesystem/filemanager/ListView.svelte
View File

@@ -16,7 +16,7 @@ export let hide_branding = false
<tr>
<td></td>
<td>Name</td>
<td>Size</td>
<td class="hide_small">Size</td>
<td></td>
</tr>
{#each $nav.children as child, index (child.path)}
@@ -34,7 +34,7 @@ export let hide_branding = false
<td class="node_name">
{child.name}
</td>
<td class="node_size">
<td class="node_size hide_small">
{#if child.type === "file"}
{formatDataVolume(child.file_size, 3)}
{/if}
@@ -73,7 +73,6 @@ export let hide_branding = false
display: table;
margin: 8px auto 16px auto;
background: var(--shaded_background);
backdrop-filter: blur(4px);
border-collapse: collapse;
border-radius: 8px;
@@ -139,4 +138,9 @@ td {
width: 64px;
}
}
@media (max-width: 500px) {
.hide_small {
display: none;
}
}
</style>