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

115
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,66 +52,69 @@ 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">
This file or directory has received an abuse report. It cannot be
shared.<br/>
Type of abuse: {file.abuse_type}<br/>
Report time: {formatDate(file.abuse_report_time, true, true, true)}
</div>
{/if}
<p>
When a file or directory is shared it can be accessed through a
unique link. You can get the URL with the 'Copy link' button on
the toolbar, or share the link with the 'Share' button. If you
share a directory all the files within the directory are also
accessible from the link.
</p>
<div>
<input
form="edit_form"
bind:checked={shared}
on:change={update_shared}
id="shared"
type="checkbox"
class="form_input"
/>
<label for="shared">Share this file or directory</label>
</div>
<div class="form_grid">
{#if is_shared}
<span>Your sharing link: <a href={share_link}>{share_link}</a></span>
<CopyButton text={share_link}>Copy</CopyButton>
{#if file.abuse_type !== undefined}
<div class="highlight_red">
This file or directory has received an abuse report. It cannot be
shared.<br/>
Type of abuse: {file.abuse_type}<br/>
Report time: {formatDate(file.abuse_report_time, true, true, true)}
</div>
{/if}
</div>
<h2>Embedding</h2>
<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
subdirectories and files will be accessible through the frame. Branding
options will also apply in the frame, but only when applied to this
directory. It will not inherit the style from parent directories.
</p>
<p>
When a file or directory is shared it can be accessed through a
unique link. You can get the URL with the 'Copy link' button on
the toolbar, or share the link with the 'Share' button. If you
share a directory all the files within the directory are also
accessible from the link.
</p>
<div>
<input
form="edit_form"
bind:checked={shared}
on:change={update_shared}
id="shared"
type="checkbox"
class="form_input"
/>
<label for="shared">Share this file or directory</label>
</div>
<h3>Code</h3>
<p>
Put this code in your website to embed the file or directory.
</p>
<div class="center">
<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
<br/>
<CopyButton text={embed_html}>Copy HTML</CopyButton>
<button on:click={toggle_example} class:button_highlight={example} disabled={!is_shared}>
<i class="icon">visibility</i> Show example
</button>
</div>
<div class="form_grid">
{#if is_shared}
<span>Your sharing link: <a href={share_link}>{share_link}</a></span>
<CopyButton text={share_link}>Copy</CopyButton>
{/if}
</div>
</fieldset>
<div bind:this={preview_area} style="text-align: center;"></div>
<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
subdirectories and files will be accessible through the frame. Branding
options will also apply in the frame, but only when applied to this
directory. It will not inherit the style from parent directories.
</p>
<p>
Put this code in your website to embed the file or directory.
</p>
<div class="center">
<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
<br/>
<CopyButton text={embed_html}>Copy HTML</CopyButton>
<button on:click={toggle_example} class:button_highlight={example} disabled={!is_shared}>
<i class="icon">visibility</i> Show example
</button>
</div>
<hr/>
<div bind:this={preview_area} style="text-align: center;"></div>
</fieldset>
<style>
.center {